Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Using the UpdatePanelBy Scott Mitchell
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
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
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:
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
Text property to the current date and time. Likewise, set the
Text property in the
Page_Load event handler.
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
Loadevent 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
Loadevent 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
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,
FriendPanelUpdatePanel contains GridView that lists the friends you have entered;
FoePanelcontains a GridView listing your foes.
In addition to their user interfaces, each UpdatePanel contains a Label Web control reporting the current date and time
Load event handler. Note the page-level Label at the top of the page. It's
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
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
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
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.
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.
FriendPanel, add an AsyncPostbackTrigger for the "This Person is a Friend" Button's
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,
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.
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...