【ASP.NET】 【防止連續多次點擊提交按鈕 導致頁面重複提交】

標籤：局部重新整理   reference   else   nbsp   name   項目   cli   ble   ===   

最近做項目遇到了這樣的情況：

公司網路比平常慢了不少，在點擊儲存按鈕提交頁面後需等待挺長的一段時間，忍不住手賤點多了幾次，當提交完成後探索資料庫語句執行異常。

 

兩種驗證方式：

第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;
 }

）

【ASP.NET】 【防止連續多次點擊提交按鈕 導致頁面重複提交】