使用AJAX避免postback

AJAX與Postback

在製作ASP.net網站的時候,如果需要使用Checkbox,Dropdownlist等控制項的時候,最常發生的就是傳說中的"閃一下"畫面,也就是我們說的Postback,一般當你把控制項直接拉出來使用的時候,預設Autopostback="true",就算嘗試手動把他調成"false"也是一樣會Postback。

如果不想讓他Postback造成Server的負擔,或是造成已經輸入好的textbox value被Postback清掉,那這個問題勢必要解決。

可以使用AJAX的UpdatePanel項目就可以快速的來達成我們要的目的(即非同步Postback),以下簡單介紹使用方法:

  1. 拉一個ScriptManager到畫面,再拉一個UpdatePanel到畫面,把想達到不會postback的控制項丟到UpdatePanel裡面即可。

     
  2. 如上圖所見,畫面中的Textbox1更新程式碼如下:
    1 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    2  me.TextBox1.Text= " ... "
    3 End Sub

    如此一來,在UpdatePanel當中的Button1所觸發的Click事件,會以非同步Postback的方式被執行,因此當後端事件Click被執行到,即可更新TextBox1中的值,且頁面不需要換頁。
     
  3. UpdatePanel Triggers:當UpdatePanel外的控制項也想達到AJAX時使用 
       
      (1)從設定:UpdatePanel的Trigger屬性,按下[集合],按下[加入],在右邊ControlID設到你想要的控制項即可。

      (2)從程式:在Load中寫入

    1 Me.ScriptManager1.RegisterAsyncPostBackControl

    如此一來就算控制項不在UpdatePanel裡面,一樣可以非同步Postback。

 

 

當然Postback也有其存在的必要性,開發時別只顧慮著該如何避免他,應該適當的斟酌使用,才能讓程式發揮最大的效能與彈性。 

 

AJAX學習與參考:http://msdn.microsoft.com/zh-tw/magazine/cc163363.aspx

 

 

 

 

 

 

 

 

 

分享


站作網站設計工作室 SiteMak Studio
Shinyo Ho 
Founder / Developer
email:shinyo.her@gmail.com|web:www.sitemak.com.tw