Refresh the UpdatePanel using JavaScript Code
(It's the post I wrote one year ago in my previous blog which has been cancelled now.)
Lots of customers asked me that how to refresh the UpdatePanel - it actually is to raise an async postback using JavaScript code. The feature is quite important in some scenarios but unfortunately, ASP.NET AJAX does not give any native support, so we should find work arounds to do that.
An UpdatePanel will be refreshed if the user clicks the specific control in the page and the control is the trigger that raises the async postback. The straightest thought of raising an async postback is to simulate a button's clicking. There're several kinds of buttons in ASP.NET (we use the concept in ASP.NET rather than the concept in HTML since the server side konws ASP.NET better). They are Button, LinkButton, ImageButton, etc. Let's just look at the LinkButton control since it will shows the things we need. (I use an master page here to show the effect of NamingContainer.):
<!-- Declarative code in ASPX page -->
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<!-- The html generated in client side -->
<a id="ctl00_Main_LinkButton1" href="javascript:__doPostBack('ctl00$Main$LinkButton1','')">
LinkButton
</a>
A LinkButton on server side generates an anchor tag on the page. The way to submit the form when click the anchor is to execute the JavaScript method "__doPostBack". Please note that it's really simple for us to simulate that. The only thing we should pay attention to is the first parameter passed to the method. What's that?
An experience ASP.NET programmer will easily figure out that a string separated by dollar signs ($) is most likely the UniqueID of the control, which is used to indicate the control at server-side, and then the proper event will be raised, etc. So, if we are going to simulate the postback raised by the LinkButton, its UniqueID shoud be write to clint side for further use.
I'm going to show you a demo here to tell the way discussed above. At first, we should build a page with an UpdatePanel and a invisible LinkButton in it. Please note that we set the style of the LinkButton to "display:none" rather than set its Visibile property to false, otherwise the LinkButton won't be rendered on the page, which will cause an exception when postback:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%= DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
<asp:LinkButton ID="LinkButton1" runat="server" style="display:none;">
LinkButton
</asp:LinkButton>
Secondly, write the following code to the page. You can find that we should write the UniqueID of the LinkButton to the client:
function raiseAsyncPostback()
{
__doPostBack("<%= this.LinkButton1.UniqueID %>", "");
}
The last thing to do is to make the LinkButton raising an async postback, so add the code to the code behind file:
ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.LinkButton1);
Now we can simply call the raiseAsyncPostBack method defined in the page when we want to raise an async postback using JavaScript code. Both the client and server will think the LinkButton is clicked. The client side will raise an async postback and the server will fire the Click event of the LinkButton. If we want to refresh some UpdatePanels when we execute the JavaScirpt method, we can just assign the LinkButton to the UpdatePanels as an AsyncPostBackTrigger.