使用 JavaScript 更新 UpdatePanel


在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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3