如何防止用户点击两次button？
我有一个旧的ASP.NET Web窗体应用程序（.NET 2.0），有一个过程，需要30秒左右，当button被点击时运行。 我需要防止button被点击两次。 这将防止发布两次，这会导致数据库中的重复数据。
我尝试添加
OnClientClick="this.disabled='true';" 尝试禁用JavaScript中的button。 但是，虽然该button被禁用，但button的回发不起作用。
禁用button以防止多次提交是此应用程序的理想select。 我该怎么做？
编辑
我无法使用第三方控件。
您必须在OnClientClick之后返回true：
OnClientClick="this.disabled='true';return true;"
如果回发要继续，客户端的任何点击都必须返回true，这是在button按下时提供客户端validation的一种方法。
如果你只是简单地禁用button，ASP.NET将不会发布表单。 你也想处理客户端validation。 这是我的解决scheme：
<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的post ，了解UseSubmitBehavior的描述。
如果您有多个validation组，则需要为此增强此解决scheme。
您还需要将Button的UseSubmitBehavior属性设置为false 。
Web浏览器不在表单的POST数据中包含禁用的元素，即使元素碰巧是首先触发表单提交的button。 不幸的是，ASP.NET WebForms的单页面devise依赖于这一点信息来知道哪个控件引发了PostBack和要执行的事件处理程序（即Button1.On_Click）。
切换到UseSubmitBehavior="false"在客户端onclick处理程序中注入__doPostBack('Button1', '')来解决该问题。 然后，即使禁用button， __doPostBack参数也可让ASP.NET知道哪个控件引发了PostBack以及在服务器端触发哪些事件。
为了规避所有的validation和validation组问题，我发现使用window.onbeforeunload事件最简单，像这样
<script type = "text/javascript"> function DisableButton() { document.getElementById("<%=Button1.ClientID %>").disabled = true; } window.onbeforeunload = DisableButton; </script>
上述脚本一旦页面准备好执行PostBack（包括validation或提交ASP.Net表单），就会禁用ASP.Netbutton。
单击后禁用ASP.Netbutton以防止双击
您可以使用PostBack利他林控制。 PostBack Ritalin是一个ASP.NET AJAX服务器控件，用于帮助简化在部分回发期间禁用button的常见任务。
上面提供的大多数提示禁用的解决scheme都不行，因为你不会得到回发。 这是我见过的最简单，最干净的工作解决scheme：
OnClientClick="if(this.value === 'Saving...') { return false; } else { this.value = 'Saving...'; }"
我通常将此方法添加到我的BasePage以供重用。
这个代码也处理validation
/// <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)); }
我发现链接非常有用，解决了这个问题点击后禁用ASP.Netbutton，防止双击
我希望可以帮助:)
优点
- 为所有button开箱即用
- 即使button没有触发提交将被禁用。
- LinkButtons也将被禁用。
- 与UpdatePanels（即部分和asynchronous回发）
- 作品全面回发
- validation可防止回发时不会禁用button
- 按下button，input按键和AutoPostBack事件将导致button被禁用
限制
†我见过的大多数其他解决scheme都具有相同的局限性
- 依靠jQuery
- †只适用于ASP表单
- †如果用户在提交后点击浏览器的取消button，用户将不能再次提交，可能会感到困惑。
- †还有其他用户可以发起回传的方式：
- 使用input键提交
- 自动回复事件
码
只需在closures的</body>标记之前将此代码段放在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>
你可以做的一件事是在点击它后将其隐藏在客户端并显示一些装载器图像。
或者，如果它的forms或东西，你可以添加recaptcha
经过一段时间，我想出了这个解决scheme。
$('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解决scheme的问题是，回车键停止不提交使用很多的表单。 我假设有相当比例的用户尝试input而不是点击。
您也可以隐藏button或将其更改为加载gif以保持反馈
$(document).on('submit','form',function (e) { $("input.SubmitButton").hide(); // or change if to an loading gif image. return true; });
从一个aspx.cs文件，你可以添加脚本来解决这个问题（这是唯一的解决scheme为我工作，由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＃代码。 谢谢
这是一个快速的解决scheme。 单击它时将宽度设置为0。 它仍然会提交，但他们将无法再次点击它。 如果您想在场景中再次显示validation错误，则可以在服务器端单击事件中将“宽度”设置为原始值。
OnClientClick="this.width=0;"
