asp.net GridView的删除对话框的两种方法

2023年6月10日下午6:13 • JavaScript

下面开始详细介绍“ASP.NET GridView的删除对话框的两种方法”。

方法一：使用自定义模态窗口

在GridView中完成删除操作时，我们需要弹出确认对话框来告知用户所选数据即将被删除。为此，我们可以使用自定义的模态窗口。

1. 创建一个新的Web窗体

在项目中添加一个新的Web窗体，为该窗体添加一个Div元素和两个按钮：一个用于绑定GridView，另一个用于关闭窗口。

```HTML

```

2. 添加JavaScript脚本

在窗体中添加以下JavaScript脚本：

 function ShowConfirm() {
     // 获取gridview
     var gridview = document.getElementById('<%= GridView1.ClientID %>');
     // 获取选中行
     var rows = gridview.getElementsByTagName('tr');
     var count = 0;
     var id = '';

     // 获取选中行的id
     for (var i = 0; i < rows.length; i++) {
         var cell = rows[i].getElementsByTagName('td')[0];
         var chk = cell.getElementsByTagName('input')[0];
         if (chk != null && chk.type === 'checkbox' && chk.checked) {
             id += chk.value + ",";
             count++;
         }
     }
     // 判断有没有选中记录
     if (count === 0) {
         alert("请选择一条记录！");
         return;
     }
     // 截去最后的逗号
     id = id.substring(0, id.length - 1);
     // 将选中的记录绑定到隐藏框
     document.getElementById('<%= HiddenField1.ClientID %>').value = id;
     // 弹出自定义对话框
     document.getElementById('messageBox').style.display = '';
 }

在脚本中，首先获取GridView控件，并循环检查所有可见行的复选框是否被选中，如果选中了，则将该行的记录ID存入一个隐藏的文本框。

3. 后台代码

在窗体中添加以下后台代码：

 protected void btnYes_Click(object sender, EventArgs e)
 {
     string[] id = HiddenField1.Value.Split(',');
     string sql = "delete from t_user where (user_id=@userid)";
     using (SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["dbConnectionString"].ConnectionString))
     {
         conn.Open();
         SqlCommand cmd = new SqlCommand(sql, conn);
         SqlParameter[] para = new SqlParameter[] { new SqlParameter("@userid", SqlDbType.NVarChar) };
         cmd.Parameters.AddRange(para);
         for (int i = 0; i < id.Length; i++)
         {
             para[0].Value = id[i];
             cmd.ExecuteNonQuery();
         }
     }
     GridView1.DataBind();
 }

 protected void btnNo_Click(object sender, EventArgs e)
 {
     // 关闭窗口
     Response.Write("<script>document.getElementById('messageBox').style.display='none';</script>");
 }

在删除按钮被点击时，后台代码首先获取隐藏文本框中存储的记录ID，并将其封装到SQL参数中。然后，通过SqlCommand对象执行SQL语句，最后刷新GridView显示。当取消按钮被点击时，我们只需要简单地关闭对话框。

示例说明

由于篇幅的限制，这里只是简略的介绍了如何使用自定义模态窗口来完成GridView的删除操作，完整的示例代码在这里：https://github.com/gdufeZLYL/ASP.NET_DeleteDialog。

方法二：使用GridView内置的删除对话框

1. 新建一个数据源

首先，我们需要在代码中添加一个SqlDataSource控件，该控件的目的是提供数据源。在GridView中使用SqlDataSource控件时，数据源应与GridView实例一起工作。

<SqIDataSource runat="server" ID="SqlDataSource" ConnectionString="<%$ ConnectionStrings:dbConnectionString%>"
                  DeleteCommand="DELETE FROM t_user WHERE user_id=@userid">
        <DeleteParameters>
            <asp:Parameter Name="userId" Type="String" />
        </DeleteParameters>
    </SqIDataSource>

2. GridView控件的配置

接下来，我们需要将GridView控件配置为删除记录时使用内置的删除对话框。为此，我们将AutoGenerateDeleteButton属性设置为"True"。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource"
                      DataKeyNames="user_id" CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True"
                      PageSize="10" AutoGenerateDeleteButton="True">
                      <AlternatingRowStyle BackColor="White" />
                      <Columns>
                          <asp:BoundField DataField="user_id" HeaderText="用户ID" ReadOnly="True" SortExpression="user_id" />
                          <asp:BoundField DataField="user_name" HeaderText="用户名" SortExpression="user_name" />
                          <asp:BoundField DataField="user_password" HeaderText="用户密码" SortExpression="user_password" />
                          <asp:BoundField DataField="user_type" HeaderText="用户类型" SortExpression="user_type" />
                      </Columns>
                      <EditRowStyle BackColor="#7C6F57" />
                      <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
                      <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
                      <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
                      <RowStyle BackColor="#E3EAEB" />
                  </asp:GridView>