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

公司網(wǎng)絡(luò)比平常慢了不少，在點擊保存按鈕提交頁面后需等待挺長的一段時間，忍不住手賤點多了幾次，當提交完成后發(fā)現(xiàn)數(shù)據(jù)庫語句執(zhí)行異常。

?

兩種驗證方式：

第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, ""));

//若使用了 ASP.NET驗證控件 則要保證客戶端驗證函數(shù) Page_ClientValidate() 的執(zhí)行，代碼如下

//Page_ClientValidate() 函數(shù)用于在包含微軟驗證控件的aspx頁面中（客戶端js腳本），根據(jù)用戶輸入操作是否合法,返回True或者False

btnSumbit.Attributes.Add("onclick", "if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};this.disabled=true;" +this.ClientScript.GetPostBackEventReference(btnSumbit, ""));

?

提交按鈕 btnSumbit 對應(yīng)的客戶端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, "")的作用就是在客戶端頁面生成調(diào)用 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">

//<![CDATA[

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.NET驗證控件 則要保證客戶端驗證函數(shù) Page_ClientValidate() 的執(zhí)行，代碼如下

//Page_ClientValidate() 函數(shù)用于在包含微軟驗證控件的aspx頁面中（客戶端js腳本），根據(jù)用戶輸入操作是否合法,返回True或者False

<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 對應(yīng)的客戶端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 服務(wù)器控件除了<asp:Button/>和<asp:ImageButton/> 其它的所有可回發(fā)控件都是通過?__doPostBack 方法觸發(fā)頁面的 PostBack 提交）

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

除了上面兩種方法，自己還摸索出了一個簡單可用方法，也可防止多次點擊重復(fù)提交：

定義一個 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.NET驗證控件 則要保證客戶端驗證函數(shù) Page_ClientValidate() 的執(zhí)行，代碼如下

//Page_ClientValidate() 函數(shù)用于在包含微軟驗證控件的aspx頁面中（客戶端js腳本），根據(jù)用戶輸入操作是否合法,返回True或者False

<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 里面，在異步回發(fā)之后（頁面局部刷新之后）必須將 IsClick 的值重置為 false，可用如下方法：

?

$(document).ready(function () {
? ? ? ? ?//endRequest 事件 ：在異步回發(fā)完成，并且控制權(quán)返回到瀏覽器之后引發(fā)
? ? ? ? ?Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
? });
?//updatepanel 異步回發(fā)局部刷新后處理函數(shù)
?function EndRequestHandler(sender, args) {
? ? ? ? ? ? IsClick = false;
?}

）

轉(zhuǎn)載于:https://www.cnblogs.com/zyh-C/p/9561306.html

總結(jié)

以上是生活随笔為你收集整理的【ASP.NET】 【防止连续多次点击提交按钮 导致页面重复提交】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。