[Ajax Toolkit] UpdatePanelAnimationExtender 應用範例

  • 7288
  • 0
  • 2011-11-11

運用Ajax的方式通常會有個困惑是在於取資料的動作是由『非同步PostBack』機制來處理的

,因此頁面上只有該更新的部份做更新,簡單來說也就是只有包了UpdatePanel的區塊會更新

(精準來說,應該是本次動作所觸發的UpdatePanel區塊),所以在查詢時該如何讓使用者能明確知道程式有在動

,但又不會有一閃一閃的感覺呢?

運用Ajax的方式通常會有個困惑是在於取資料的動作是由『非同步PostBack』機制來處理的

,因此頁面上只有該更新的部份做更新,簡單來說也就是只有包了UpdatePanel的區塊會更新

(精準來說,應該是本次動作所觸發的UpdatePanel區塊),所以在查詢時該如何讓使用者能明確知道程式有在動

,但又不會有一閃一閃的感覺呢?

 其實這個問題網路上一找解決方案應該有一堆,做法大家不盡相同,以下就簡單做一個模擬範例

所利用的Tool是Ajax Control ToolKit裡的pdatePanelAnimationExtender元件,

這個元件提供了<OnUpdating>及<OnUpdated>用來處理所指定的UpdatePanel處理中及處理完後要做的事

,不過它是配合JavaScript來處理就是了

 

程式範例如下

 (1)從ToolKit裡拉出pdatePanelAnimationExtender元件,並在原始碼的部份給予下列的code

並指定TargetControlID = 所要偵測的UpdatePanel元件ID

 


 

 

 

(2)在CS檔裡註冊好所須使用到的JavaScript,如果你想直接寫在aspx裡當然也可以,不過個人比較喜歡程式碼跟HTML做分離

因此本範例是寫在CS裡

 


 

[註] 若是想寫在aspx裡,則$get('"+this.GridView1.ClientID+"'),請改為$get('<%= this.GridView1.ClientID %>');
 

(3)呈現效果

範例程式:Demo.zip

 

若本文對您有所幫助,歡迎轉貼,但請在加註【轉貼】及來源出處,並在附上本篇的超連結,感恩您的配合囉。

By No.18