Refresh an Update Panel using JavaScript

I have noticed a lot of discussion 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 have 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 inelegant solution for this problem.

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 


hat the UpdatePanel’s OnLoad event is handled in code-behind. 

Anytime UpdatePanel1 is loaded or reloaded in a postback, Label1 will b
example. Instead of the more commonly used Button_Click trigger, notice 
te 
updated to reflect the current date and time.

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.