http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1734.aspx

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

可是有時我們會需要透過 JavaScript 要求 UpdatePanel 做更新的動作，一般都會以為直接呼叫 __doPostBack 即可。

以下以一個實例來做測試，我們在頁面的 UpdatePanel 放置一個 Label 來顯示最新時間。然後 Input (type=button) 在 onclick 直接呼叫 __doPostBack 函式。

*.aspx

 

01 <asp:ScriptManager ID="ScriptManager1" runat="server" />
02         <div>
03             <asp:UpdatePanel ID="UpdatePanel1" runat="server">
04                 <ContentTemplate>
05                     Server Time:
06                     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
07                 </ContentTemplate>
08             </asp:UpdatePanel>
09             <input id="Button1" type="button" value="button" onclick="__doPostBack('','');" />
10         </div>

 

*.aspx.vb

 

1 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
2         Label1.Text = Now.ToString()
3     End Sub

 

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

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

 

1 <input id="Button1" type="button" value="button" onclick="__doPostBack('UpdatePanel1','');" />
補充一點 若不想出現Button
可以加入 <div id="Container" onclick="__doPostBack('UpdatePanel1', '');"> 來隱藏按鈕
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 meltdown 的頭像
    meltdown

    meltdown

    meltdown 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄