[Solved] Access ASP.Net GridView CommandArgument value when populated using jQuery AJAX

Hi czacharakis,

It is not possible to have ASP.Net controls like LinkButton, Button and access its properties like CommandArgument when you populate using jQuery AJAX.

CommandArgument is not available in JavaScript or jQuery. You can make use of HiddenFields and then access them on postback.

using the below article i have created the example.

Search GridView with Paging on TextBox KeyPress using jQuery in ASP.Net

HTML

Search: <asp:TextBox ID="txtSearch" runat="server" />
<hr />
<asp:HiddenField ID="hfSelected" runat="server" />
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText="Name"
            ItemStyle-CssClass="ContactName" />
        <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button Text="AddToFav" runat="server" OnClick="OnAddToFav"
                    BackColor="#99CCFF" BorderColor="black" CssClass="btn btn-default btn-xs AddToFav" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
<div class="Pager">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="ASPSnippets_Pager.min.js"></script>
<script type="text/javascript">
    $(function () {
        GetCustomers(1);
    });

    $("[id*=txtSearch]").live("keyup", function () {
        GetCustomers(parseInt(1));
    });

    $(".Pager .page").live("click", function () {
        GetCustomers(parseInt($(this).attr('page')));
    });

    $(".AddToFav").live("click", function () {
        var customer = {};
        customer.Name = $(this).closest('tr').find('td').eq(0).text();
        customer.Id = $(this).closest('tr').find('td').eq(1).text();
        customer.City = $(this).closest('tr').find('td').eq(2).text();
        $('[id*=hfSelected]').val(JSON.stringify(customer));
    });

    function SearchTerm() {
        return jQuery.trim($("[id*=txtSearch]").val());
    };

    function GetCustomers(pageIndex) {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCustomers",
            data: '{searchTerm: "' + SearchTerm() + '", pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    }

    var row;
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var customers = xml.find("Customers");
        if (row == null) {
            row = $("[id*=gvCustomers] tr:last-child").clone(true);
        }
        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
        if (customers.length > 0) {
            $.each(customers, function () {
                var customer = $(this);
                $("td", row).eq(0).html($(this).find("ContactName").text());
                $("td", row).eq(1).html($(this).find("CustomerID").text());
                $("td", row).eq(2).html($(this).find("City").text());
                $("[id*=gvCustomers]").append(row);
                row = $("[id*=gvCustomers] tr:last-child").clone(true);
            });
            var pager = xml.find("Pager");
            $(".Pager").ASPSnippets_Pager({
                ActiveCssClass: "current",
                PagerCssClass: "pager",
                PageIndex: parseInt(pager.find("PageIndex").text()),
                PageSize: parseInt(pager.find("PageSize").text()),
                RecordCount: parseInt(pager.find("RecordCount").text())
            });

            $(".ContactName").each(function () {
                var searchPattern = new RegExp('(' + SearchTerm() + ')', 'ig');
                $(this).html($(this).text().replace(searchPattern, "<span class = 'highlight'>" + SearchTerm() + "</span>"));
            });
        } else {
            var empty_row = row.clone(true);
            $("td:first-child", empty_row).attr("colspan", $("td", row).length);
            $("td:first-child", empty_row).attr("align", "center");
            $("td:first-child", empty_row).html("No records found for the search criteria.");
            $("td", empty_row).not($("td:first-child", empty_row)).remove();
            $("[id*=gvCustomers]").append(empty_row);
        }
    };
</script>

Namespaces

C#

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

VB.Net

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

Code

C#

private static int PageSize = 5;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDummyRow();
    }
}

private void BindDummyRow()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("CustomerID");
    dummy.Columns.Add("ContactName");
    dummy.Columns.Add("City");
    dummy.Rows.Add();
    gvCustomers.DataSource = dummy;
    gvCustomers.DataBind();
}

[WebMethod]
public static string GetCustomers(string searchTerm, int pageIndex)
{
    string query = "[GetCustomers_Pager]";
    SqlCommand cmd = new SqlCommand(query);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@SearchTerm", searchTerm);
    cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
    cmd.Parameters.AddWithValue("@PageSize", PageSize);
    cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
    return GetData(cmd, pageIndex).GetXml();
}

private static DataSet GetData(SqlCommand cmd, int pageIndex)
{
    string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Customers");
                DataTable dt = new DataTable("Pager");
                dt.Columns.Add("PageIndex");
                dt.Columns.Add("PageSize");
                dt.Columns.Add("RecordCount");
                dt.Rows.Add();
                dt.Rows[0]["PageIndex"] = pageIndex;
                dt.Rows[0]["PageSize"] = PageSize;
                dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
                ds.Tables.Add(dt);
                return ds;
            }
        }
    }
}

protected void OnAddToFav(object sender, EventArgs e)
{
    JavaScriptSerializer se = new JavaScriptSerializer();
    Customer customer = se.Deserialize<Customer>(hfSelected.Value);
    string message = "ID : " + customer.Id + "\\n";
    message += "Name : " + customer.Name + "\\n";
    message += "City : " + customer.City;
    ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('" + message + "')", true);
}

public class Customer
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string City { get; set; }
}

VB.Net

Private Shared PageSize As Integer = 5
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        BindDummyRow()
    End If
End Sub

Private Sub BindDummyRow()
    Dim dummy As New DataTable()
    dummy.Columns.Add("CustomerID")
    dummy.Columns.Add("ContactName")
    dummy.Columns.Add("City")
    dummy.Rows.Add()
    gvCustomers.DataSource = dummy
    gvCustomers.DataBind()
End Sub


<WebMethod()> _
Public Shared Function GetCustomers(searchTerm As String, pageIndex As Integer) As String
    Dim query As String = "[GetCustomers_Pager]"
    Dim cmd As New SqlCommand(query)
    cmd.CommandType = CommandType.StoredProcedure
    cmd.Parameters.AddWithValue("@SearchTerm", searchTerm)
    cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
    cmd.Parameters.AddWithValue("@PageSize", PageSize)
    cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
    Return GetData(cmd, pageIndex).GetXml()
End Function

Private Shared Function GetData(cmd As SqlCommand, pageIndex As Integer) As DataSet
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
    Using con As New SqlConnection(strConnString)
        Using sda As New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using ds As New DataSet()
                sda.Fill(ds, "Customers")
                Dim dt As New DataTable("Pager")
                dt.Columns.Add("PageIndex")
                dt.Columns.Add("PageSize")
                dt.Columns.Add("RecordCount")
                dt.Rows.Add()
                dt.Rows(0)("PageIndex") = pageIndex
                dt.Rows(0)("PageSize") = PageSize
                dt.Rows(0)("RecordCount") = cmd.Parameters("@RecordCount").Value
                ds.Tables.Add(dt)
                Return ds
            End Using
        End Using
    End Using
End Function

Protected Sub OnAddToFav(ByVal sender As Object, ByVal e As EventArgs)
    Dim se As JavaScriptSerializer = New JavaScriptSerializer()
    Dim customer As Customer = se.Deserialize(Of Customer)(hfSelected.Value)
    Dim message As String = "ID : " & customer.Id & "\n"
    message += "Name : " & customer.Name & "\n"
    message += "City : " & customer.City
    ClientScript.RegisterClientScriptBlock(Me.GetType(), "", "alert('" & message & "')", True)
End Sub

Public Class Customer
    Public Property Id As String
    Public Property Name As String
    Public Property City As String
End Class

Screenshot