Update Panel Internals - TechMela Session 2 - Deep Dive: ASP.NET AJAX

My second session at Tech Mela which was also the second session on the first day of Web Platform track was a Deep Dive on ASP.NET AJAX.  The topic I did as Deep Dive was on Update Panel internals.  Update Panel is the most popular ASP.NET AJAX Server control used widely for AJAX enabling your ASP.NET Pages. A better understanding of the same would help in using it in a better way.  So, here I am providing the contents and the specifics discussed during my session.

UpdatePanel is one of the important ASP.NET AJAX Extensions server side controls used when you are developing AJAX enabled ASP.NET Websites.  ( For some basic level articles, samples on UpdatePanel refer to my earlier posts in this blog on the same http://geekswithblogs.net/ranganh/category/6604.aspx )

While it is the simplest way you can AJAXify your page, it also accounts to certain performance issues when used in an improper way.   Before we get into using the UpdatePanel effectively, let us find out how the UpdatePanel works internally.

First step is dissecting the UpdatePanel.  When you declare an UpdatePanel in your ASP.NET Page, the HTML markup that is generated is as follows:- (For sample purposes, I put a simple Submit button inside the updatepanel)

<div id="UpdatePanel1">
     <input type="submit" name="button1" value="Refresh" id="button1" />
</div>

So, the rendered HTML is actually a Div with the ID of the UpdatePanel.  However, the interesting portion of code which does the magic is as follows (as rendered in the HTML)

Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1'], [], [], 90);

Note the above lines.  "Sys" is the root namespace of Microsoft AJAX Library and it is comparable to "System" which is the root namespace for .NET Classes.  The first line above calls the initialize method of the PageRequestManager class passing the two parameters 'ScriptManager1' which is the ID of the Script Manager control and the ID of the Form element of the page.

The UpdatePanel control doesnt really do any magic here.  It is the ScriptManager control and the PageRequestManager class which is installed as a part of the ASP.NET AJAX installation, which does the partial page rendering mechanism.

Note that, even if you dont add any UpdatePanel or any other control to your webform, the moment you add a ScriptManager control to your page, the mark up generated has the above 2 lines.  The only difference would be the 'tUpdatePanel1' which in the case of a page without any UpdatePanel, would be a blank array like the rest of them in the list (2nd line above).

So, what happens if I add multiple UpdatePanels to the page?  the 2nd line is changed as follows:-

Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1','tUpdatePanel2','tUpdatePanel3'], [], [], 90);

So it keeps appending the UpdatePanel IDs to the first array.  The moment you add a trigger to the UpdatePanels, the second array gets the ID of the trigger controls appended to it. 

Example: I modified the first UpdatePanel declaration as follows:-

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button4" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

The resulting HTML generated is modified as follows:-

Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1','tUpdatePanel2','tUpdatePanel3'], ['Button4'], [], 90);

If you use the same trigger i.e. Button4 for all the UpdatePanels, the above line is unaltered.  However, when you use multiple buttons (triggers) i.e. Button5, Button6 for the different UpdatePanels, the items get appended to the list i.e. 'Button4', 'Button5', Button6' etc.,

Ok, enough of HTML exploration.  What next?  Give me a break.. Will continue in Part 2 of this article.

Cheers !!!

Print | posted on Friday, July 13, 2007 1:14 AM

Comments on this post

# re: Update Panel Internals - TechMela Session 2 - Deep Dive: ASP.NET AJAX

Requesting Gravatar...
Thanks for posting this. I have a question please:
Am using UpdatePanel on asp.net page.
When i have EnablePartialRendering set to true i.e.

<asp:ScriptManager runat="server" id="..." EnablePartialRendering="true" >

and use ScriptManager.RegisterClientScript to write JSON from server side - it is not written to the browser i.e.it shows empty square brackets.

var SomeVar = []

As soon as I change EnablePartialRendering ="false" then
JSON starting showing up in the browser i.e.

var SomeVar = [{"id","1"}{"id",2}]

Could you please throw some light why this behaviour and how can I fix this? Will appreciate any ideas.
Left by Mo on Jan 28, 2010 7:57 PM

# re: Update Panel Internals - TechMela Session 2 - Deep Dive: ASP.NET AJAX

Requesting Gravatar...
verry veryy good
Left by meksika biberi zayiflama hapi on Jun 01, 2010 12:01 AM

# re: Update Panel Internals - TechMela Session 2 - Deep Dive: ASP.NET AJAX

Requesting Gravatar...




veryy good
Left by meksika biberi zayiflama hapi on Jun 01, 2010 12:03 AM

Your comment:

 (will show your gravatar)