我有一个旧的 ASP.NET Web 表单应用程序 (.NET 2.0)，当单击按钮时，它的运行过程需要 30 秒左右。我需要防止按钮被点击两次。这将防止发布两次，这会导致数据库中的重复数据。
我尝试添加；
OnClientClick="this.disabled='true';"
尝试禁用 JavaScript 中的按钮。但是，虽然按钮被禁用，但按钮的回发也不起作用。
禁用按钮以防止多次提交是此应用程序的理想选择。我该怎么做？
我无法使用第三方控件。
【问题讨论】：
必须在 OnClientClick 之后返回 true：
OnClientClick="this.disabled='true';return true;"
如果要继续回发，客户端中的任何点击都必须返回 true，这是一种在按钮按下时提供客户端验证的方法。
【讨论】：
您可以做的一件事是单击它后将其隐藏在客户端并显示一些加载器图像。
或者如果它是一个表格或其他东西，你可以添加recaptcha
【讨论】：
您还需要set the Button's UseSubmitBehavior property to false。
Web 浏览器不会在表单的 POST 数据中包含禁用的元素，即使该元素恰好是最初触发表单提交的按钮。不幸的是，ASP.NET WebForms 的单表单页面设计依赖于这些信息来了解哪个控件引发了 PostBack 以及要执行哪个事件处理程序（即 Button1.On_Click）。
切换到 UseSubmitBehavior="false" 会在客户端 onclick 处理程序中注入 __doPostBack('Button1', '') 以解决该问题。然后，即使您禁用 Button，__doPostBack 参数也会让 ASP.NET 知道哪个控件引发了 PostBack 以及在服务器端触发哪些事件。
【讨论】：
如果您只是禁用该按钮，那么 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's post。
如果您有多个验证组，则需要为此增强此解决方案。
【讨论】：
if (!Page_ClientValidate()){ return false; } 为我修复了您的解决方案。 .net 4.5.2 默认网络表单应用程序。
OnClientClick 中使用 javascript 函数 将不起作用？
这是一个快速的解决方案。当他们点击它时，将宽度设置为 0。它仍然会提交，但他们将无法再次单击它。如果您想在出现验证错误的情况下再次显示它，则可以在服务器端单击事件中将 Width 设置回原来的值。
OnClientClick="this.width=0;"
【讨论】：
搜索了一段时间后，我想出了这个解决方案。
$('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 键停止不提交使用很多的表单。我假设相当一部分用户尝试输入而不是点击。
【讨论】：
我通常将此方法添加到我的 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));
}
【讨论】：
我发现这个链接对解决这个问题非常有用 Disable ASP.Net button after click to prevent double clicking
希望能帮到你:)
【讨论】：
† 我见过的大多数其他解决方案都有同样的限制
只需将此 sn-p 放在 HTML 代码底部的 </body> 结束标记之前。
<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>
【讨论】：
为了规避所有验证和验证组问题，我发现使用window.onbeforeunload 事件最简单，就像这样
<script type = "text/javascript">
function DisableButton() {
document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>
一旦页面准备好执行包括验证在内的回发或提交 ASP.Net 表单，上述脚本就会禁用 ASP.Net 按钮。
Disable ASP.Net button after click to prevent double clicking
【讨论】：
您还可以隐藏按钮或将其更改为加载 gif 以保持反馈
$(document).on('submit','form',function (e) {
$("input.SubmitButton").hide();
// or change if to an loading gif image.
return true;
});
【讨论】：
上面提供的大多数建议禁用的解决方案都不起作用，因为您不会收到 PostBack。这是我见过的最简单、最干净的解决方案：
OnClientClick="if(this.value === 'Saving...') { return false; } else { this.value = 'Saving...'; }"
【讨论】：
从 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();
}
【讨论】：
在表单的 Page_Load 事件中输入这一行：
btnSubmit.Attributes.Add("onclick", " this.disabled = true; " + ClientScript.GetPostBackEventReference(btnSubmit, null) + ";");
【讨论】：