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.

AJAX Basics and Getting Started with Microsoft's ASP.NET AJAX Framework - examines AJAX basics and looks at installing Microsoft ASP.NET AJAX; includes a demo of the UpdatePanel control.

Using the UpdatePanel - provides more in-depth and real-world examples of using the UpdatePanel.

Providing Visual Feedback with the UpdateProgress Control - shows how to use the UpdateProgress control to display visual feedback to the user when a partial page postback is in progress.

Performing Client Actions in Response to Partial Page Postbacks - learn how to execute client-side script in response to events raised by the partial page postback life-cycle.

Using the Timer Control - see how to asynchronously update a portion of the screen every n milliseconds.

Enabling Bookmarking and the Browser's Back Button - learn how to add history points to an AJAX-enabled web page so that your visitors can use their browsers' Back and Forward buttons and bookmarks.

Retrieving Server-Side Data Using Web Services - call Web Services from an ASP.NET AJAX application with a sprinkle of JavaScript.

A Look at JSON Serialization - explore the serialization format used by the ASP.NET AJAX Framework when calling Web Services from client-side script.

Triggering Full Page Postbacks From An UpdatePanel - learn how to override an UpdatePanel's default behavior and trigger a full page postback.

Refreshing An UpdatePanel With JavaScript - see how to refresh the contents of an UpdatePanel via JavaScript.

Rebinding Client-Side Events After a Partial Page Postback - discover how to automatically rebind client-side event handlers to HTML elements in an UpdatePanel after a partial page postback.

(Subscribe to this Article Series! )

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!

- continued -

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"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label runat="server" id="Panel1Time"></asp:Label> <asp:Button runat="server" ID="Panel1Button" Text="Partial Postback from Panel 1" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Label runat="server" id="Panel2Time"></asp:Label> <asp:Button runat="server" ID="Panel2Button" Text="Partial Postback from Panel 2" /> </ContentTemplate> </asp:UpdatePanel> <asp:Label runat="server" id="PageTime"></asp:Label> <asp:Button runat="server" ID="FullPostbackButton" Text="Full Postback" />

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) { PageTime.Text = "Page time: " + DateTime.Now.ToString(); } protected void UpdatePanel1_Load(object sender, EventArgs e) { Panel1Time.Text = "UpdatePanel1 time: " + DateTime.Now.ToString(); } protected void UpdatePanel2_Load(object sender, EventArgs e) { Panel2Time.Text = "UpdatePanel2 time: " + DateTime.Now.ToString(); }

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.

All three Labels report the same date/time value.

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.

The Labels in the UpdatePanels have been updated.

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:

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.

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.

For more information on the UpdatePanel, see the UpdatePanel class reference and Introduction to the UpdatePanel 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!

By Scott Mitchell

Attachments:

Download the Demo Code Used in this Article