JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据...-CSDN博客

本文链接：https://blog.csdn.net/liaoxueli/article/details/83364051

以前做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="#" οnclick="CheckAll_Click();">全选</a>
<a href="#" οnclick="CheckReChange_Click();">反选</a>
到这里，已经可以实现了“全选”和“反选”功能了（看看，是不是无刷新）。

最后，实现，批量删除，这里，利用JS触法后台事件，添加一个服务器控件Button，ID=btnShowID（JS代码要使用），把他设置为隐藏，添加一句Html代码，来激发这个按钮的点击事件。
<a href="#" οnclick="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>");
        }
    }
}