Home Asp.net Get GridView Selected Row HiddenField Values in jQuery From Client-side

Get GridView Selected Row HiddenField Values in jQuery From Client-side

1137
2

In my previous tutorials, I’d explained how to export gridview data to word excel text and pdf, bind gridview using executereader, print gridview data on print button click and other more cracking tutorials on GridView, Asp.net here.

Now here in this tutorial, I’ll explain how to get gridview selected row hiddenfield values in jQuery from client-side in asp.net with example code and step by step guide.

Get GridView Selected Row HiddenField Values In jQuery From Client-side

Following code snippet will call on btnGetSelected click event and get the selected or checked rows to get hidden field values and save it to hdnValues javascript variable to display it later.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('[id$=btnGetSelected]').click(function () {
            var hdnValues = '';
            $("input[name$=chkSelect]:checked").each(function () {
                hdnValues += "," + $(this).next($('input[name$=hdnSubId]')).val();
            });
            hdnValues = hdnValues.substring(1, hdnValues.length);
            alert("Selected subjects: " + hdnValues);
            return false;
        });
    });
</script>

HTML Markup To Get GridView Selected Row HiddenField Values – [.aspx]

Here is the complete HTML markup that I used for this demonstration to get gridview selected row hiddenfield values in my .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Get selected row's hiddenfield values in asp.net</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[id$=btnGetSelected]').click(function () {
                var hdnValues = '';
                $("input[name$=chkSelect]:checked").each(function () {
                    hdnValues += "," + $(this).next($('input[name$=hdnSubId]')).val();
                });
                hdnValues = hdnValues.substring(1, hdnValues.length);
                alert("Selected subjects: " + hdnValues);
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h4>Get selected row's hiddenfield values in asp.net</h4>
            <asp:GridView ID="grdResult" runat="server">
                <HeaderStyle Font-Bold="true" BackColor="#9a9a9a" BorderColor="#222" Height="30" ForeColor="White" />
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkSelectAll" runat="server" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="chkSelect" runat="server" />
                            <asp:HiddenField ID="hdnSubId" Value='<%#Eval("SubjectName") %>' runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <br />
            <asp:Button ID="btnGetSelected" runat="server" Text="Get Selected" />
        </div>
    </form>
</body>
</html>

After adding HTML markup to .aspx page, we need to bind the grid view. So choose your language (that is C# or Vb.net) and paste it to your code-behind file.

Binding Asp.net Gridview In C# – [.cs]

Now add the following namespace:

using System.Data;

After that add the following code to .aspx.cs page to get gridview selected row hiddenfield values:

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
        LoadResultData();
    }
}

private void LoadResultData() {
    DataTable dt = new DataTable();

    //Creating Column
    dt.Columns.Add("SubjectId");
    dt.Columns.Add("SubjectName");
    dt.Columns.Add("Marks");

    //Adding Results in rows
    dt.Rows.Add(1, "Asp.net", 95);
    dt.Rows.Add(2, "C#", 88);
    dt.Rows.Add(3, "Vb.net", 78);
    dt.Rows.Add(4, "HTML", 89);
    dt.Rows.Add(5, "CSS", 90);
    dt.Rows.Add(6, "JavaScript", 85);
    dt.Rows.Add(7, "jQuery", 96);

    //Binding Results to gridview
    grdResult.DataSource = dt;
    grdResult.DataBind();
}

Binding Asp.net Gridview In Vb.net – [.vb]

Now add the following namespace:

Imports System.Data

After that add the following code to .aspx.vb page to get gridview selected row hiddenfield values:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadResultData()
    End If
End Sub

Private Sub LoadResultData()
    Dim dt As New DataTable()

    'Creating Column'
    dt.Columns.Add("SubjectId")
    dt.Columns.Add("SubjectName")
    dt.Columns.Add("Marks")

    'Adding Results in rows'
    dt.Rows.Add(1, "Asp.net", 95)
    dt.Rows.Add(2, "C#", 88)
    dt.Rows.Add(3, "Vb.net", 78)
    dt.Rows.Add(4, "HTML", 89)
    dt.Rows.Add(5, "CSS", 90)
    dt.Rows.Add(6, "JavaScript", 85)
    dt.Rows.Add(7, "jQuery", 96)

    'Binding Results to gridview'
    grdResult.DataSource = dt
    grdResult.DataBind()
End Sub

Example Result

Get Asp.net GridView Selected Row HiddenField Values From Client-side in jQuery
Get Asp.net GridView Selected Row HiddenField Values From Client-side in jQuery

Download Example

Previous articleAdd aspx Page Title, MetaKeywords, MetaDescription Tags Dynamically
Next articleHighlight GridView Row on CheckBox Check or Selection in jQuery
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

2 COMMENTS

  1. Hi Mayank,

    how to cater the solution with updatepanel?
    i try your solution and the hidden value always return undefined.
    not sure if it is cause by update panel?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

4 × 5 =