Wednesday 26 January 2011

UpdatePanels - Response Text

So, I've covered the basics of UpdatePanels in a previous post but what exactly makes them so much faster than just normal postbacks? Well the answer is that when the server responds, it doesn't respond with the full HTML of the whole page, instead, it'll respond with only the HTML that it needs to be able to update the content of each UpdatePanel.

This is done using a special format that is read, understood and executed by JavaScript at the client. An example of this response text is here:


175|updatePanel|panel|
                <input name="textbox" type="text" value="Foo" id="textbox" />
                <input type="submit" name="button" value="Submit" id="button" />
            |88|hiddenField|__VIEWSTATE|/wEPDwUKMTg0NjEyNDk1MQ9kFgICAw9kFgICAQ8PFgIeB1Zpc2libGVoZGRkcMaCINs5w9oczWUhLKPVgiBR3uk=|64|hiddenField|__EVENTVALIDATION|/wEWBAKc1c6BDgKsyt74CwLz9r7ABAKw3cLDCSDRvcYZVa7GBSZW2zBXlJJG8Vsa|0|asyncPostBackControlIDs|||0|postBackControlIDs|||16|updatePanelIDs||tpanel,tpanelTwo|0|childUpdatePanelIDs|||5|panelsToRefreshIDs||pa
nel|2|asyncPostBackTimeout||90|12|formAction||Default.aspx|13|pageTitle||Untitled Page|


Now this actually has a specific format, even if it doesn't seem so at first glance. Essentially, it's a concatenation of strings, the breakdown of each string is represented in the diagram below:


In the example above, you can tell roughly, what's going to happen to the page, just by looking at the response text. The content of the update panel whose id is "panel", will be changed to now contain the textbox and submit buttons as defined by the HTML in the response text. It includes the new ViewState value, the IDs of any other update panels contained within the page, the IDs of the update panels to be refreshed and then a few other page level properties like the form action and the window title.

Now we know the format of this response text, we can make use of that knowledge if we ever need to transform our output from the server to the client. For example, you may want to remove all unnecessary white space from the response, or, you may need to change a URL reference and rather than finding each and every instance, you could just change it at the very end of the page life cycle. I'll explain how to do all of this in a future post!

4 comments:

  1. Hey now i can see it is changed to :

    1|#||4|31704|updatePanel|ctl00_ContentPlaceHolder1_ctl01_ctl01_upQuestions1|

    can you tell me what 1|#||4| stands for here?

    ReplyDelete
  2. i think the change is in .Net framework 4.0

    ReplyDelete
  3. what would be the reason for (replyIndex + len) >= reply.length error in parseDelta method? I am always getting this issue. Please help me. I cannot login here with gmail id please send me reply to my id pardhus11@gmail.com

    ReplyDelete
  4. Udit - Apologies for the (very) late response. If I'm honest, I don't know, I'd have to look into it but as your post is over half a year old, I'm guessing you've probably already found the answer.

    Anon - This may seem like a stupid question but what parseDelta method? This blog post has no code associated with it. If you could point to the blog post you were actually looking at then I'll have a look for you. Thanks.

    ReplyDelete