2011年11月21日 星期一

設定 UseSubmitBehaviot 來防止按鈕重複送出&重複點擊方法

UseSubmitBehaviot 屬性是控制Button於HTML輸出時Type是否為submit或Button屬性
在ASP.NET的Button控制項中預設是會去執行postback,也就是會在submit時會自動去執行__doPostBack 函式
而如果在Button設定UseSubmitBehaviot=false時,Button必須在onClick事件中自行去呼叫__doPostBack 函式

於HTML原始碼下如以下:
UseSubmitBehavior=true
<input type="submit" name="Button1" value="Button" id="Button1" />
UseSubmitBehavior=false
<input type="button" name="Button2" value="Button" onclick="javascript:__doPostBack(&#39;Button2&#39;,&#39;&#39;)" id="Button2" />

可以發現usesubmitbehavior=false時是執行onclick呼叫__doPostBack函式
而當使用usesubmitbehavior=false時,可使用GetPostBackEventReference方法加入一段JavaScript程式碼返回Client端執行
例如加入confirm 彈出視窗來讓使用者確認跟現在要使用防止使用者重複點擊送出按鈕方法
以下程式碼為加入防止使用者重複點擊送出按鈕的方法:
Step 1:
於 .aspx 頁面中加入Button 並設定useSubmitBehaviot=false,和一個Label
Step 2:
於 Code Behind 中加入以下程式碼,在Page_Load時為Button1附加onclick事件並使用GetPostBackEventReference方法來註冊JavaScript程式碼
在JavaScript程式碼中將 Button 做 disable 並更改文字為"儲存中"
Step 3:
於 Code Behind 的 Button Click事件中讓程式Sleep 2秒後開始執行程式碼
Step 4:
完成以上步驟後,實際去執行aspx網頁並點擊Button則會發現此時Button變成暗色無法點選,如此就可以防止使用者重複點擊送出情形



原始文章出自於此

沒有留言:

張貼留言