設置按鈕不可用，避免重復提交
編寫人：CC阿爸
2015-1-29
今天在這里，我想與大家一起分享如何處理項目中經常出現用戶重復提交的情況，為了防止這種情況，最常用的方法就是在用戶點擊按鈕后將該按鈕設為不可用，筆者在實際開發當中遇到了多種不同的情況，在此做個小結，以供參考。有興趣的同學，可以一同探討與學習一下，否則就略過吧。
由于剛開始進行的web開發，很多時候使用的為html控件，因此處理起來相當簡單
如：先前開發的報銷系統，在提交單據審批時，時常會出現重復審批下一流程的bug。
aspx前臺<tdalign="left"colspan="7"><buttonclass="button"id="btnSubmit"onmouSEOver="this.style.backgroundColor='#ffffff'"onfocus="blur();"onclick="btnSubmit2_onclick();"onmouseout="this.style.backgroundColor='#eeeeee'"type="button"runat="server"></button></td>functionbtnSubmit2_onclick(){document.getElementById("btnSubmit").disabled=true;//使不可用}C#this.btnSubmit.ServerClick+=newSystem.EventHandler(this.btnSubmit_ServerClick);今天在開發另一個項目中，用到的是webcontrol ，本想也使得這種方式來處理，
<asp:ButtonID="btnSubmit"runat="server"OnClientClick="btnSubmit2_onclick();"OnClick="btnSubmit_Click"></asp:Button>
但發現在客戶端利用js處理為不可用后，按鈕是為不可用狀態，但按鈕事件不會執行了。這是什么問題?
碰到問題，當然要搞清楚原因。經過在網上查詢資料發現原來是：
按鈕的服務端事件其實是.net框架利用按鈕的客戶端事件onclick來實現的，所以你在服務端重置onclick屬性，會覆蓋框架處理服務端事件的過程。 上面已經提供了客戶端腳本，你在button上加btnSubmit2_onclick()就可以，
注意只可用HtmlInputButton控件來實現，不可用WebControls的Button。
以下是其它網友總結的文章，寫得很全面，現摘抄下來供大家參考，我本次也是采用了第二種方法解決了我碰到的問題。
歡迎加入技術分享群
（轉）原文地址如下：
http://blog.itpub.net/28699126/viewspace-775581/
第一種情況是非submit類型的按鈕 這種情況比較簡單，只要在客戶端添加事件，將按鈕設為不可用就可以了?？聪旅娴拇a： asp.net-Code:<form.id="form1"runat="server"><asp:LabelID="lbl"runat="server"></asp:Label><asp:ButtonID="btn"runat="server"Text="Test"nClick="btn_Click"nClientClick="this.disabled=true"UseSubmitBehavior="false"/></form>C#-Code:PRotectedvoidbtn_Click(objectsender,EventArgse){System.Threading.Thread.Sleep(1000);lbl.Text=DateTime.Now.ToString();}第二種情況是submit類型的按鈕
此時第一種方法就不行了，按鈕被設為DISABLED之后就無法完成提交，我們可以適當修改代碼：ASP.NET-Code:
<form.id="form1"runat="server"><asp:LabelID="lbl"runat="server"></asp:Label><asp:ButtonID="btn"runat="server"Text="Test"nClick="btn_Click"/></form>C#-Code:protectedvoidPage_Load(objectsender,EventArgse){if(!Page.IsPostBack){btn.OnClientClick="this.disabled=true;"+GetPostBackEventReference(btn);}}與第一種方法不同的是我們在Page_Load中給按鈕添加客戶端事件，并附加了GetPostBackEventReference。但這樣做還有個缺 陷，在第一提交回發完成以后，再點擊按鈕就會失敗，因此我們需要去掉if (!Page.IsPostBack)這句，也就是每次回發都要重復綁定客戶端事件。
第三種情況跟第一種類似，只是多了個UpdatePanel ASP.NET-Code:<asp:UpdatePanelID="up1"runat="server"><ContentTemplate><asp:LabelID="lbl"runat="server"></asp:Label><asp:ButtonID="btn"runat="server"Text="Test"nClick="btn_Click"nClientClick="this.disabled=true;"UseSubmitBehavior="false"/></ContentTemplate></asp:UpdatePanel>第四種情況也是在UpdatePanel里面，不過和第二種情況一樣，也是Submit類型的按鈕 和第二種情況不同的是，我們只需要在第一次加載的時候綁定客戶端事件就可以了，即在 if (!Page.IsPostBack){}中綁定事件。 第五種和第四種不同的是，按鈕在UpdatePanel外面，通過觸發器來刷新指定的UpdatePanel 如果按第四種的方法，可以在點擊按鈕后設為不可用，但回發完成以后該按鈕不會恢復可用狀態：ASP.NET-Code:
<asp:UpdatePanelID="up1"runat="server"><ContentTemplate><asp:LabelID="lbl"runat="server"></asp:Label></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="btn"EventName="Click"/></Triggers></asp:UpdatePanel><asp:ButtonID="btn"runat="server"Text="Test"nClick="btn_Click"/>C#-Code:protectedvoidPage_Load(objectsender,EventArgse){if(!Page.IsPostBack){btn.OnClientClick="this.disabled=true;"+GetPostBackEventReference(btn);}}protectedvoidbtn_Click(objectsender,EventArgse){System.Threading.Thread.Sleep(1000);lbl.Text=DateTime.Now.ToString();}為了解決這個問題，最簡單的方法就是將該按鈕放在另一個UpdatePanel里面，這樣每次都可以恢復原狀態了。另外還可以根據Atlas的頁面周期，在提交完成以后顯式將該按鈕設為可用。
注：在Asp.Net中所有默認的按鈕都是Submit類型，如果要是有button類型則，需要設置UseSubmitBehavior="false"；
Submit是專門用于提交表單的Button，與Button的區別主要有兩點： type=button 就單純是按鈕功能 type=submit 是發送表單 (1)Submit將表單提交(form.submit())作為其onclick后的默認事件，Button并非如此 (2)表單提交時，所有具有name屬性的html輸入元素(包括input標簽、button標簽、select標簽等)都將作為鍵值對提交，除了Submit對象。Submit對象只有在自己被單擊后的提交中才會作為鍵值對被提交。 但是對于從事WEB UI的人應該要注意到，使用submit來提高頁面易用性： 使用submit后，頁面支持鍵盤enter鍵操作，而很多WEB軟件設計師，可能沒有注意到submit統一. 用button后往往頁面不支持enter鍵了。所以需要支持enter鍵，必須要設置個submit，默認enter鍵對頁面第一個submit進行操作。 執行完onClick，轉到action。可以自動提交不需要onClick。所以說onclick這里可以不要。 執行完onClick，跳轉文件在 js文件里控制。提交需要onClick。 比如： onclick="form1.action='a.jsp';form1.submit();" 這樣就實現了submit的功能了。 講白一些，就是submit會有一個跳轉，頁面會刷新；而button不會刷新，就是一個button；可以用<button type="submit/button/reset"></button>來生成按鈕，更加靈活，樣式更好控制。(如果客戶端禁用JS，則使用Submit時，前臺驗證就會失效，后臺就可能獲取到非法的數據)
新聞熱點
疑難解答
