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()
         ... {
            var itemnum = document.getElementsByName("ChoessAll").length;
            //if (document.form1.ChoessAll.length)
            if (itemnum>0)
            ...{
                for (var i=0;i<itemnum;i++)
                ...{
                    document.getElementsByName("ChoessAll")[i].checked = true;
                }
            }
            else
            ...{
               document.getElementsByName("ChoessAll").checked = true;
            }
        }
         // 反选
         function  CheckReChange_Click()
         ... {
            var itemnum = document.getElementsByName("ChoessAll").length;
            if (itemnum>0)
            ...{
                for (var i=0;i<itemnum;i++)
                ...{
                    if(document.getElementsByName("ChoessAll")[i].checked)
                    ...{
                        document.getElementsByName("ChoessAll")[i].checked = false;
                    }
                    else
                    ...{
                        document.getElementsByName("ChoessAll")[i].checked = true;
                    }
                }
            }
            else
            ...{
               document.getElementsByName("ChoessAll").checked = true;
            }
        }
         // 删除数据事件（根据选择框删除）
         function  Delete_Click()
         ... {
            var itemnum = document.getElementsByName("ChoessAll").length;
            if (itemnum>0)
            ...{
                var num=0;
                document.getElementById("hfId").value = ",";
                for (var i=0;i<itemnum;i++)
                ...{
                    if(document.getElementsByName("ChoessAll")[i].checked)
                    ...{
                        document.getElementById("hfId").value = document.getElementById("hfId").value + document.getElementsByName("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()
         ... {
            var itemnum = document.getElementsByName("ChoessAll").length;
            //if (document.form1.ChoessAll.length)
            if (itemnum>0)
            ...{
                for (var i=0;i<itemnum;i++)
                ...{
                    document.getElementsByName("ChoessAll")[i].checked = true;
                }
            }
            else
            ...{
               document.getElementsByName("ChoessAll").checked = true;
            }
        }
         // 反选
        function CheckReChange_Click()
         ... {
            var itemnum = document.getElementsByName("ChoessAll").length;
            if (itemnum>0)
            ...{
                for (var i=0;i<itemnum;i++)
                ...{
                    if(document.getElementsByName("ChoessAll")[i].checked)
                    ...{
                        document.getElementsByName("ChoessAll")[i].checked = false;
                    }
                    else
                    ...{
                        document.getElementsByName("ChoessAll")[i].checked = true;
                    }
                }
            }
            else
            ...{
               document.getElementsByName("ChoessAll").checked = true;
            }
        }
         // 删除数据事件（根据选择框删除）
        function Delete_Click()
         ... {
            var itemnum = document.getElementsByName("ChoessAll").length;
            if (itemnum>0)
            ...{
                var num=0;
                document.getElementById("hfId").value = ",";
                for (var i=0;i<itemnum;i++)
                ...{
                    if(document.getElementsByName("ChoessAll")[i].checked)
                    ...{
                        document.getElementById("hfId").value = document.getElementById("hfId").value + document.getElementsByName("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>");
        }
    }
}