Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Using the UpdatePanel
By Scott Mitchell
A Multipart Series on ASP.NET AJAX |
---|
Over the past several years web developers have started using JavaScript to make asynchronous postbacks to the web
server that only transmit and receive the necessary data; these techniques are commonly referred to as
AJAX.
Microsoft has released a free AJAX framework for ASP.NET developers named Microsoft ASP.NET AJAX.
This article series examines using Microsoft's ASP.NET AJAX framework to build responsive user interfaces.
|
Introduction
In AJAX Basics and Getting Started with Microsoft's ASP.NET AJAX Framework we looked at the basics of the ASP.NET AJAX framework. We discussed how to download and install the framework and the basics of the UpdatePanel. The UpdatePanel makes creating interactive user interfaces as easy as dragging and dropping. Simply add an UpdatePanel to the page and, within it, add those controls that you want to participate in the partial postback. With the UpdatePanel in place, any postback caused by a control within the UpdatePanel is converted into a partial page postback. Like with a full page postback, a partial page postback sends a request back to the server but does so through client-side script. Moreover, only those regions within UpdatePanels are rended and have their markup return in the HTTP response, and that markup is updated through JavaScript. In short, partial page postbacks make the page seem "snappier." There's less data sent between the client and server and the page is fluidly updated - there's no "flash" as with typical postbacks.
The UpdatePanel in Part 1 was pretty simplistic, involving a Label and a Button control. In this tutorial we'll look at
some more real-world uses of the UpdatePanel and, in doing so, we will explore the UpdatePanel's properties in greater
depth. In particular, this article first looks at using the GridView within the UpdatePanel. Next, it explores a demo that
includes multiple UpdatePanels on the page and illustrates the effect of the UpdatePanel's UpdateMode
,
ChildrenAsTrigger
, and Triggers
properties. Read on to learn more!
Working with the GridView in an UpdatePanel
The beauty of the UpdatePanel control is that it makes creating AJAX-enabled user interfaces a walk in the park, even real-world user interfaces involving data Web controls like the GridView. All of the GridView's rich functionality - paging, sorting, editing, and deleting - are accessible when its placed within an UpdatePanel without the need for any special code or instructions.
The download available at the end of this article contains a working example of a GridView in an UpdatePanel that supports editing, delting, paging, and sorting. To create such a page on your own, start by adding a ScriptManager and UpdatePanel control to your page. Next, drag a GridView from the Toolbox into the UpdatePanel. From here, you can setup your GridView just like you normally would. You can bind the GridView to a declarative data source control and enable paging, sorting, editing, and deleting by checking the checkboxes from the GridView's smart tag. A thorough discussion on editing, deleting, paging, and sorting data in a GridView is beyond the scope of this article. For more information on these topics, see my Working with Data in ASP.NET 2.0 tutorials.
Once you've got your GridView properly configured, give it a test run in a browser. Since the GridView is in an UpdatePanel, actions that would normally cause a full postback - moving to the next page of data, sorting, editing, or deleting - instead result in a partial postback. The net result is a snappier user interface.
Using Multiple UpdatePanels on a Single Page
In the two UpdatePanel examples we've looked at thus far, the page has contained only one UpdatePanel, but there's no reason why the page can't contain more than one UpdatePanel. This is particularly useful in scenarios where different parts of the page are responsible for different actions. For example, in one part of the page you may prompt the user for input. Upon entering this input, you might want to store it to a database and then update another part of the page that summarizes the inputted data.
By default, when any UpdatePanel on the page causes an asynchronous postback, all of the UpdatePanels on
the page have their interface refreshed. This can best be illustrated through a simple example that displays the current
date and time in an UpdatePanel. Start by creating a new ASP.NET page and adding a ScriptManager control and two
UpdatePanel's. Set the UpdatePanels' ID
properties to UpdatePanel1
and UpdatePanel2
.
Within the ContentTemplates of these two UpdatePanels, add a Label and a Button Web control. Also add another
Button control outside of the UpdatePanels. This exterior Button, when clicked, will trigger a full page postback.
In addition to the exterior Button, add a Label Web control to display the current date/time.
At this point, your page's declarative markup should look similar to the following:
<asp:ScriptManager ID="ScriptManager1" runat="server">
|
The UpdatePanel control has a Load
event that fires during each page visit, be it a full postback or a
partial one. Create an event handler for this event for each of the two UpdatePanels and, in the event handler, set the
appropriate Label's Text
property to the current date and time. Likewise, set the PageTime
Label's
Text
property in the Page_Load
event handler.
protected void Page_Load(object sender, EventArgs e)
|
Set a breakpoint in these three event handlers and start debugging the page. Notice that anytime the page is visited, each of the breakpoints is hit. It doesn't matter if the page is being visited for the first time, after a full postback, or after a partial postback. However, only certain portions of the page are updated under certain circumstances. The following screenshot shows the page when it is first visited. Note that all three Labels report the same date/time values.

If the "Full Postback" button is clicked, the page is completely re-rendered and all Labels, again, report the same
date and time. However, if either one of the "Partial Postback" Buttons is clicked, a partial postback ensues. While
the partial postback still re-executes the page in its entirety - that is, all three Load
events still are raised -
only the UpdatePanels on the page have their user interfaces refreshed. After clicking the "Partial Postback" button, the
"Page time" still reports the time from the last full postback whereas the Labels in the UpdatePanels report the current time.

There are three key points to take away from this demo:
- The UpdatePanel's
Load
event fires on every page visit, regardless of whether the page was visited via a partial postback or a full postback (or was simply visited for the first time). - On a partial postback, regions outside of the UpdatePanels are not updated. Yes, the Page's
Load
event handler still fires, but the user interface is not updated. This is because the server is only sending back the changed markup for the UpdatePanel regions. - By default, when a partial postback is triggered, all UpdatePanels on the page have their interface refreshed. I say "by default" because this behavior can be modified, as we'll see shortly.
Conditional UpdatePanel Interface Updates
By default, all UpdatePanels' interfaces are refreshed when any single one UpdatePanel triggers a partial postback. This behavior can be modified by changing the UpdatePanel's
UpdateMode
property to Conditional
(the default value is Always
). Once you've made this modification, the UpdatePanel will only refresh if it is
the one that instigates the partial postback. To demonstrate this concept, I created a demo that uses three UpdatePanel.
The topmost UpdatePanel contains a data entry interface, asking the user to enter a name and then click a button indicating
whether that person is a friend or a foe. Beneath this UpdatePanel are two more UpdatePanels, FriendPanel
and FoePanel
. The FriendPanel
UpdatePanel contains GridView that lists the friends you have
entered; FoePanel
contains a GridView listing your foes.
In addition to their user interfaces, each UpdatePanel contains a Label Web control reporting the current date and time
via its Load
event handler. Note the page-level Label at the top of the page. It's Text
property is assigned the current date and time via the Page's Load
event handler.
The screenshot shown below was taken when the page was first visited. The Labels in the page and UpdatePanels
all report the same time.

The complete code and markup for this demonstration is available in the download at the end of this article...
By default, when the user enters a name and clicks either the "This Person is a Friend" or "This Person is a Foe" button,
a partial postback will ensue and all of the UpdatePanels will be refreshed. However, this level of refresh is overkill
because only the FriendsPanel
or only the FoePanel
needs to be updated (depending on which button
was clicked). By limiting what UpdatePanel is refreshed, we'll be improving the page's responsiveness since less markup
will be needed to be sent from the server back to the browser.
To make this modification, start by setting the FriendsPanel
and FoePanel
's UpdateMode
property
to Conditional
. Doing so will not update these two UpdatePanels when the "This Person is a Friend" or
"This Person is a Foe" buttons are clicked. To see this, once you've made the changes to the Conditional
properties, revisit the page and then enter a name into the textbox and click the "This Person is a Friend" button.
The topmost UpdatePanel will instigate a partial page postback and its Label will reflect the current date and time, but
the Labels in the FriendsPanel
and FoePanel
will still show their initial times, because they
have not been refreshed by the partial postback.

We need to tell the FriendPanel
to refresh its interface when the "This Person is a Friend"; similarly, we need
to instruct the FoePanel
to refresh its interface when the "This Person is a Foe" button is clicked.
The UpdatePanel's Triggers
collection includes a list of controls on the page and their associated events
that trigger the UpdatePanel to refresh it's user interface. From the Visual Studio Designer, click on the UpdatePanel
and then go to the Properties window. Select the Triggers
property and click on the ellipses to bring up
the UpdatePanelTrigger Collection Editor Dialog box (see below). Here you can specify what controls and events should
trigger the UpdatePanel to refresh its interface on a partial postback.
For FriendPanel
, add an AsyncPostbackTrigger for the "This Person is a Friend" Button's Click
event.
Do the same thing for the FoePanel
using the "This Person is a Foe" Button.

With these triggers defined, revisit the page, enter a name, and click the "This Person is a Friend" button. Upon doing so
a partial postback is performed and both the topmost UpdatePanel and the FriendPanel
are updated. However,
the FoePanel
remains un-updated, as evidenced by the date and times displayed by the Label controls.

Closing Comments on the UpdatePanel
The UpdatePanel's beauty is that it works seamlessly with most controls. For example, to add AJAX features to the GridView, simply drop the GridView into an UpdatePanel and, voila, the GridView's editing, deleting, sorting, and paging features now utilize AJAX techniques to provide a more responsive user interface. However, it is worth noting that not all ASP.NET Web controls are compatible with the UpdatePanel. Microsoft lists the incompatible controls in UpdatePanel Control Overview:
The following ASP.NET controls are not compatible with partial-page updates, and are therefore not supported inside an UpdatePanel control:For more information on the UpdatePanel, see the UpdatePanel class reference and Introduction to the UpdatePanel control.Controls that are incompatible with partial-page rendering can still be used on a page outside UpdatePanel controls. Additionally, in some cases you can use the controls in a specific way to make them compatible with partial-page updates. For example, you can use the Login, ChangePassword, or PasswordRecovery controls inside an UpdatePanel control if you can convert their contents to templates.
- TreeView and Menu controls.
- Web Parts controls. For more information, see ASP.NET Web Parts Controls.
- FileUpload controls when they are used to upload files as part of an asynchronous postback.
- GridView and DetailsView controls when their EnableSortingAndPagingCallbacks property is set to true. The default is false.
- Login, PasswordRecovery, ChangePassword, and CreateUserWizard controls whose contents have not been converted to editable templates.
- The Substitution control.
- Validation controls, which includes the BaseCompareValidator, BaseValidator, CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequiredFieldValidator, and ValidationSummary control.
Looking Forward...
In addition to the ScriptManager and UpdatePanel, the ASP.NET AJAX Extensions include a couple of other Web controls. We will examine these in future installments and then move on to the controls in the ASP.NET AJAX Control Toolkit. Until then...
Happy Programming!
Attachments:
A Multipart Series on ASP.NET AJAX |
---|
Over the past several years web developers have started using JavaScript to make asynchronous postbacks to the web
server that only transmit and receive the necessary data; these techniques are commonly referred to as
AJAX.
Microsoft has released a free AJAX framework for ASP.NET developers named Microsoft ASP.NET AJAX.
This article series examines using Microsoft's ASP.NET AJAX framework to build responsive user interfaces.
|