jQuery TagIt AutoComplete TextBox: Submit multiple values using C# and VB.Net

Hi lingers,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/jquery.tagit.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/tagit.ui-zendesk.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/js/tag-it.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: '<%=ResolveUrl("Default.aspx/GetCustomers") %>',
            data: "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                var sampleTags = [];
                $.each(data.d, function (i, item) {
                    sampleTags.push(item);
                });
                $("#myTags").tagit({
                    availableTags: sampleTags,
                    singleField: true,
                    singleFieldNode: $('#hfSelectedIds')
                });
            },
            error: function (response) {
                alert(response.responseText);
            },
            failure: function (response) {
                alert(response.responseText);
            }
        });
    });
</script>
<table>
    <tr>
        <td>Id:
        </td>
        <td>
            <ul id="myTags">
            </ul>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
            <input type="hidden" name="tags" id="hfSelectedIds" />
        </td>
    </tr>
</table>

Code

C#

using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;

VB.Net

Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services

Code

C#

[WebMethod]
public static string[] GetCustomers()
{
    List<string> customers = new List<string>();
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "SELECT [CustomerID] FROM [Customers]";
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(sdr["CustomerID"].ToString());
                }
            }
            conn.Close();
        }
    }

    return customers.ToArray();
}

protected void Button1_Click(object sender, EventArgs e)
{
    string selectedTags = Request.Form["tags"].Replace(",", "/");
    ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('" + selectedTags + "')", true);
}

VB.Net

<WebMethod>
Public Shared Function GetCustomers() As String()
    Dim customers As List(Of String) = New List(Of String)()
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand()
            cmd.CommandText = "SELECT [CustomerID] FROM [Customers]"
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    customers.Add(sdr("CustomerID").ToString())
                End While
            End Using
            conn.Close()
        End Using
    End Using

    Return customers.ToArray()
End Function

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim selectedTags As String = Request.Form("tags").Replace(",", "/")
    ClientScript.RegisterClientScriptBlock(Me.GetType(), "", "alert('" & selectedTags & "')", True)
End Sub

Screenshot