Easily refresh an UpdatePanel, using JavaScript
2011-08-22 20:42
225 查看
I’ve noticed a lot of discussion lately regarding methods to refresh an UpdatePanel via client script. This is very easy on the server side, of course. You can just call UpdatePanel.Update(). However, on the client side, the most common solutions I’ve been
seeing just don’t feel right.
Many will advise you to use a hidden button control inside the UpdatePanel, manipulated via button.click(), to trigger a partial postback of the UpdatePanel. While it does work, I never have been able to get past the kludgey nature of that solution.
That’s a slightly modified version of the standard UpdatePanel DateTime example. Instead of the more commonly used Button_Click trigger, notice that the UpdatePanel’s OnLoad event is handled in code-behind.
Anytime UpdatePanel1 is loaded or reloaded in a postback, Label1 will be updated to reflect the current date and time.
__doPostBack().
As long as the event target of a __doPostBack() call is an async trigger of an UpdatePanel, the ASP.NET AJAX framework will intercept the postback and fire a partial postback instead. For purposes of demonstration, I’m going to add that to the OnClick event
of the container div:
Now, clicking anywhere in the UpdatePanel will trigger a partial postback, targeting the UpdatePanel. Since
partial postbacks follow the full page lifecycle, this will fire UpdatePanel1_Load and update the Label’s text.
The original __doPostBack method performs identically, but is more robust since it gracefully degrades to full postbacks when the ASP.NET AJAX framework isn’t available. It’s also unlikely that __doPostBack will disappear in future versions of ASP.NET, while
it’s less assured that the ASP.NET AJAX framework will remain unchanged.
seeing just don’t feel right.
Many will advise you to use a hidden button control inside the UpdatePanel, manipulated via button.click(), to trigger a partial postback of the UpdatePanel. While it does work, I never have been able to get past the kludgey nature of that solution.
Finding a better way
To find a better solution, we’ll need a demonstration UpdatePanel to experiment with:<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(); }
That’s a slightly modified version of the standard UpdatePanel DateTime example. Instead of the more commonly used Button_Click trigger, notice that the UpdatePanel’s OnLoad event is handled in code-behind.
Anytime UpdatePanel1 is loaded or reloaded in a postback, Label1 will be updated to reflect the current date and time.
Never fear, __doPostBack() is here
Luckily, there’s an easy method for triggering a postback targeted at the UpdatePanel:__doPostBack().
As long as the event target of a __doPostBack() call is an async trigger of an UpdatePanel, the ASP.NET AJAX framework will intercept the postback and fire a partial postback instead. For purposes of demonstration, I’m going to add that to the OnClick event
of the container div:
<div id="Container" onclick="__doPostBack('UpdatePanel1', '');">
Now, clicking anywhere in the UpdatePanel will trigger a partial postback, targeting the UpdatePanel. Since
partial postbacks follow the full page lifecycle, this will fire UpdatePanel1_Load and update the Label’s text.
A word on _doPostBack
You may have noticed that there is also an ASP.NET AJAX specific method of the PageRequestManager named _doPostBack. While it works much like __doPostBack, as long as the ASP.NET AJAX client framework is present, you should not call it directly.The original __doPostBack method performs identically, but is more robust since it gracefully degrades to full postbacks when the ASP.NET AJAX framework isn’t available. It’s also unlikely that __doPostBack will disappear in future versions of ASP.NET, while
it’s less assured that the ASP.NET AJAX framework will remain unchanged.
相关文章推荐
- asp_UpdatePanel PostBack返回后执行Javascript
- How to create jigsaw puzzle from an image using javascript(拼图引擎)
- UpdatePanel触发javascript脚本技巧javascript
- UpdatePanel触发javascript脚本的方法附代码
- 使用JavaScript控制UpdatePanel的更新
- 关于Microsoft ASP.NET 2.0 AJAX Extensions UpdatePanel 中使用 javascript 产生错误的问题
- JavaScript实现GridView行交替与行选中颜色变化,缺点是加入分页和UpdatePanel后,点击下一页后,功能就消失了
- UpdatePanel 更新完成 执行javascript
- 编写组件,使用JavaScript更新UpdatePanel (转载)
- ERROR CODE: 1175 YOU ARE USING SAFE UPDATE MODE AN
- 使用updatepanel后,javascript失效的解决办法
- 使用 JavaScript 更新 UpdatePanel
- asp:UpdatePanel 中javascript的使用
- My Asp.net Ajax Trip(一) ----Using For UpdatePanel
- ASP.Net 如何在UpdatePanel (ajax)更新后执行Javascript
- 关于ajax中UpdatePanel中javascript中(alert)弹出消息框的问题
- 在atlas里面的UpdatePanel控件中调用javascript,以及updatePanel的一些原理
- c#调用javascript的方法,有Updatepanel的情况
- ASP.Net 如何在UpdatePanel (ajax)更新后执行Javascript
- Setting Page.Header.Title in the codeBehind causes an UpdatePanel to not render after a callback