使用JavaScript轻松更新UpdatePanel

使用JavaScript轻松更新UpdatePanel

http://encosia.com/2007/07/13/easily-refresh-an-updatepanel-using-javascript/

最近我注意到很多关于如何通过客户端脚本刷新一个UpdatePanel的讨论。当然在服务器端这非常容易。你只需要调用UpdatePanel.Update()即可。然而在客户端我所看到的大多数方案感觉不是很漂亮。

许多方案建议你使用一个位于UpdatePanel中的隐藏button控件，通过button.click()触发UpdatePanel的异步回送。虽然这可以工作，但是很糟糕。

有一个更好的方法：

这只是对标准的UpdatePanel DateTime例子做了轻微的修改。注意我们没有使用通用的Button_Click触发器，而是在code-behind文件中处理UpdatePanel的OnLoad事件。每当UpdatePanel1被装载或者回传时重新装载，Label1都会被刷新以反映当前的日期和时间。

< asp:ScriptManager ID = " ScriptManager1 "  runat = " server "   />
< div id = " Container " >
< asp:UpdatePanel runat = " server "  ID = " UpdatePanel1 "  
    OnLoad = " UpdatePanel1_Load " >
   < ContentTemplate >
     < asp:Label runat = " server "  ID = " Label1 "   />
   </ ContentTemplate >
</ asp:UpdatePanel >
protected   void  UpdatePanel1_Load( object  sender, EventArgs e)
{
  Label1.Text = DateTime.Now.ToString();
}

 

不要害怕，我们有__doPostBack

幸运的是，有一个非常简单的方法可以触发一次目标为UpdatePanel的回传，它就是__doPostBack()。如果一次__doPostBack()调用的目标是异步触发某个UpdatePanel，ASP.NET AJAX框架将截获这次回传并触发一次部分回传。举个例子，我们为容器div的OnClick事件添加异步更新。

<div id="Container" onclick="__doPostBack('UpdatePanel1', '');">
   
   

现在，单击UpdatePanel中的任何地方都会触发一次目标为UpdatePanel的部分回传。这将触发UpdatePanel_Load并更新Label的文本。

就是这么简单！

注意：_doPostBack()是PageRequestManager的一个特定于AJAX的方法。如果留意了这个注释，那么我会感兴趣它们之间是否有任何实际的差别。我做了一个简单的分析发现它们在JavaScript执行速度方面的效率相同，并且最终结果也相同。如果非要说出区别的话，旧的__doPostBack()方法似乎更加健壮，因为它将自动弱化为普通的回传。

 译者注：如果有两个UpdatePanel，假设为up1和up2。在up1中有一个按钮btn，如果想单击btn的时候更新up2，那么应该使用up2.Update()方法，而不要使用这个技巧，因为在服务器端操作更加直接。特别是不要利用ASP.NET AJAX客户端声明周期所暴露的事件的处理器中调用__doPostBack("up2", "")，这样会引起死循环。