AJAX筆記之二:UpdatePanel

UpdatePanel是最重要的AJAX控制項, 它是一個容器, 是局部重新整理的單位.

  首先來看它的重新整理模式.
  在上一篇筆記中, 我使用了UpdatePanel "主動"指定trigger 的方法, 另外, 也可以在UpdatePanel端不做任何設定, 而"被動" 地接受重新整理.

  所以大體來說, 有三種方式使其更新:
  <一>.由UpdatePanel的子控制項引起回傳, 自動更新.  這種模式是預設的行為, 舉個簡單的例子, 在UpdatePanel裡放一個button, 給button的點擊事件寫代碼, 這樣當點擊這個按鈕時, UpdatePanel進行回傳並更新自己的內容. 但是這時, 如果button的點擊事件更改了UpdatePanel以外部分的內容, 則更新不會馬上顯示出來, 因為整頁並沒有更新, 這個實驗上一篇筆記已經描述了.

<二>UpdatePanel指定一個非子控制項的控制項, 而這個trigger 自己並不知道它會引起整頁回傳還是UpdatePanel的局部回傳. 這種做法就是上一篇所使用的方法. 設定UpdatePanel的Triggers 屬性, 而外部的button 本來應該是引起整頁回傳的, 但是經過UpdatePanel的聲明, 這個button 就變成了UpdatePanel的獨佔的了, 無需經過這個button的同意.

<三>UpdatePanel自己不知道自己何時將被更新, 完全取決於其它控制項. 這種情況下, 必須把它的UpdateMode設為Conditional, 這樣, 任何一個函數都可以調用它的Update 方法使其重繪, 無論是否子控制項都無關緊要.

有了以上的討論, 再看UpdatePanel 的幾個關鍵屬性就很容易理解了, 如果要使用第二, 第三種方式使其更新 ,必須將UpdateMode屬性設定了Conditional, 而第一種方式則必須設定為Always,  如果希望子控制項能夠觸發事件, 則把ChilderAsTriggers 設定為true, 否則設為false.

UpdatePanel可以互相嵌套, 但是這種嵌套只是外觀上的嵌套, -----內層的UpdatePanel 更新時, 並不會引起外層的UpdatePanel 重繪.

然後再看UpdatePanel 的排版.

UpdatePanel沒有height, width 等屬性, 所以也就無法設定其尺寸, 然而從工具箱裡拖過來以後, 它會有一個預設的大小, 如果往裡面往兩個控制項, 這兩個控制項就會一上一下地疊起來, 而不會排成一排 . 如果希望子控制項排 成一排, 則需要在UpdatePanel 的字碼頁裡, 寫一個div, 把所有內容都放進這個div 裡面, 然後設定div的寬度 大於等於所有控制項橫排的寬度, 則這些控制項就會自動排 成一排了.