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

Question

我有一个旧的ASP.NET Web表单应用程序(.NET 2.0),其过程需要30秒左右才能在单击按钮时运行.我需要阻止按钮被点击两次.这将阻止发布两次,这会导致数据库中出现重复数据.

我尝试添加;

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

尝试在JavaScript中禁用该按钮.但是,虽然该按钮被禁用,但按钮的回发则不起作用.

禁用该按钮以防止多次提交是此应用程序的理想选择.我怎样才能做到这一点？

编辑

我无法使用第三方控件.

Answer 1

如果您只是禁用该按钮,那么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的帖子.

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

Answer 2

您必须在OnClientClick之后返回true:

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

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

Answer 3

您还需要将Button的UseSubmitBehavior属性设置为false.

Web浏览器不会在表单的POST数据中包含已禁用的元素,即使该元素恰好是首先触发表单提交的按钮.遗憾的是,ASP.NET WebForms的单表单页面设计依赖于该位信息来了解哪个控件引发了PostBack以及执行哪个事件处理程序(即Button1.On_Click).

切换到在客户端onclick处理程序中UseSubmitBehavior="false"注入a __doPostBack('Button1', '')来解决该问题.然后,即使您禁用Button,该__doPostBack参数也允许ASP.NET知道哪个控件引发了PostBack以及哪些事件在服务器端触发.

Answer 4

上面提供的大多数提示禁用的解决方案都不起作用,因为你不会得到PostBack.这是我见过的最简单,最干净的工作解决方案:

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

Answer 5

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

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

一旦页面准备好进行包括验证的PostBack或提交ASP.Net表单,上面的脚本就会禁用ASP.Net Button.

单击后禁用ASP.Net按钮以防止双击