Count and Save number of Click on each Table Row using jQuery Ajax in ASP.Net

Hi jovceka,

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

Here i am using Label to display the count. If you don't want to display the count you can use HiddenField.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#gvCustomers tr:not(:has(th))').on('click', function () {
            var count = parseInt($(this).find('[id*=lblCount]').html() == '' ? 0 : $(this).find('[id*=lblCount]').html());
            $(this).find('[id*=lblCount]').html(count + 1);
        });

        $('[id*=btnSave]').on('click', function () {
            var customers = new Array();
            $("#gvCustomers tr:not(:has(th))").each(function () {
                var row = $(this);
                var customer = {};
                customer.Id = parseInt(row.find("TD").eq(0).html());
                customer.Name = row.find("TD").eq(1).html();
                customer.Country = row.find("TD").eq(2).html();
                customer.Count = row.find('[id*=lblCount]').html() == '' ? 0 : parseInt(row.find('[id*=lblCount]').html());
                customers.push(customer);
            });
            $.ajax({
                type: "POST",
                url: "Default.aspx/InsertCustomers",
                data: JSON.stringify({ customers: customers }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    alert("Record(s) inserted.");
                }
            });
        });
    });
</script>
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
        <asp:TemplateField HeaderText="Count">
            <ItemTemplate>
                <asp:Label ID="lblCount" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
<asp:Button Text="Save" runat="server" ID="btnSave" />

Namespaces

C#

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

VB.Net

Imports System.Collections.Generic
Imports 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)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        gvCustomers.DataSource = dt;
        gvCustomers.DataBind();
    }
}

[WebMethod]
public static void InsertCustomers(List<Customer> customers)
{
    foreach (Customer customer in customers)
    {
        // Insert Code.
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            string query = "INSERT INTO Customers (Id,Name,Country,Count) VALUES (@Id,@Name,@Country,@Count)";
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.Connection = con;
                cmd.Parameters.AddWithValue("@Id", customer.Id);
                cmd.Parameters.AddWithValue("@Name", customer.Name);
                cmd.Parameters.AddWithValue("@Country", customer.Country);
                cmd.Parameters.AddWithValue("@Count", customer.Count);
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }
}

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
    public int Count { get; set; }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id", GetType(Integer)), New DataColumn("Name", GetType(String)), New DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        gvCustomers.DataSource = dt
        gvCustomers.DataBind()
    End If
End Sub

<WebMethod()>
Public Shared Sub InsertCustomers(ByVal customers As List(Of Customer))
    For Each customer As Customer In customers
        ' Insert Code.
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using con As SqlConnection = New SqlConnection(constr)
            Dim query As String = "INSERT INTO Customers (Id,Name,Country,Count) VALUES (@Id,@Name,@Country,@Count)"
            Using cmd As SqlCommand = New SqlCommand(query)
                cmd.Connection = con
                cmd.Parameters.AddWithValue("@Id", customer.Id)
                cmd.Parameters.AddWithValue("@Name", customer.Name)
                cmd.Parameters.AddWithValue("@Country", customer.Country)
                cmd.Parameters.AddWithValue("@Count", customer.Count)
                con.Open()
                cmd.ExecuteNonQuery()
                con.Close()
            End Using
        End Using
    Next
End Sub

Public Class Customer
    Public Property Id As Integer
    Public Property Name As String
    Public Property Country As String
    Public Property Count As Integer
End Class

Screenshots

The Form

Values in WebMethod