Search This Blog

Tuesday, December 16, 2008

Introduction to ASP.NET AJAX - PART II - More on the update panel

In continuation of the previous blog entry on ASP.NET AJAX Introduction, explained in this entry is details of the various options for the UpdatePanel.

Working with the GridView in an UpdatePanel

The UpdatePanel control makes creating AJAX-enabled user interfaces involving data Web controls like the GridView really easy. 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.

This article explains how to create 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.

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' IDproperties 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:





   
      
      

      
   




   
      
      

      
   

 







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:

  1. 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).
  2. 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.
  3. 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 partia 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 Loadevent 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 theFriendsPanel 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 notupdate 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 FoePanelto 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 theFoePanel 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.

No comments:

 
ss_blog_claim=610c329374fdaea5e07dfca1c6dffb2d