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
});
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
});
function UpdateTags() {
$('[id*=GridView1] tr:has(td)').each(function () {
var ids = [];
$.each($(this).find('.tagit-choice'), function () {
ids.push($(this).find('input[type=hidden]').val());
});
$(this).find('[id*=hfIds]').val(ids.join(','));
});
}
</script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Name" ItemStyle-Width="100" />
<asp:BoundField DataField="Country" HeaderText="Country" />
<asp:TemplateField HeaderText="CustomerID">
<ItemTemplate>
<ul id="myTags" class="myTags">
</ul>
<asp:HiddenField ID="hfIds" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Button Text="Update" runat="server" OnClick="OnUpdate" OnClientClick="UpdateTags()" />
Namespaces
C#
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
VB.Net
mports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
GridView1.DataSource = GetData();
GridView1.DataBind();
}
}
protected void OnUpdate(object sender, EventArgs e)
{
int i = 0;
foreach (GridViewRow row in GridView1.Rows)
{
string name = row.Cells[0].Text;
string country = row.Cells[1].Text;
string selectedTags = (row.FindControl("hfIds") as HiddenField).Value.Trim().Replace(",", "/");
if (!string.IsNullOrEmpty(selectedTags))
{
// Your Update code.
ClientScript.RegisterClientScriptBlock(this.GetType(), "Alert_" + i, "alert('" + selectedTags + "');", true);
i++;
}
}
}
[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();
}
private DataTable GetData()
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT TOP 3 * FROM Customers";
using (SqlConnection con = new SqlConnection(conString))
{
SqlCommand cmd = new SqlCommand(query);
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
return dt;
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
GridView1.DataSource = GetData()
GridView1.DataBind()
End If
End Sub
Protected Sub OnUpdate(ByVal sender As Object, ByVal e As EventArgs)
Dim i As Integer = 0
For Each row As GridViewRow In GridView1.Rows
Dim name As String = row.Cells(0).Text
Dim country As String = row.Cells(1).Text
Dim selectedTags As String = (TryCast(row.FindControl("hfIds"), HiddenField)).Value.Trim().Replace(",", "/")
If Not String.IsNullOrEmpty(selectedTags) Then
' Your Update code.
ClientScript.RegisterClientScriptBlock(Me.GetType(), "Alert_" & i, "alert('" & selectedTags & "');", True)
i += 1
End If
Next
End Sub
<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
Private Function GetData() As DataTable
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim query As String = "SELECT TOP 3 * FROM Customers"
Using con As SqlConnection = New SqlConnection(conString)
Dim cmd As SqlCommand = New SqlCommand(query)
Using sda As SqlDataAdapter = New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using dt As DataTable = New DataTable()
sda.Fill(dt)
Return dt
End Using
End Using
End Using
End Function
Screenshot