In this article, I'll explain and demonstrate how update panels work and how to use them efficiently.

This article is divided into parts. In each part I may cover one or more scenario(s). These scenarios will provide you an idea how update panels work internally and how to use them in various situations efficiently.

Before going into detail, please become familiar with the Fiddler tool if you haven't already. You can get this from: http://fiddler2.com.

First of all, create an ASP.Net project with a master page. Add a ScriptManager tag to the master file.

Scenario 1: Update part of the page only, not the entire page

Add a new aspx page NoUpdatePanels.aspx with a master file and a copy the following code in it (or grab it from the attached source code and remove updatepanels).

For example, we have three content panels in a page as in the following:

Content_NoUpdatePanels1.png

The actual source is as in the following:

Content_NoUpdatePanels2.png

In the code above:

Do the following:

  1. Click on the "Content Two" button, it triggers a post-back and the entire page is refreshed. Compare the date times in all the contents (Content One, Content Two and Content Three).

  2. Click on the "Content Three" button, it triggers a post-back and the entire page is refreshed. Compare the date times in all the contents (Content One, Content Two and Content Three)

See the following action:

NoUpdatePanels.gif

See the following; the page sizes of the requests is on two clicks:

Fiddler_NoUpdatePanels1.png

All the three requests have the same request and response size and returns the entire HTML page as in the following:

Fiddler_NoUpdatePanels_Html.png

Please note that the page size in the preceding figure is the combined size of the request and response.

Now I want to update the date time of "Content Two" only when clicking on the button in "Content Two" without updating "Content One" and "Content Three" date times.

I'll wrap "Content Two" in the Update Panel with the Id "UpdatePanel1" as in the following:

Content_NoUpdatePanels_One.png

Now do the following:

When the button is clicked, Update Panel updates "Content Two" only. On button post-back, the server sends only "Content Two" HTML content instead of sending the entire HTML page as we saw in the previous case.

See the action below.

NoUpdatePanels1.gif

See the following new page sizes of the preceding requests:

Fiddler_NoUpdatePanels2.png

Please notice that the second page's ("Content Two" button click) request body size decreased around 75%. The "Content One" and "Content Two" sizes remain the same (there was a slight difference from the previous and current fiddler diagrams because of the newly added update panel element).

See the following response for the "Content Two" button click:

Fiddler_NoUpdatePanels_One1.png

Now I want to update the "Content Three" date time only when the "Content Three" button is clicked without updating the "Content One" date time.

I'll wrap "Content Three" in the Update Panel with Id "UpdatePanel2" as in the following:

Content_NoUpdatePanels_Two.png

Now do the following:

See the action below:

NoUpdatePanels2.gif

See the new page sizes below:

Fiddler_NoUpdatePanels3.png

Now you will see in the second page request ("Content Two" button click) and the third page request ("Content Three" button click) the sizes are the same. The "Content Two" button click updates "Content Two" and the "Content Three" date time whereas the "Content Three" button updates "Content Three" and "Content Two" date times.

Now see the following response for the second and third page requests:

Fiddler_NoUpdatePanels_Two1.png

Now the question is, why was it returning "Content Three" updates when "Content Two" button is clicked and vice versa.

The problem is with the Update Panel configuration.

Update Panel provides a property "UpdateMode" to configure your update panel updating mode.

Valid values are

Change "UpdatePanel1 UpdateMode" to "Conditional" as in the following:

Content_NoUpdatePanels_One1.png

Now do the following:

See the new page sizes for the preceding click requests as in the following:

Fiddler_NoUpdatePanels4.png

But why the size of third request (Content Three button click) is decreased if we set "Content Two" update panel's UpdateMode to conditional. Let's have a look at the responses of the second and third requests.

The second request response ("Content Two" button click):

Fiddler_NoUpdatePanels_Two1.png

The third request response ("Content Three" button click):

Fiddler_NoUpdatePanels_Two2.png

The reason was that "UpdatePanel2" has no UpdateMode property, in other words its UpdateMode is "Always" by default whereas "UpdatePanel1s"' UpdateMode is set to "Conditional".

When the "Content Three" button is clicked, only "UpdatePanel2" was updated whereas "UpdatePanel1s" UpdateMode was set to Conditional.

When the "Content Two" button is clicked, "UpdatePanel1" was updated as well as "UpdatePanel2". (It has no UpdateMode so by default it was set to "Always".) .

Now change UpdatePanel2's UpdateMode to "Conditional" as in the following:

Content_NoUpdatePanels_Two1.png

Now do the following:

See the action below:

NoUpdatePanels4.gif

See following the new page sizes for the preceding requests:

Fiddler_NoUpdatePanels5.png

In the preceding, the second and third request's page size was reduced to 75%. The response for the "Content Two" button click was "UpdatePanel1" and for the "Content Three" button click it was "UpdatePanel2".

Advantages

  1. Reduces bandwidth (size of request and response during each post-back to the server).

  2. Response time decreases.

In this article, I have explained and demonstrated how update panels work internally and how it updates part of the page.