如何防止用户两次单击按钮？

问题描述

| 我有一个旧的ASP.NET Web表单应用程序（.NET 2.0），当单击一个按钮时，该过程需要30秒钟左右的时间才能运行。我需要防止两次单击该按钮。这将防止两次发布，从而导致数据库中的数据重复。我尝试添加；

OnClientClick=\"this.disabled=\'true\';\"

尝试禁用JavaScript中的按钮。但是，尽管该按钮被禁用，但该按钮的回发不起作用。禁用按钮以防止多次提交对于此应用程序是理想的选择。我怎样才能做到这一点？编辑我无法使用第三方控件。

解决方法

您必须在OnClientClick之后返回true：

OnClientClick=\"this.disabled=\'true\';return true;\"

如果要继续进行回发，客户端上的任何单击都必须返回true，这是在按钮按下时提供客户端验证的一种方法。 ,如果仅禁用按钮，则ASP.NET将不会发布该表单。您还想处理客户端验证。这是我的解决方案：

<asp:Button runat=\"server\" ID=\"btnSave\" 
   Text=\"Save\" OnClick=\"btnSave_Click\" 
   OnClientClick=\"if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = \'Saving...\';\" 
   UseSubmitBehavior=\"false\" />

有关UseSubmitBehavior的描述，请参见@Dave Ward的帖子。如果您有多个验证组，则需要为此增强此解决方案。 ,您还需要将Button \的UseSubmitBehavior属性设置为false。 Web浏览器在表单的POST数据中不包含禁用的元素，即使该元素恰好是触发表单提交的按钮。不幸的是，ASP.NET WebForms的单页页面设计依靠这些信息来知道哪个控件引发了PostBack和要执行哪个事件处理程序（即Button1.On_Click）。切换到ѭ5会在客户端onclick处理程序中注入ѭ6来解决该问题。然后，即使您禁用了Button，“ 7”参数也会让ASP.NET知道哪个控件引发了PostBack，以及哪个事件在服务器端触发。 ,上面提供的大多数建议禁用的解决方案都不会起作用，因为您不会收到PostBack。这是我见过的最简单，最干净的工作解决方案：

OnClientClick=\"if(this.value === \'Saving...\') { return false; } else { this.value = \'Saving...\'; }\"

,为了规避所有验证和验证组问题，我发现使用window.onbeforeunload事件最容易，就像这样

<script type = \"text/javascript\">
function DisableButton() {
    document.getElementById(\"<%=Button1.ClientID %>\").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>

一旦页面准备好进行包括验证的PostBack或提交了ASP.Net表单，以上脚本就会禁用ASP.Net按钮。单击后禁用ASP.Net按钮以防止双击 ,我发现该链接对于解决此问题非常有用单击后禁用ASP.Net按钮以防止双击我希望可以帮助:) ,我通常将此方法添加到我的BasePage中以进行重用。该代码也处理验证

/// <summary>
///  Avoid multiple submit
/// </summary>
/// <param name=\"button\">The button.</param>
/// <param name=\"text\">text displayed on button</param>
public void AvoidMultipleSubmit(Button button,string text=\"wait...\" )
{
    Page.ClientScript.RegisterOnSubmitStatement(GetType(),\"ServerForm\",\"if(this.submitted) return false; this.submitted = true;\");
    button.Attributes.Add(\"onclick\",string.Format(\"if(typeof(Page_ClientValidate)==\'function\' && !Page_ClientValidate()){{return true;}}this.value=\'{1}\';this.disabled=true;{0}\",ClientScript.GetPostBackEventReference(button,string.Empty),text));
}

,优点开箱即用，适用于所有按钮即使未触发提交的按钮也将被禁用。 LinkButtons也将被禁用。与UpdatePanels一起使用（即部分和异步回发）适用于完整的回发验证阻止回发时，不会禁用按钮按下按钮，按回车键和AutoPostBack事件将导致按钮被禁用局限性 †我见过的大多数其他解决方案都具有这些相同的局限性依靠jQuery †仅适用于ASP表单 †如果用户在提交后单击浏览器的“取消”按钮，则该用户将无法再次提交，并且可能会感到困惑。 †用户还有其他方式可以发起回发：使用回车键提交自动回传事件码只需将此代码段放在code12 the标记之前的HTML代码底部即可。

<script type=\"text/javascript\">
    jQuery(function ($) {

        /*
         * Prevent Double Submit
         * ---------------------
         * Disables submit buttons during form submission and asp async postbacks
         */

        // class name assigned to disabled :submit elements
        var disabledClass = \'asp-postback-disable\';

        // selector for buttons and other elements that may cause a postback
        var submittableSelector = [
            \'a[href^=\"javascript:__doPostBack\"]\',\':submit\'
        ].join(\",\");

        // returns false; used to prevent event bubbling
        function returnFalse() { return false; }

        // logs errors
        function error(ex) {
            if (typeof console === \'object\' && console.error != null) {
                console.error(\'Prevent Double Submit Error:\',ex);
            }
        }

        // disables :submit elements
        function disableSubmit() {
            try {
                $(submittableSelector,\'form\')
                    .addClass(disabledClass)
                    .on(\'click.asp-postback-disable\',returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // enables :submit elements
        function enableSubmit() {
            try {
                $(\'.asp-postback-disable,\' + submittableSelector,\'form\')
                    .removeClass(disabledClass)
                    .off(\'click.asp-postback-disable\',returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // Handle async postbacks
        if (typeof Sys === \'object\') {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function (s,e) { disableSubmit(); });
            prm.add_endRequest(function (s,e) { enableSubmit(); });
        }
        else {
            error(\'Sys is undefined.\');
        }

        // Handle navigation (eg,Full postback)
        $(window).bind(\'beforeunload\',function (e) {
            disableSubmit();
        });

    });
</script>

<style type=\"text/css\">
    .asp-postback-disable { opacity: 0.25; }
</style>

,您可以做的一件事是单击它，将其隐藏在客户端并显示一些加载程序图像。或者，如果是表格或其他内容，您可以添加Recaptcha ,经过一段时间的搜索，我想到了这个解决方案。

$(\'form\').submit(function () {
    $(\'input[type=submit][data-loading]\').addClass(\'disabled\');

    if ($(this).data(\'submitted\') == true) {
        $(\'input[type=submit][data-loading]\').attr(\'disabled\',\'disabled\');
        return false;
    }

    $(this).data(\'submitted\',true);
});

UseDefaultBehavior解决方案的问题在于，Enter键停止不提交经常使用的表单。我假设相当一部分用户尝试输入而不是单击。 ,您可以从aspx.cs文件中添加脚本来解决此问题（这是唯一为我工作的解决方案，由wexxix提供）

//Declaring the string to hold the script
string doubleClickScript = @\"<script type=\'text/javascript\'>
                                    function DisableButton() {
                                    document.getElementById(\'YOURBUTTONID\').disabled = true;
                                }
                                window.onbeforeunload = DisableButton;
                                </script>\";
//Injecting the script to the aspx page.        
ClientScript.RegisterStartupScript(this.GetType(),\"DoubleClickScript\",doubleClickScript);

显然，您可以仅将脚本添加到页面中，因为可以访问客户C＃代码，所以我只是这样使用。谢谢 ,您也可以通过创建具有相同样式的客户端按钮，隐藏“原始”服务器端按钮并使用javascript禁用HTML按钮/调用原始按钮来单击来“破解”。在下一个回发中，它将自动还原您对客户端按钮:)所做的更改。

<asp:Button ID=\"btnSubmitQuote\" class=\"btn btn-red btn-block\" runat=\"server\" Text=\"Submit Quote\" style=\"display:none;\" OnClick=\"btnSubmitQuote_Click\" UseSubmitBehavior=\"false\" />

<button id=\"btnSubmitQuoteClient\"  class=\"btn btn-red btn-block\" onclick =\"disableBtn(this);\">Submit Quote</button>
<script type=\"text/javascript\">
 function disableBtn(t) {
    t.setAttribute(\'disabled\',\'disabled\');
    var btn = document.getElementById(\'<%=btnSubmitQuote.ClientID %>\');
    btn.click();
  }

,您还可以隐藏按钮或将其更改为加载gif，以保持反馈

$(document).on(\'submit\',\'form\',function (e) {
    $(\"input.SubmitButton\").hide();
    // or change if to an loading gif image.
    return true;
});

,在表单的Page_Load事件中，输入以下行：

btnSubmit.Attributes.Add(\"onclick\",\" this.disabled = true; \" + ClientScript.GetPostBackEventReference(btnSubmit,null) + \";\");

资料来源：dotnetodyssey.com ,这是一个快速的解决方案。单击它们时将宽度设置为0。它将仍然提交，但是他们将无法再次单击它。如果要在存在验证错误的情况下再次显示它，则可以在服务器端单击事件中将“宽度”设置回其原始值。

OnClientClick=\"this.width=0;\"

两次两次单击按钮按钮用户用户防止

如何防止用户两次单击按钮？

问题描述

解决方法

相关问答