实现消息框以警告用户删除数据答案

【问题标题】：Implement messagebox for warn to user about delete data实现消息框以警告用户删除数据
【发布时间】：2012-10-09 15:15:34
【问题描述】：

我想删除页面中的一些数据并想向用户发出警告（显示一个带有是/否的消息框），如果用户点击是，删除数据

是否可以在 ASP 中实现 MessageBox？如果可以，如何实现？

【问题讨论】：

你可以使用 JavaScript confirm

标签： asp.net

【解决方案1】：

confirm 很简单：

<input type="submit" value="delete" onclick="javascript:confirm('Are you sure?')"/>

对于 ASP.NET，您可以在服务器端执行此操作：

btnDelete.Attributes.Add("onclick", "return confirm('Are you sure?')");

或者，在标记上：

<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure?');" />

编辑： 使用GridView，您可以在服务器端代码上执行类似的操作：

public partial class _Default : System.Web.UI.Page {

    Dictionary<string, string> collection = null;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            collection = new Dictionary<string, string>();
            collection.Add("Microwave", "$299");
            collection.Add("Coffee maker", "$59");
            collection.Add("Arm chair", "$89");
        }
        GridView1.DataSource = collection;
        GridView1.DataBind();
    }

    protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e)
    {
        if (DataControlRowType.DataRow == e.Row.RowType)
        {
            ((LinkButton)e.Row.FindControl("lnkDelete"))
                .Attributes.Add("onclick", "return confirm('are you sure?')");

        }
    }

    protected void GridView1_RowCommand(Object sender, GridViewCommandEventArgs e) {
        if (e.CommandName.ToLower() == "delete")
        {
            // this code should be executed only when the user clicks "ok"
            // in the confirm message that appears on the browser

            // your implementation goes here
        }
    }
}

您的标记可以类似于以下方式完成。至于模板列，通过visual studio很容易创建命令列，然后转换成模板列，所以实际上可以有删除链接按钮（或按钮）的ID，通过e.Row.FindControl找到如上所示。

<asp:GridView ID="GridView1" runat="server" OnRowCommand="GridView1_RowCommand"
    OnRowDataBound="GridView1_RowDataBound" AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="Key" HeaderText="Product" />
        <asp:BoundField DataField="Value" HeaderText="$$$" />
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:LinkButton ID="lnkDelete" runat="server" CausesValidation="False" 
                    CommandName="Delete" Text="Remove"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

【讨论】：

我想为 GridView 的一列实现此功能（此列是 ButtonField，我为它设置了一个图像），当用户单击它时，我从数据库中删除选定的行并想要警告删除前的用户。我可以用这个方法吗？
是的，你可以使用它。将会发生的是，如果用户单击“确定”，表单只会提交（意思是，在服务器端代码中调用您的删除操作）。如果用户点击取消，它会（意外地）取消操作并且不会向方法提交请求。
我为特定单元格设置了Attributes.Add("onclick", "return confirm('Are you sure?')"); ，当我点击该单元格时显示消息，但Ok 和“取消”之间没有区别（点击两个按钮触发事件）

【解决方案2】：

<asp:Button ID="Button1" runat="server" Text="Button"
 OnClientClick="return confirm('Are you sure you want delete this?');" />

【讨论】：

【解决方案3】：

你可以使用 jQuery 来做到这一点！

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Modal confirmation</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>

    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
        <script>
    $(function() {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete all items": function() {
                  alert('deleted');
                  $( this ).dialog( "close" );
                },
                Cancel: function() {
                  alert('cancel')
                    $( this ).dialog( "close" );
                }
            }
        });
    });
    </script>
</head>
<body>

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>


</body>
</html>

参考： http://jqueryui.com/dialog/#modal-confirmation

【讨论】：