如何确认然后禁用 asp.net/javascript 中的按钮答案

【问题标题】：How can I confirm and then disable a button in asp.net/javascript如何确认然后禁用 asp.net/javascript 中的按钮
【发布时间】：2010-11-06 03:59:36
【问题描述】：

我有一个标准的 ASP.NET 2.0 网页，上面有一个删除按钮。我需要但不知道如何实现的是当用户按下删除按钮时，会弹出一个确认对话框，询问用户“你确定吗？”。如果用户说是，那么我想禁用删除按钮并执行将运行服务器端代码 deleteButton_Click 的回发。

这是标签：

<asp:Button ID="deleteButton" Text="Delete" OnClick="deleteButton_Click" runat="server" />

这是处理客户端点击的javascript（在jquery中）：

var deleteButton = $(input.eq(0));
deleteButton.click( function()
{
    var a = confirm( "Are you sure you want to delete this item?" );
    if ( a == false )
    {
        return false;
    }
    else
    {
        deleteButton.attr( "disabled", "disabled" );
        __doPostBack( deleteButton.attr( "id" ), "" );
    }
} );

确认对话框按预期工作，禁用也正常。该表单可以正常回发，但不会运行 deleteButton_Click 事件处理程序。页面上确实存在 __doPostBack javascript 代码。

我可以将 UseSubmitBehavior="false" 添加到 deleteButton 标记，但它会忽略确认对话框的答案。

所以也许我在这里对 ASP.NET 提出了太多要求。任何想法如何使这项工作？

谢谢，

克雷格

【问题讨论】：

标签： asp.net javascript button submit confirm

【解决方案1】：

btnSubmit.Attributes.Add("onclick", "if(confirm(\"Are you sure you want to delete this item?\" ){this.disabled=true;" + ClientScript.GetPostBackEventReference(btnSubmit, "").ToString() + "}else{return false;}");

【讨论】：

【解决方案2】：

看看这个 StackOverflow 问题，我发现它非常有用：

Disable button on form submission

添加确认逻辑......你应该被设置......

我特意为你写了一个扩展方法，我也写了:)

public static void ConfirmThenDisableButtonOnClick(this Button buttonControl, string confirmMessage, string clientFunction)
{
    StringBuilder sb = new StringBuilder();

    // If the page has ASP.NET validators on it, this code ensures the
    // page validates before continuing.
    if (buttonControl.CausesValidation && !String.IsNullOrEmpty(buttonControl.ValidationGroup))
    {
        sb.Append("if ( typeof( Page_ClientValidate ) == 'function' ) { ");
        sb.AppendFormat(@"if ( ! Page_ClientValidate('{0}') ) {{ return false; }} }} ", buttonControl.ValidationGroup);
    }

    //pop confirm, if confirm==true, disable button
    sb.AppendFormat("if(confirm('{0}\')){{this.disabled=true;", confirmMessage.Replace("\"","").Replace("'",""));

    // If a secondary JavaScript function has been provided, and if it can be found,
    // call it. Note the name of the JavaScript function to call should be passed without
    // parens.
    if (!String.IsNullOrEmpty(clientFunction))
    {
        sb.AppendFormat("if ( typeof( {0} ) == 'function' ) {{ {0}() }};", clientFunction);
    }

    // GetPostBackEventReference() obtains a reference to a client-side script function 
    // that causes the server to post back to the page (ie this causes the server-side part 
    // of the "click" to be performed).
    sb.Append(buttonControl.Page.ClientScript.GetPostBackEventReference(buttonControl, ""));

    // if confirm==false do nothing
    sb.Append(";}else{return false;}");

    // Add the JavaScript created a code to be executed when the button is clicked.
    buttonControl.Attributes.Add("onclick", sb.ToString());
}

刚刚也添加了验证检查 :)

【讨论】：

谢谢你，但我看过那个帖子。但是它没有解决确认对话框问题。
你可以将 JavaScript 缩减为一行：return confirm('Are you sure?');
仍然像我的一样，因为我考虑了验证，如果我在需要这个的页面上有超过 2-3 个按钮，我会说 jQuery 解决方案会更合适（如果它考虑到帐户验证）。

【解决方案3】：

感谢您的反馈，但这是一个相当简单的解决方案。

javascript 行应该是：

__doPostBack( deleteButton.attr( "name" ), "" );

代替：

__doPostBack( deleteButton.attr( "id" ), "" );

我没有意识到“名称”属性是 doPostBack 方法正在寻找的属性。

【讨论】：

【解决方案4】：

您可以使用 OnClientClick 来完成同样的事情，而不是通过 javascript 进行回发。

<asp:Button OnClientClick="if (confirm('Are you sure?')) {this.disabled = true;} else {return false;}" />

或者，如果您想通过 javascript 执行更多操作而不是简单地禁用按钮，您可以这样说：

<asp:Button OnClientClick="return DisableOnConfirm();" />

您只需要确保以 return 语句的形式对其进行措辞，这样当您不希望 ASP 函数运行时，该语句最终会显示“return false;”。

【讨论】：

欢迎来到 Stack Overflow，我们感谢您的贡献。请解释发生了什么，以便未来的访问者和操作人员能够真正了解您提交的内容。
好的，我试着解释得更好一点。让确认对话框正确地与 ASP 一起工作在过去让我感到困惑，所以我希望这可以帮助人们。

【解决方案5】：

Javascript：

deleteButton.disabled = true;

C#：

deleteButton.Enabled = false;

【讨论】：

【解决方案6】：

您可能应该在 deleteButton_Click 事件中禁用服务器端的按钮（因为您将执行回发，因此您需要重新创建页面）。

<asp:Button ID="deleteButton" Text="Delete" OnClick="deleteButton_Click" runat="server" OnClientClick="javascript:return confirm('are you sure blah blah blah ...')" />

在代码隐藏中：

private void deleteButton_Click(object sender, EventArgs e) {
    deleteButton.Enabled = false;
    // and the rest of event handling ...
}

【讨论】：

如果您删除了某些内容，我认为您不会使用该数据重新渲染页面...不确定我是否需要禁用服务器端...

【解决方案7】：

点击事件没有触发有点奇怪。我猜这是由于按钮被禁用，但通常只有在服务器上禁用按钮时才会发生这种情况，而不仅仅是客户端。虽然不是 Page_Load 函数中的理想解决方案，但您可以检查回发和/或异步回发并确定回发的目标（在本例中是您的按钮），然后从那里调用一些方法。您还可以使用 __doPostBack() 函数传入参数。

【讨论】：

【解决方案8】：

最初，我不确定您是在谈论客户端点击事件还是服务器端点击事件。我认为您应该明确声明服务器端点击事件未触发。

无论如何，在您的 ASPX 页面上尝试看看它是否有效（默认设置为 true）。我不记得这个属性的细节是有效的，但是这个特性确保服务器端事件只在合法的情况下被触发。例如。假设您的页面存在 XSS 漏洞，并且黑客注入了 JavaScript 来调用删除按钮。此属性有助于防止这些攻击。

【讨论】：

【解决方案9】：

$(":submit").click(function ()
{
    $(this).attr("disabled", true); // disable input

    if (confirm("Press OK to submit"))
    {
        __doPostBack(this.id, ""); // if user presses OK; submit
    }
    else
    {
        // If user presses cancel; enable input and stop submit
        $(this).attr("disabled", false);

        return false;
    }
});

【讨论】：

【解决方案10】：

我决定把它做成一个可以从任何按钮调用的 JS 函数。

这是一个可行的示例，但是，我会将 JavaScript 移动到其他位置，例如现有的 .js 文件或 head 标记。

<script>
    function confirmPostback(button) {
        if (confirm('Are you sure?')) {
            button.disabled = true;
            __doPostBack(button.name, '')
            return true;
        } else {
            return false;
        }
    }
</script>

<asp:Button ID="TestPostback" runat="server" Text="Test Postback"
        UseSubmitBehavior="false" OnClientClick="return confirmPostback(this)" />

【讨论】：