JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
以前做web，基本没用过啥JS，这短时间，公司里面接触到的JS蛮多的，他们叫我在DataGrid里面的CheckBox弄个“全选”，要用JS来实现，来实现批量删除，这个功能，直接用C#是很好实现的，直接遍历就可以把选中的ID全部取出来。JS，那就只能用Html的CheckBox，这个不是服务器控件，C#后台代码是无法访问了，所以，再网上找了点资料，实现了。
首先，先定义一个DataGrid控件，先添加一个模板列，里面放一个Html的CheckBox，属性name=ChoessAll，（name，JS代码后面要用到）ID=chkChoessAll，绑定数据的唯一标识，这里是ID。
html（.aspx）代码如下：
<asp:GridView ID="gvUint" runat="server" AutoGenerateColumns="False" Width="100%">
<Columns>
<asp:TemplateField HeaderText="选择">
<ItemTemplate>
<input id="chkChoessAll" name="ChoessAll" value=''<%# DataBinder.Eval(Container.DataItem, "ID")%>'' type="checkbox" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="楼盘名" />
<asp:BoundField DataField="address" HeaderText="地址" />
</Columns>
</asp:GridView>
添加一个HiddenField控件（Html控件）属性ID=hfId，（ID，JS代码后面要用到）；选中的Check里面的数据的ID号。
现在实现JS代码：
<script type="text/javascript">
//选择全部
function CheckAll_Click()
...{
if (document.form1.ChoessAll.length)
...{
document.getElementById("hfId").value = ",";
for (var i=0;i<document.form1.ChoessAll.length;i++)
...{
document.form1.ChoessAll[i].checked = true;
// document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
// document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
}
}
else
...{
document.form1.ChoessAll.checked = true;
}
//document.getElementById("btnShowID").click();
}
//反选
function CheckReChange_Click()
...{
if (document.form1.ChoessAll.length)
...{
document.getElementById("hfId").value = ",";
for (var i=0;i<document.form1.ChoessAll.length;i++)
...{
if(document.form1.ChoessAll[i].checked)
...{
document.form1.ChoessAll[i].checked = false;
}
else
...{
document.form1.ChoessAll[i].checked = true;
}
// document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
// document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
}
}
else
...{
document.form1.ChoessAll.checked = true;
}
//document.getElementById("btnShowID").click();
}
//删除数据事件（根据选择框删除）
function Delete_Click()
...{
if (document.form1.ChoessAll.length)
...{
var num=0;
document.getElementById("hfId").value = ",";
for (var i=0;i<document.form1.ChoessAll.length;i++)
...{
if(document.form1.ChoessAll[i].checked)
...{
document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
num = num + 1;
}
}
}
if(0==num)
...{
return alert(''没有选中任何数据!'');
}
else
...{
if(confirm(''确定要删除所选中的数据吗?''))
...{
document.getElementById("btnShowID").click();
}
}
}
</script>
这里，随便弄个控件来触法“全选”和“反选”JS函数
<a href="#" onclick="CheckAll_Click();">全选</a>
<a href="#" onclick="CheckReChange_Click();">反选</a>
到这里，已经可以实现了“全选”和“反选”功能了（看看，是不是无刷新）。
最后，实现，批量删除，这里，利用JS触法后台事件，添加一个服务器控件Button，ID=btnShowID（JS代码要使用），把他设置为隐藏，添加一句Html代码，来激发这个按钮的点击事件。
<a href="#" onclick="Delete_Click();">删除</a>
实现Button的后台事件：
protected void btnShowID_Click(object sender, EventArgs e)
...{
//把这里的改成数据库操作就可以实现批量删除了
labID.Text = hfId.Value.ToString().Trim();
string[] strParam = hfId.Value.ToString().Split('','');
for (int i = 0; i < strParam.Length; ++i)
...{
this.Response.Write(strParam[i].ToString().Trim() + "<br>");
}}
功能到这里就完结了，下面给出全部实现代码：
aspx：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
//选择全部
function CheckAll_Click()
...{
if (document.form1.ChoessAll.length)
...{
document.getElementById("hfId").value = ",";
for (var i=0;i<document.form1.ChoessAll.length;i++)
...{
document.form1.ChoessAll[i].checked = true;
// document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
// document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
}
}
else
...{
document.form1.ChoessAll.checked = true;
}
//document.getElementById("btnShowID").click();
}
//反选
function CheckReChange_Click()
...{
if (document.form1.ChoessAll.length)
...{
document.getElementById("hfId").value = ",";
for (var i=0;i<document.form1.ChoessAll.length;i++)
...{
if(document.form1.ChoessAll[i].checked)
...{
document.form1.ChoessAll[i].checked = false;
}
else
...{
document.form1.ChoessAll[i].checked = true;
}
// document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
// document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
}
}
else
...{
document.form1.ChoessAll.checked = true;
}
//document.getElementById("btnShowID").click();
}
//删除数据事件（根据选择框删除）
function Delete_Click()
...{
if (document.form1.ChoessAll.length)
...{
var num=0;
document.getElementById("hfId").value = ",";
for (var i=0;i<document.form1.ChoessAll.length;i++)
...{
if(document.form1.ChoessAll[i].checked)
...{
document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
num = num + 1;
}
}
}
if(0==num)
...{
return alert(''没有选中任何数据!'');
}
else
...{
if(confirm(''确定要删除所选中的数据吗?''))
...{
document.getElementById("btnShowID").click();
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" onclick="Delete_Click();">删除</a>
</div>
<div>
<asp:GridView ID="gvUint" runat="server" AutoGenerateColumns="False" Width="100%">
<Columns>
<asp:TemplateField HeaderText="选择">
<ItemTemplate>
<input id="chkChoessAll" name="ChoessAll" value=''<%# DataBinder.Eval(Container.DataItem, "ID")%>'' type="checkbox" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="楼盘名" />
<asp:BoundField DataField="address" HeaderText="地址" />
</Columns>
</asp:GridView>
</div>
<a href="#" onclick="CheckAll_Click();">全选</a>
<a href="#" onclick="CheckReChange_Click();">反选</a>
<asp:Label ID="labID" runat="server"></asp:Label>
<div>
<asp:HiddenField ID="hfId" runat="server" />
<asp:Button ID="btnShowID" runat="server" Text="btnShowID" OnClick="btnShowID_Click" style="display:none"/></div>
</form>
</body>
</html>
cs：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
...{
protected void Page_Load(object sender, EventArgs e)
...{
}
protected void btnShowID_Click(object sender, EventArgs e)
...{
//把这里的改成数据库操作就可以实现批量删除了
labID.Text = hfId.Value.ToString().Trim();
string[] strParam = hfId.Value.ToString().Split('','');
for (int i = 0; i < strParam.Length; ++i)
...{
this.Response.Write(strParam[i].ToString().Trim() + "<br>");
}
}
}
<
补充：asp.net教程,.Net开发 
