生活随笔
收集整理的這篇文章主要介紹了
【ASP.NET】 【防止连续多次点击提交按钮 导致页面重复提交】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近做項目遇到了這樣的情況：
公司網絡比平常慢了不少，在點擊保存按鈕提交頁面后需等待挺長的一段時間，忍不住手賤點多了幾次，當提交完成后發現數據庫語句執行異常。
?
兩種驗證方式：
第1種：
aspx頁面按鈕：
?
<asp:Button ID=
"btnSumbit" runat="server" Text="提交" onclick="btnSumbit_Click" /> ?
Page_Load 事件：
?
btnSumbit.Attributes.Add("onclick", "this.disabled=true;" +this.ClientScript.GetPostBackEventReference(btnSumbit, "")); btnSumbit.Attributes.Add("onclick", "if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};this.disabled=true;" +this.ClientScript.GetPostBackEventReference(btnSumbit, "")); ?
提交按鈕 btnSumbit 對應的客戶端Html代碼如下：
<input type="submit" name="btnSumbit" value="提交" οnclick="this.disabled=true;__doPostBack('btnSumbit','');" /> 或 <input type="submit" name="btnSumbit" value="提交" οnclick="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）：
?
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <script type="text/javascript"> var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } </script> ?
第2種：
?
aspx頁面按鈕：
<asp:Button ID="btnSumbit" runat="server" Text="提交" UseSubmitBehavior="false" OnClientClick="this.value='正在提交';this.disabled=true;" οnclick="btnSumbit_Click" /> <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;" οnclick="btnSumbit_Click" /> ?
?
后臺不用為該Button添加什么代碼
提交按鈕 btnSumbit 對應的客戶端Html代碼如下：
<span style="font-size:14px;color:#3366ff;"><input type="button" name="btnSumbit" value="提交" οnclick="this.value='正在提交';this.disabled=true;__doPostBack('btnSumbit','');" /> 或 <input type="button" name="btnSumbit" value="提交" οnclick="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：未點擊
?
<asp:Button ID="btnSumbit" runat="server" Text="提交" OnClientClick="if (IsClick==false) { IsClick=true; return true;} else { return false;}" οnclick="btnSumbit_Click" /> <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;}" οnclick="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;
?}
）
轉載于:https://www.cnblogs.com/zyh-C/p/9561306.html
總結
以上是生活随笔為你收集整理的【ASP.NET】 【防止连续多次点击提交按钮 导致页面重复提交】的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
