【ASP.NET】 【防止连续多次点击提交按钮 导致页面重复提交】

最近做项目遇到了这样的情况：

公司网络比平常慢了不少，在点击保存按钮提交页面后需等待挺长的一段时间，忍不住手贱点多了几次，当提交完成后发现数据库语句执行异常。

两种验证方式：

第1种：

aspx页面按钮：

<asp:Button ID="btnSumbit" runat="server" Text="提交" onclick="btnSumbit_Click" />

Page_Load 事件：

1.  
   btnSumbit.Attributes.Add("onclick", "this.disabled=true;" +this.ClientScript.GetPostBackEventReference(btnSumbit, ""));
2.  
   //若使用了 ASP.NET验证控件 则要保证客户端验证函数 Page_ClientValidate() 的执行，代码如下
3.  
   //Page_ClientValidate() 函数用于在包含微软验证控件的aspx页面中（客户端js脚本），根据用户输入操作是否合法,返回True或者False
4.  
   btnSumbit.Attributes.Add("onclick", "if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};this.disabled=true;" +this.ClientScript.GetPostBackEventReference(btnSumbit, ""));

提交按钮 btnSumbit 对应的客户端Html代码如下：

1.  
   <input type="submit" name="btnSumbit" value="提交" onclick="this.disabled=true;__doPostBack('btnSumbit','');" />
2.  
   或
3.  
   <input type="submit" name="btnSumbit" value="提交" onclick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};this.disabled=true;__doPostBack('btnSumbit','');" />

解析：

this.ClientScript.GetPostBackEventReference(btnSumbit, "")的作用就是在客户端页面生成调用 js 方法 __doPostBack(eventTarget, eventArgument) 的脚本，提交表单

客户端js 方法__doPostBack(eventTarget, eventArgument)（ASP.NET页面Render时自动生成） 如下（深入理解__doPostBack）：

1.  
   <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
2.  
   <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
3.  
   <script type="text/javascript">
4.  
   //<![CDATA[
5.  
   var theForm = document.forms['form1'];
6.  
   if (!theForm) {
7.  
   theForm = document.form1;
8.  
   }
9.  
   function __doPostBack(eventTarget, eventArgument) {
10.  
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
11.  
    theForm.__EVENTTARGET.value = eventTarget;
12.  
    theForm.__EVENTARGUMENT.value = eventArgument;
13.  
    theForm.submit();
14.  
    }
15.  
    }
16.  
    //]]>
17.  
    </script>

第2种：

aspx页面按钮：

1.  
   <asp:Button ID="btnSumbit" runat="server" Text="提交" UseSubmitBehavior="false" OnClientClick="this.value='正在提交';this.disabled=true;" onclick="btnSumbit_Click" />
2.  
   //若使用了 ASP.NET验证控件 则要保证客户端验证函数 Page_ClientValidate() 的执行，代码如下
3.  
   //Page_ClientValidate() 函数用于在包含微软验证控件的aspx页面中（客户端js脚本），根据用户输入操作是否合法,返回True或者False
4.  
   <asp:Button ID="btnSumbit" runat="server" Text="提交" UseSubmitBehavior="false" OnClientClick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};this.value='正在提交';this.disabled=true;" onclick="btnSumbit_Click" />

后台不用为该Button添加什么代码

提交按钮 btnSumbit 对应的客户端Html代码如下：

1.  
   <span style="font-size:14px;color:#3366ff;"><input type="button" name="btnSumbit" value="提交" onclick="this.value='正在提交';this.disabled=true;__doPostBack('btnSumbit','');" />
2.  
   或
3.  
   <input type="button" name="btnSumbit" value="提交" onclick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};this.value='正在提交';this.disabled=true;__doPostBack('btnSumbit','');" /></span>

与方法①比较可知，提交按钮在客户端生成的Html代码几乎是一样的，虽然 type 不同，但都是使用客户端方法 __doPostBack('btnSumbit','') 提交表单

UserSubmitBehavior = true    按钮控件和（<asp:Button/>和<asp:ImageButton/>)使用浏览器的提交功能，默认值

UserSubmitBehavior = false   按钮控件（同上） ASP.NET 的 postback 提交机制，此时 ASP.NET 会添加一段客户端脚本来回传该表单，也就是 __doPostBack(eventTarget, eventArgument) 方法

（注意：ASP.NET 服务器控件除了<asp:Button/>和<asp:ImageButton/> 其它的所有可回发控件都是通过 __doPostBack 方法触发页面的 PostBack 提交）

=========================================================================================

除了上面两种方法，自己还摸索出了一个简单可用方法，也可防止多次点击重复提交：

定义一个 js 全局变量 var IsClick=false 是否已点击提交，true：已点击提交；false：未点击

1.  
   <asp:Button ID="btnSumbit" runat="server" Text="提交" OnClientClick="if (IsClick==false) { IsClick=true; return true;} else { return false;}" onclick="btnSumbit_Click" />
2.  
   //若使用了 ASP.NET验证控件 则要保证客户端验证函数 Page_ClientValidate() 的执行，代码如下
3.  
   //Page_ClientValidate() 函数用于在包含微软验证控件的aspx页面中（客户端js脚本），根据用户输入操作是否合法,返回True或者False
4.  
   <asp:Button ID="btnSumbit" runat="server" Text="提交" OnClientClick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};if (IsClick==false) { IsClick=true; return true;} else { return false;}" onclick="btnSumbit_Click" />

（注意：如果页面说用了UpdatePanel 且<asp:Button/> 包含在 UpdatePanel 里面，在异步回发之后（页面局部刷新之后）必须将 IsClick 的值重置为 false，可用如下方法：

$(document).ready(function () {
         //endRequest 事件 ：在异步回发完成，并且控制权返回到浏览器之后引发
         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
  });
 //updatepanel 异步回发局部刷新后处理函数
 function EndRequestHandler(sender, args) {
            IsClick = false;
 }

）