GridView选择记录同时confirm用户确认删除

GridView选择记录同时confirm用户确认删除

简介

由于GridView是ASP.NET Web Forms常用的控件之一，经常会被用来展示和编辑自定义数据源。在开发中，经常会遇到用户想要删除某一项记录的需求。这时候，我们需要使用JavaScript来先确认用户是否真正想要删除该记录。

步骤

第一步：在GridView中添加CheckBox列

我们需要为GridView添加一个CheckBox列，来允许用户选择需要删除的记录。下面是一个简单的示例代码:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="Delete">
            <ItemTemplate>
                <asp:CheckBox ID="chkDelete" runat="server"/>
            </ItemTemplate>
        </asp:TemplateField>
        ...
    </Columns>
</asp:GridView>

第二步：添加删除按钮

在GridView的底部或顶部添加一个Button控件，用来执行删除操作。下面是一个简单的示例代码:

<asp:Button ID="btnDelete" runat="server" Text="Delete Selected" OnClick="btnDelete_Click"/>

第三步：使用JavaScript confirm对话框提示用户是否删除所选记录

在执行删除操作之前，我们需要使用JavaScript confirm对话框来确认用户是否真的想删除所选记录。下面是一个简单的示例代码：

function confirmDelete() {
    var selected = false;
    $('#<%= GridView1.ClientID %> input[type=checkbox]').each(function () {
        if ($(this).is(':checked')) {
            selected = true;
        }
    });

    if (!selected) {
        alert('Please select at least one record to delete.');
        return false;
    }

    return confirm('Are you sure you want to delete the selected record(s)?');
}

第四步：在删除按钮的OnClick事件中调用JavaScript函数

最后，我们需要将JavaScript函数与删除按钮的OnClick事件绑定在一起。下面是一个简单的示例代码：

protected void btnDelete_Click(object sender, EventArgs e)
{
    if (Page.IsValid)
    {
        if (Page.ClientScript.IsStartupScriptRegistered("confirmdelete") == false)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "confirmdelete", "return confirmDelete();", true);
            // 执行删除操作
            // ...
        }
    }
}

这样，我们就完成了在GridView中选择记录，同时confirm用户确认删除的完整攻略。下面是一个完整的示例代码：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="Delete">
            <ItemTemplate>
                <asp:CheckBox ID="chkDelete" runat="server"/>
            </ItemTemplate>
        </asp:TemplateField>
        ...
    </Columns>
</asp:GridView>
<asp:Button ID="btnDelete" runat="server" Text="Delete Selected" OnClick="btnDelete_Click"/>
<script type="text/javascript">
    function confirmDelete() {
        var selected = false;
        $('#<%= GridView1.ClientID %> input[type=checkbox]').each(function () {
            if ($(this).is(':checked')) {
                selected = true;
            }
        });

        if (!selected) {
            alert('Please select at least one record to delete.');
            return false;
        }

        return confirm('Are you sure you want to delete the selected record(s)?');
    }
</script>

protected void btnDelete_Click(object sender, EventArgs e)
{
    if (Page.IsValid)
    {
        if (Page.ClientScript.IsStartupScriptRegistered("confirmdelete") == false)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "confirmdelete", "return confirmDelete();", true);
            // 执行删除操作
            // ...
        }
    }
}