close

做網頁系統最怕的就是使用者對於按鈕一次點兩下,特別是網頁慢的時候,使用者總是很不耐煩的重覆點,

然而ASP.NET的這個機制做的有點奇怪,所以我還是拿出來提一下

 

 

畫面設計

 

畫面設計就很簡單,兩個按鈕,一個Label

第一個按鈕預期按下後，會讓Label出現「按鈕送出」的文字

第二個則是清除Label

不過為了讓實驗更明顯，所以我故意在第一個按鈕上加入Sleep 3秒的效果

2009-12-2 下午 10-06-03.png

2009-12-2 下午 10-10-49.png 

新手的我，曾以為在按鈕上加入disabled處理就可以了，所以在Page_Load上寫了以下code

btnSend.OnClientClick = "this.disabled = true;";

當然,最後就是畫面鳥都不鳥我=.= 按鈕變灰色,卻不會postback

2009-12-2 下午 10-13-24.png

 

後來我思考了一下，覺得大概是兩者(ASP.NET與Javascript)有衝突吧，所以用了另一個方法解決，也就是假按鈕

錯誤示範2

在畫面增加一個假觸發的按鈕,然後該按鈕寫入Javascript做兩件事

1.觸發真的按鈕的Click

2.將假按鈕disabled

然後又將真的按鈕用CSS隱藏

btnSend.Style["display"] = "none";
btnFake.OnClientClick = "document.getElementById('" + btnSend.ClientID + "').click();this.disabled = true;";

當然，效果就達到了，不過我現在看起來還真的是年輕的時候所犯下的錯，最後的結果就是畫面上一堆假按鈕=.=

2009-12-2 下午 10-21-03.png
2009-12-2 下午 10-24-54.png

 

 

 

 

正確示範

後來其實我找到了兩種方法解決這個問題

1.改用HTML按鈕

其實很簡單，從上述的錯誤示範1中，將送出的按鈕換成HTML按鈕，

並且將該按鈕改成Server可控制的按鈕，最後在Page_Load事件中，加入該按鈕的Click事件會disabled就可以了。

2009-12-2 下午 10-31-33.png

2009-12-2 下午 10-30-52.png

 

2.對按鈕額外加入觸發事件

同樣也是由錯誤示範1改良，對送出按鈕加入觸發事件,如下述藍色的部份，紅色的部份則是按鈕的ID

btnSend.Attributes["onclick"] = "this.disabled=true;" + this.Page.ClientScript.GetPostBackEventReference(btnSend, "");

2009-12-2 下午 10-39-08.png

 

後期開發我都採用方法2，大概是懶的一下拉HTML按鈕，一下拉ASP.NET提供的按鈕吧...102_壞大叔.gif 

以上是很初階的初心者教學，感謝您的收看

arrow
arrow
    全站熱搜

    gogo1119 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄