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

时间:2009-06-26 14:03:38

标签: asp.net javascript button submit confirm

我有一个标准的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。任何想法如何使这项工作?

谢谢,

克雷格

10 个答案:

答案 0 :(得分:1)

看看这个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());
}

刚刚添加了验证检查:)

答案 1 :(得分: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 :(得分:1)

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

javascript行应为:

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

而不是:

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

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

答案 3 :(得分:1)

您可以使用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;”。

答案 4 :(得分:0)

Javascript:

deleteButton.disabled = true;

C#:

deleteButton.Enabled = false;

答案 5 :(得分:0)

您应该在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 ...
}

答案 6 :(得分:0)

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

答案 7 :(得分:0)

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

无论如何,请尝试&lt;%@ Page EnableEventValidation =“false”%&gt;在您的ASPX页面上查看它是否有效(默认情况下设置为true)。我不记得这个属性的细节有效但这个功能确保只在合法的情况下才会触发服务器端事件。例如。假设你的页面有XSS漏洞,黑客注入JavaScript来调用删除按钮。此属性有助于防止这些攻击。

答案 8 :(得分:0)

$(":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;
    }
});

答案 9 :(得分:0)

我决定使这个JS函数可以从任何按钮调用。

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

<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)" />