I am trying out the following jquery/asp.net code sample in Visual Studio 2013. Unlike the example below -- in my exercise I have placed the c# code in the code behind page and I placed the jquery code with the aspx markup. The gridview displays the data, but when I click on the button the alert is not invoked. When I try setting debugging on the jquery, the jquery code is not being entered. I would be grateful if someone could point out what I am missing:
Code-Behind
protected void Page_Load(object sender, EventArgs e)
{
var myTestList = new List<MyTestClass1>
{
new MyTestClass1 {ID = 1, Name = "Name1"},
new MyTestClass1 {ID = 2, Name = "Name2"},
new MyTestClass1 {ID = 3, Name = "Name3"},
new MyTestClass1 {ID = 4, Name = "Name4"},
new MyTestClass1 {ID = 5, Name = "Name5"},
new MyTestClass1 {ID = 6, Name = "Name6"}
};
GridView1.DataSource = myTestList;
GridView1.DataBind();
}
public class MyTestClass1
{
public int ID { get; set; }
public string Name { get; set; }
}
Markup
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="WebApplication1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
//--I'm doing this in code behind
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<form id="HtmlForm" runat="server">
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="false"
DataKeyNames="ID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckSelect" runat="server" />
<asp:HiddenField ID="hdID" runat="server"
Value='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Name
</HeaderTemplate>
<ItemTemplate>
<asp:Label runat="server" Text='<%# Eval("Name") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnGetData" runat="server" Text="Get Data" />
JavaScript
var gridView1Control = document.getElementById('<%= GridView1.ClientID %>');
$('#<%= btnGetData.ClientID %>').click(function(e) {
//To uncheck the header checkbox when there are no selected checkboxes in itemtemplate
$('input:checkbox[id$=CheckSelect]:checked', gridView1Control).each(function(item, index) {
var id = $(this).next('input:hidden[id$=hdID]').val();
alert(id);
});
return false;
});
Its because the element CheckSelect
inside the asp:GridView
GridView1
gets the ID GridView1_ChkSelect_{row_index} and hdID
gets the id GridView1_hdID_{row_index}
. Here you are using the selector $=
which
Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.
What you need is *=
Selects elements that have the specified attribute with a value containing a given substring.
Change your code like this.
$('input:checkbox[id*=CheckSelect]:checked',
gridView1Control).each(function (item, index) {
var id = $(this).next('input:hidden[id*=hdID]').val();
alert(id);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.