如何在非同步Postback過程中修改位於UpdatePanel外的控件內容?

ASP.NET AJAX當中有一個非常神奇好用的控制項 UpdatePanel,這個控制項可以幫助我們輕易的達成非同步Postback的功能,讓我們的.aspx頁面上可以直接加入AJAX技術。

時常有讀者詢問筆者一個問題,在UpdatePabel內所觸發的事件當中,是否可以動態的更新佈置在UpdatePanel "外的" 控制項?

一般來說,我們使用UpdatePanel時可會這樣佈置:


平常時候我們會把 "需要以非同步方式動態更新" 的控制項放在UpdatePanel裡,這時後要更新畫面中的TextBox1很簡單,只需要撰寫程式碼:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
 me.TextBox1.Text= " ... "
End Sub


在UpdatePanel當中的Button1所觸發的Click事件,會以非同步Postback的方式被執行,因此當後端事件Click被執行到,即可更新TextBox1中的值,且頁面不需要換頁(Submit)。

但是,您用UpdatePanel久了就會發現,我們不可能把所有的控制項都放在UpdatePanel當中,如果需要在非同步Postback當中,動態更新UpdatePanel外的控制項內容,該如何作呢? 例如:

當我們想按下UpdatePanel當中的Button之後,更新位於UpdatePanel外的控制項的內容,則需要透過動態Render JavaScript的小技巧:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
 Dim js As
String
 js =
"$get('TextBox1').value='...';"
 ScriptManager.RegisterStartupScript(Me, GetType(String), "", js, True)
End
Sub

這樣就可以透過動態產生的JavaScript,來更新前端頁面上佈置於UpdatePanel外的控制項。
其實這個小技巧相當好用,我們也可以用於在非同步Postback過當中,動態的產生alert視窗,例如:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
 Dim js As String
 js = "alert('非同步postback過程當中產生的alert視窗...');"
 ScriptManager.RegisterStartupScript(Me, GetType(String), "", js, True)
End Sub


希望這個小技巧對各位使用AJAX技術時有所幫助...

留言

這個網誌中的熱門文章

使用 Airtable 在小型需求上取代傳統資料庫

使用Semantic Kernel 建立自然語言請假系統

精彩(且驚人)的Semantic Kernel入門範例

在 LINE Bot 開發中使用Semantic Kernel建立自然語言請假系統

專業的價值...