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
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?
It may not cause the problem. Did you put the hidden fields within the tag?