在 ASP.NET AJAX 机制下,使用 UpdatePanel 控件有很好的用户体验,它可以让开发人员不用编写繁杂的 javascipt相关程序代码,就能享有 AJAX 的效果。一般包含在 UpdatePanel 中的子控件,如果子控件有执行 PostBack 操作时,UpdatePanel 的机制在前端会拦截 __doPostBack 操作,使得控件产生的 PostBack 都会经由 UpdatePanel 统一处理,以做到局部更新的效果。
可是有时候我们会需要透过 JavaScript 要求 UpdatePanel 做更新的操作,一般都会以为直接呼叫 __doPostBack 即可。
以一个实例来做测试,我们在页面的 UpdatePanel 放置一个 Label 来显示最新时间。然后通过HTML控件 Input (type=button) 在 onclick 直接调用 __doPostBack 事件函数。
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Server Time:
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<input id="Button1" type="button" value="button" onclick="__doPostBack('','');" />
</div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Server Time:
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<input id="Button1" type="button" value="button" onclick="__doPostBack('','');" />
</div>
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = System.DateTime.Now.ToString();
}
{
Label1.Text = System.DateTime.Now.ToString();
}
以上程序的实际执行并不如预期的那样,UpdatePanel 中的时间是更新了,但是页面却会有闪烁的效果,这个 PostBack 并没有受到 UpdatePanel 的控制。
经过后来的多次的测试后发现,其实只要做一点修改就可以达到页面不闪烁的效果,就是在 __doPostBack 函数的第一个参数 (eventTarget),传入 UpdatePanel 的 ClientID 即可。如下:
<input id="Button1" type="button" value="button" onclick="__doPostBack('UpdatePanel1','');" />