防止重复提交仅提交一次的终极绝杀技

更新时间：2010年08月16日 23:27:21 作者：

防止重复提交，通用的思路，就是当用户点击提交按钮后，在浏览器中用JS将按钮disable掉，从而阻止用户继续点击该按钮，实现防止重复提交的目的。网上防止重复提交的文章已经不少了，为啥我还要写呢，显然我不是吃饱了撑的。。。

作者：Silent Void
出处：http://happyhippy.cnblogs.com/
最近一个客户，老抱怨每个月总有几条重复的业务数据；但创建该业务数据的页面，我们已经应用了常规的防重复提交技术，为啥还这样呢……
1. 常规防重复提交

复制代码代码如下:

<asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false" OnClientClick="this.disabled=true;this.form.submit();"/>

这里需要注意的是：
(1). UseSubmitBehavior="false" ：需要设置成false，这样生成了个的input的类型才是button；如果用默认的true，生成的input的类型为submit，postback到服务器端，将不会触发button的服务器端事件；
(2). Button不能有ValidationGroup属性，否则，postback到服务器端，将不会触发button的服务器端事件；

2. 当遇上Validator控件
如果页面上使用了Validator控件，继续使用上面1种的方法，我们会发现，Validator控件失效了。因为将button disable掉后，提交的时候将不再使用Validator控件进行校验。
针对此问题，一个解决方案，就是提交前手动校验一次。如果我们用IE Develop tool来跟踪提交的JS代码，我们会发现asp.net是在Page_ClientValidate函数中来完成Validator中设置的校验，所以下面手工调用一次该方法，如果校验失败，则不提交：

复制代码代码如下:

 
1: <script type="text/javascript"> 
function disableButton(button) 
{ 
if (typeof (Page_ClientValidate) == 'function' && Page_ClientValidate() == false) 
{ 
return false; 
} 
button.disabled = true; 
return true; 
} 
</script> 

<div> 
<asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1" 
ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator> 
<asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false" 
OnClientClick="disableButton(this);" OnClick="btnPostBack_Click"> 
</asp:Button> 
</div> 

说明：如果页面上有多个Validator控件，并且多个Button需要进行分组校验，则只需要设置Button的ValidationGroup即可。
上面的这个方法，貌似已经完美了；通常情况下，文章写到这里也该结束了，我们的系统也是这么使用的。但是……最近一个客户，老抱怨每个月总有几条重复的业务数据。。。
. 当用户的点击速度足够快……
根据客户的反馈信息，我们查了下那几条重复的业务数据，发现同样的记录偶尔会出现两次，并且DB中记录的创建时间完全相等(精确到毫秒)。然后也让用户的演示了一下她日常的操作方式，发现她点鼠标相当的快；虽然没有重现问题，但我们也大致知道问题的可能原因了：当用户点击的速度足够快，浏览器还没有来得及将button禁用掉，用户又点击了第二次……
为了重现问题，我们做了如下测试：

复制代码代码如下:

 
<script type="text/javascript"> 
function disableButton(button) //, validateGroup) 
{ 
if (typeof (Page_ClientValidate) == 'function' && Page_ClientValidate() == false) 
{ 
return false; 
} 
button.disabled = true; 
} 

function doubleClick() 
{ 
var button1 = document.getElementById('btnPostBack1'); 
button1.onclick(); 
button1.onclick(); //模拟重复点击2次 
} 
</script> 


<div> 
<asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1" 
ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator> 
<asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false" 
ValidationGroup="Group1" OnClientClick="disableButton(this);" OnClick="btnPostBack_Click"> 
</asp:Button> 
</div> 
<input type="button" onclick="doubleClick();" value="点击一次，模拟连续点击'按我1'两次" /> 

然后页面后台代码如下：

复制代码代码如下:

 
public static int i = 0; 
protected void btnPostBack_Click(object sender, EventArgs e) 
{ 
Response.Write(((Button)sender).Text + " " + (++i).ToString());//将累加结果输出 
} 

每次页面PostBack时，全局变量+1，如果连续PostBack两次，则得到的是+2的累计。测试的结果：除了偶尔+1，大部分情况都是累加2……看来，如果用户点击鼠标的速度足够快，前面2中的办法还是无法杜绝重复提交，咋办呢？？？

4. 终极绝杀技

处理思路就是，用数组记录用户的点击时间，如果点击时间小于某个时间间隔(下面演示的1秒，即1000毫秒)，则认为是重复提交，并取消当前点击事件，直接上代码了：

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<script type="text/javascript"> 
var date = new Array(); 
function disableButton(button, validateGroup) 
{ 
date.push(new Date()); 
if (date.length > 1 
&& (date[date.length - 1].getTime() - date[date.length - 2].getTime() < 1000))//小于1秒则认为重复提交 
{ 
event.cancelBubble = true; //测试时发现，如果直接单独设置cancelBubble、或者returnValue来取消事件，经常取消不了，依然存在重复提交的可能。因此只好用返回值来实现手工控制！ 
return false; 
} 
if (typeof (Page_ClientValidate) == 'function' 
&& ((validateGroup == undefined && Page_ClientValidate() == false) 
|| (validateGroup != undefined && Page_ClientValidate(validateGroup) == false))) 
{ //如果指定了ValidateGroup，则只验证改组；如果未指定，则验证全部验证控件 
return false; 
} 

button.disabled = true; 
return true; 
} 

function doubleClick() 
{ 
var button1 = document.getElementById('btnPostBack1'); 
button1.onclick(); 
button1.onclick(); 
} 
</script> 
</head> 
<body> 
<form id="form" runat="server"> 
<div> 
<asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1" 
ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator> 
<asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false" 
ValidationGroup="Group1" OnClientClick="if(!disableButton(this, 'Group1')) return false;" OnClick="btnPostBack_Click"> 
</asp:Button> 
</div> 
<div> 
<asp:TextBox runat="server" ID="tbxInput2"></asp:TextBox> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbxInput2" 
ValidationGroup="Group2" ErrorMessage="*"></asp:RequiredFieldValidator> 
<asp:Button runat="server" ID="btnPostBack2" Text="按我2" UseSubmitBehavior="false" 
OnClientClick="if(!disableButton(this)) return false;" OnClick="btnPostBack_Click"> 
</asp:Button> 
</div> 
<input type="button" onclick="doubleClick();" value="点击一次，模拟连续点击'按我1'两次" /> 
</form> 
</body> 
</html> 

说明：
(1). 测试时发现，如果直接单独设置cancelBubble、或者returnValue来取消事件，经常取消不了，依然存在高频率的重复提交。因此只好用返回值来实现手工控制；
(2). disableButton接收一个validateGroup参数，如果指定了ValidateGroup，则只验证改组；如果未指定，则验证全部验证控件。

您可能感兴趣的文章:

重复提交

如何将asp.net core程序部署到Linux服务器
这篇文章主要介绍了将asp.net core程序部署到Linux服务器上的详细过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
ASP.NET MVC 数据验证及相关内容
这篇文章主要介绍了ASP.NET MVC 数据验证及相关内容的相关资料,需要的朋友可以参考下
2014-10-10
Net Core Web Api项目与在NginX下发布的方法
这篇文章主要介绍了Net Core Web Api项目与在NginX下发布的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
ASP.NET页面传递值的方式介绍
面传值是学习asp.net初期都会面临的一个问题，总的来说有页面传值、存储对象传值、ajax、类、model、表单等。但是一般来说，常用的较简单有QueryString，Session，Cookies，Application，Server.Transfer。
2012-12-12
C#中的FileUpload 选择后的预览效果具体实现
选择后的预览效果实现的方法有很多，在本文为大家介绍下使用C#中的FileUpload是如何实现的，感兴趣的朋友不要错过
2013-12-12
asp.net利用cookie保存用户密码实现自动登录的方法
这篇文章主要介绍了asp.net利用cookie保存用户密码实现自动登录的方法,实例分析了asp.net针对cookie的创建、提取与销毁操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
ASP.NET Core集成Apollo(阿波罗)
这篇文章介绍了ASP.NET Core集成Apollo的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
.NET Core控制台应用程序如何使用异步（Async）Main方法详解
这篇文章主要给大家介绍了关于.NET Core控制台应用程序如何使用异步（Async）Main方法的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-07-07
ASP.NET编程简单实现生成静态页面的方法【附demo源码下载】
这篇文章主要介绍了ASP.NET编程简单实现生成静态页面的方法,较为详细的分析了asp.net生成静态页面的步骤与相关操作技巧,并附带相关实例源码供读者下载参考,需要的朋友可以参考下
2017-07-07
详解使用asp.net mvc部分视图渲染html
为了提升用户体验，一般我们采用ajax加载数据然后根据数据渲染html，渲染html可以使用前端渲染和服务器端渲染，有兴趣的可以了解一下
2017-07-07