close
做網頁系統最怕的就是使用者對於按鈕一次點兩下,特別是網頁慢的時候,使用者總是很不耐煩的重覆點,
然而ASP.NET的這個機制做的有點奇怪,所以我還是拿出來提一下
畫面設計
畫面設計就很簡單,兩個按鈕,一個Label
第一個按鈕預期按下後，會讓Label出現「按鈕送出」的文字
第二個則是清除Label
不過為了讓實驗更明顯，所以我故意在第一個按鈕上加入Sleep 3秒的效果
新手的我，曾以為在按鈕上加入disabled處理就可以了，所以在Page_Load上寫了以下code
| btnSend.OnClientClick = "this.disabled = true;"; |
當然,最後就是畫面鳥都不鳥我=.= 按鈕變灰色,卻不會postback
後來我思考了一下，覺得大概是兩者(ASP.NET與Javascript)有衝突吧，所以用了另一個方法解決，也就是假按鈕
錯誤示範2
在畫面增加一個假觸發的按鈕,然後該按鈕寫入Javascript做兩件事
1.觸發真的按鈕的Click
2.將假按鈕disabled
然後又將真的按鈕用CSS隱藏
| btnSend.Style["display"] = "none"; btnFake.OnClientClick = "document.getElementById('" + btnSend.ClientID + "').click();this.disabled = true;"; |
當然，效果就達到了，不過我現在看起來還真的是年輕的時候所犯下的錯，最後的結果就是畫面上一堆假按鈕=.=
正確示範
後來其實我找到了兩種方法解決這個問題
1.改用HTML按鈕
其實很簡單，從上述的錯誤示範1中，將送出的按鈕換成HTML按鈕，
並且將該按鈕改成Server可控制的按鈕，最後在Page_Load事件中，加入該按鈕的Click事件會disabled就可以了。
2.對按鈕額外加入觸發事件
同樣也是由錯誤示範1改良，對送出按鈕加入觸發事件,如下述藍色的部份，紅色的部份則是按鈕的ID
| btnSend.Attributes["onclick"] = "this.disabled=true;" + this.Page.ClientScript.GetPostBackEventReference(btnSend, ""); |
後期開發我都採用方法2，大概是懶的一下拉HTML按鈕，一下拉ASP.NET提供的按鈕吧...
以上是很初階的初心者教學，感謝您的收看
全站熱搜
留言列表
技術文章 (4)