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

问题描述 投票:44回答:15

我有一个旧的ASP.NET Web表单应用程序(.NET 2.0),当单击一个按钮时,该过程需要30秒钟左右的时间才能运行。我需要防止两次单击该按钮。这样可以防止两次发布,从而导致数据库中的数据重复。

我尝试添加;

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

尝试禁用JavaScript中的按钮。但是,尽管该按钮被禁用,但是该按钮的回发不起作用。

禁用按钮以防止多次提交是此应用程序的理想选择。我该怎么办?

编辑

我无法使用第三方控件。

asp.net webforms
15个回答
22
投票

您必须在OnClientClick之后返回true:

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

如果要继续进行回发,客户端上的任何单击都必须返回true,这是在按下按钮时提供客户端验证的一种方法。


0
投票

搜索了一会儿之后,我想出了这个解决方案。


0
投票

从aspx.cs文件中,您可以添加脚本来解决此问题(这是唯一适用于我的解决方案,由wexxix提供)

<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>

0
投票

您还可以通过创建具有相同样式的客户端按钮,隐藏“原始”服务器端按钮并使用javascript禁用HTML按钮/调用原始按钮来单击来“破解”。

在下一次回发中,它将自动还原您在客户端按钮上的更改:)。


0
投票

您也可以隐藏该按钮或对其进行更改以获取加载的gif,以保持反馈。>

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

0
投票

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

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

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


-3
投票

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

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

82
投票

如果仅禁用按钮,则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" />

请参阅@Dave Ward's post以获取UseSubmitBehavior的描述。>>

如果您有多个验证组,则需要为此增强此解决方案。



13
投票

上面提供的大多数解决方案都建议禁用,因为您不会收到PostBack,因此无法使用。这是我见过的最简单,最干净的工作解决方案:


9
投票

为了避开所有验证和验证组的问题,我发现使用__doPostBack事件最容易,就像这样


4
投票

我发现该链接对于解决此问题非常有用<script type = "text/javascript"> function DisableButton() { document.getElementById("<%=Button1.ClientID %>").disabled = true; } window.onbeforeunload = DisableButton; </script>


2
投票

我通常将此方法添加到我的BasePage中以供重用。


1
投票

优点


0
投票

您可以做的一件事是单击它之后将其隐藏在客户端并显示一些加载程序图像。

© www.soinside.com 2019 - 2024. All rights reserved.