使用 JavaScript 更新 UpdatePanel

核心提示：在ASP.NET AJAX 機制中，UpdatePanel 有著相當重要的地位，使用 JavaScript 更新 UpdatePanel，它讓開發人員不用撰寫 AJAX 相關程式碼，就能享有 AJAX 的效果，如下範例傳入 UpdatePanel 的 ClientID 即可，實際執行的結果頁面就不會再閃爍了，一般包含在

在ASP.NET AJAX 機制中，UpdatePanel 有著相當重要的地位，它讓開發人員不用撰寫 AJAX 相關程式碼，就能享有 AJAX 的效果。一般包含在 UpdatePanel 中的子控制項，若子控制項有執行 PostBack 動作時，UpdatePanel 機制在前端會去攔截 __doPostBack 函式，使得控制項產生的 PostBack都會經由 UpdatePanel 統一處理局部更新的動作。

可是有時我們會需要透過 JavaScript 要求 UpdatePanel 做更新的動作，一般都會以為直接呼叫 __doPostBack 即可。以下以一個實例來做測試，我們在頁面的 UpdatePanel 放置一個 Label 來顯示最新時間。然後 Input (type=button)在 onclick 直接呼叫 __doPostBack 函式。

*.aspx

1　　　　<asp:ScriptManagerID="ScriptManager1"runat="server"/>
2　　　　<div>
3　　　　　　<asp:UpdatePanelID="UpdatePanel1"runat="server">
4　　　　　　　　<ContentTemplate>
5　　　　　　　　　　ServerTime:
6　　　　　　　　　　<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label>
7　　　　　　　　</ContentTemplate>
8　　　　　　</asp:UpdatePanel>
9　　　　　　<inputid="Button1"type="button"value="button"onclick="__doPostBack('','');"/>
10　　　　</div>

*.aspx.vb

1　　ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.Load
2　　　　Label1.Text=Now.ToString()
3　　EndSub

可是實際執行並不如預期，UpdatePanel 中的時間是更新了，可是頁面會產生閃爍的情形，這個 PostBack 並不會受 UpdatePanel 控管。

其實只要做一點修改就可以要求 UpdatePanel 做更新的動作，就是在 __doPostBack 函式的第一個引數 (eventTarget)，如下範例傳入 UpdatePanel 的 ClientID 即可。實際執行的結果頁面就不會再閃爍了，因為 PostBack 動作已經在 UpdatePanel 的控管中。

<inputid="Button1"type="button"value="button"onclick="__doPostBack('UpdatePanel1','');"/>

UpdatePanelRefresh.rar下载:http://file.ddvip.com/2008_10/1224665246_ddvip_5201.rar