Microsoft Virtual Labs

ASP.NET AJAX (Part 1 of 4) Using The Update Panel Control

ASP.NET AJAX: Part 1 The UpdatePanel Control

Table of Contents
ASP.NET AJAX: Part 1 The UpdatePanel Control ............................................................... 1
Exercise 1 Getting Started .............................................................................................................................................2 Exercise 2 Adding Partial-page Rendering to Company.aspx .......................................................................................6 Exercise 3 Adding Partial-page Rendering to Tech.aspx ............................................................................................ 11 Summary...................................................................................................................................................................... 14

ASP.NET AJAX: Part 1 The UpdatePanel Control

ASP.NET AJAX: Part 1 The UpdatePanel Control

Objectives
After completing this lab, you will be more familiar with: ASP.NET AJAX and the UpdatePanel control Adding partial-page rendering to your site Using UpdatePanel controls to eliminate flashing and flickering and perform clean content refreshes in Web pages

Estimated Time to Complete This Lab

90 Minutes

Page 1 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control

Exercise 1 Getting Started

Scenario
In this exercise, youll open an existing Web siteone based on the real Burton Snowboards Web site at www.burton.com in Visual Studio and take a few moments to familiarize yourself with it. Youll also see that some otherwise beautiful pages are marred by the flashing and flickering that occurs when simple UI elements are clicked. Tasks
1. Open the Web site

Detailed Steps Note: Logon to the server using following credentials Username: John Password: Pass@word1 a. Open Visual Studio 2005. You will see ASP.NET AJAX Lab 1 in the list of Recent Projects. Open this Project. Note: If you are notified that Administrator permissions are recommended for running Visual Studio 2005 SP1, click Continue. This lab does not require Administrator permissions. b. Select the Start Without Debugging command from the Debug menu (or press Ctrl+F5) to run the application. The home page Default.aspx appears.

c. Take a few moments to click around the site and familiarize yourself with it. Not all the pages are there yet (for example, the Slopes link in the main navigation bar points to a coming soon page), but youll be filling in some of the holes in subsequent labs. Page 2 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control Tasks

2. Examine Tech.aspx

Detailed Steps a. Click Tech in the main navigation bar to view the sites tech section. b. Click the links in the sub-navigation bar (Boards | Boots | Bindings | Softgoods | Bags) one by one to see the different subpages that make up the tech section. Observe the flicker that occurs with each click. Note: The tech section comprises a single pageTech.aspxthat hosts three ASP.NET MultiView controls. The subpages are actually Views in the MultiView controls. The links in the sub-navigation bar are LinkButtons that post back to server. A server-side event handler swaps new content for old by setting the ActiveViewIndex property of each MultiView. c. Observe that each subpage in the tech section contains an Additional Photos element like the one pictured below.

d. Click the 2 or 3 button in the Additional Photos element. After a brief pause, the photo underneath updates. Observe, however, that it isnt just the photo that updates; the entire page refreshes, evidence that clicking the numbered buttons causes the page to post back to the server. If the page is scrolled down when you click, it snaps back to the top and loses its scroll positionsomething that drives end users crazy.
3. Examine

Company.aspx

a. Click Company in the main navigation bar to view the sites company section. Note: Like the tech section, the company section is really just one page that uses a MultiView control to present different subpages to the userspecifically, to vary the content shown in the body of the page below the The Company banner and to the right of the left-nav. b. Click Factory Tour in the menu on the left to display the factory tour page.

Page 3 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control Tasks Detailed Steps

c. Click the Next > element above the picture a few times to take a Burton factory tour. Observe how the page flashes each time you click. d. Click Flagship Stores in the menu on the left to display the factory stores page.

e. Click the Burlington | Wrentham | Innsbruck | New York links above the picture. Once more, observe the flashing that occurs when the whole page is

Page 4 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control Tasks Detailed Steps updated even though only a portion of the content on the page changes. f. Close your browser and return to Visual Studio.

Page 5 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control

Exercise 2 Adding Partial-page Rendering to Company.aspx

Scenario
You just saw the negative effect that postbacks impose on the user experience. In this exercise, youll use an UpdatePanel control to eliminate the excessive flashing from Company.aspx and enhance the user experience. Youll also use an UpdateProgress control to let the user know something is happening while waiting for an asynchronous callback to complete. Tasks
1. Add a ScriptManager

Detailed Steps a. In Visual Studios Solution Explorer window, double-click Site.master to open the sites master page for editing. b. Add the following statements to Site.master just after the opening <form> tag:
<asp:ScriptManager ID="MasterScriptManager" EnablePartialRendering="true" runat="server"> </asp:ScriptManager>

control to Site.master

Note: These statements declare a ScriptManager control in the sites master page. Pages that use ASP.NET AJAX must declare an instance of ScriptManager. Among other things, ScriptManager ensures that the core JavaScript files comprising the Microsoft AJAX Library get downloaded to the client. The EnablePartialRendering=true attribute configures ScriptManager to support partial-page rendering via UpdatePanel controls. c. Save your changes and close Site.master.
2. Add an UpdatePanel

control to Company.aspx

a. Open Company.aspx in Visual Studio. Find the MultiView control whose ID is CompanyMultiView. This is the MultiView that changes the content in the body of the page when links in the left-nav are clicked. (Yes, its a big MultiView!) b. Add an UpdatePanel control that encapsulates the entire MultiView control. The modified markup should be structured like this, with changes highlighted in bold:
<asp:UpdatePanel ID="CompanyUpdatePanel" runat="server"> <ContentTemplate> <asp:MultiView ID="CompanyMultiView" ActiveViewIndex="0" runat="server"> . . . </asp:MultiView> </ContentTemplate> </asp:UpdatePanel>

Note: ASP.NET 2.0 added support for registering controls (both compiled and .ascx user controls) within your web.config file - removing the need to always add <%@ Register %> directives at the top of your page. One of the cool aspects of this feature is that it also now allows you to map the same tag prefix against multiple assemblies. We use this with ASP.NET AJAX to have these controls use the <asp:> tag prefix, even though they live in a separate assembly from

Page 6 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control Tasks Detailed Steps the system.web.dll file that contains the rest of ASP.NET. Unfortunately there is a bug with the VS markup intellisense engine when doing the ASP.NET AJAX Beta1 release - which is that you lose intellisense when you map multiple assemblies against the <asp:> tag prefix and use the controls within a <asp:content> control in a .aspx page based on a master page. Note: The fix for the intellisense issue will be in VS 2005 SP1. While the intellisense is lost and the editor reports problems, the application runs just fine. If you want to fix the intellisense problem, see Scott Guthries blog at: http://weblogs.asp.net/scottgu/archive/2006/11/16/gotcha-lost-html-intellisensewithin-asp-net-ajax-controls.aspx c. Press Ctrl+F5 to launch Company.aspx in your browser (or launch the page by right-clicking Company.aspx in the Solution Explorer window and selecting View in Browser). d. Click Factory Tour in the left-nav to display the factory tour page. e. Click Next > a few times and verify that the page doesnt flash as it did before. Note: If your browser is Internet Explorer 6, you may need to refresh the page a time or two before you click Next > to circumvent an IE 6 style-caching bug. Otherwise, some flashing might still be evident. f. Click Flagship Stores to display the factory stores page. g. Click the Burlington | Wrentham | Innsbruck | New York links and verify that the page no longer flashes. h. Close your browser and return to Visual Studio.
3. Add triggers to the

UpdatePanel

a. Did you notice that even though the UpdatePanel eliminated the flashing that occurs when you click the LinkButtons inside it, it didnt eliminate the flashing that occurs when you click the LinkButtons in the left-nav bar? Thats because the left-nav lies outside the UpdatePanel, and by default, an UpdatePanel converts postbacks from the controls inside it into asynchronous AJAX callbacks. But it doesnt, by default, convert postbacks from external controls into callbacks. b. We can fix that by adding triggers to the UpdatePanel. Triggers let you convert postbacks that occur outside an UpdatePanel into AJAX callbacks. Theyre called triggers because they trigger refreshes in the UpdatePanel. Note: To define the triggers, add the markup shown in boldto the UpdatePanel control:
<asp:UpdatePanel ID="CompanyUpdatePanel" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="MeetJakeLink" /> <asp:AsyncPostBackTrigger ControlID="FactoryTourLink" /> <asp:AsyncPostBackTrigger ControlID="FactoryStoresLink" /> <asp:AsyncPostBackTrigger ControlID="CompanyHistoryLink" /> <asp:AsyncPostBackTrigger ControlID="StudentResearchLink" /> </Triggers> <ContentTemplate> <asp:MultiView ID="CompanyMultiView" ActiveViewIndex="0" runat="server"> . .

Page 7 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control Tasks Detailed Steps

. </asp:MultiView> </ContentTemplate> </asp:UpdatePanel>

Note: AsyncPostBackTrigger is one of two trigger types that UpdatePanel supports. It triggers UpdatePanel refreshes by converting postbacks from controls outside the UpdatePanel into asynchronous callbacks. The other trigger type is PostBackTrigger. Its purpose is to allow controls in an UpdatePanelcontrols whose postbacks would otherwise be converted into callbacksto post back. Note: One of the more creative uses for triggers is to trigger periodic refreshes of an UpdatePanel. You can combine an AsyncPostBackTrigger with an ASP.NET AJAX Timer control to accomplish this little feat of magic. c. Launch Company.aspx in your browser. Click the Factory Tour and Flagship Stores links in the left-nav a few times and verify that the flashing has gone away. Note: As before, if youre using IE 6, you might need to refresh the page a time or two before testing the UpdatePanel control. d. Close your browser and return to Visual Studio.
4. Add an

a. Find the following DIV in Company.aspx:

<div class="UpdateProgress"> </div>

UpdateProgress control

b. Add an UpdateProgress control to the DIV, as shown below:

<div class="UpdateProgress"> <asp:UpdateProgress ID="FactoryStoreUpdateProgress" runat="server"> <ProgressTemplate> <asp:Image ID="ProgressImage" ImageUrl="~/Images/ProgressBar.gif" runat="server" /> </ProgressTemplate> </asp:UpdateProgress> </div>

Note: The control declaration you just added references an animated GIF named ProgressBar.gif. That image has been provided for you and is already present in the Web sites Images folder. c. Launch Company.aspx in your browser again and click Flagship Stores. d. Click the Burlington | Wrentham | Innsbruck | New York links as before and verify that each time a link is clicked, a progress bar appears to the right of the links (see below) and disappears about a second later.

Page 8 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control Tasks Detailed Steps

Note: To prevent the UpdateProgress control from appearing and disappearing so quickly that you cant see it, Company.aspx.cs contains the following line of code to induce a short delay each time a link is clicked (depending on your connection speed, if you are still not able to see the progress bar with 1200 delay time you may change it to 12000):
System.Threading.Thread.Sleep(1200); // For demonstration purposes only!

Note: As the comment indicates, the delay is for demonstration purposes only. Obviously, you wouldnt want to do this in a real application! For situations where asynchronous callbacks take a relatively long time to complete, you can embed a <ProgressTemplate> inside an UpdateProgress control to present a Cancel button to the user. You can also use the UpdateProgress controls DisplayAfter property to specify that the cancellation UI should only appear after a specified period of time. Heres a short example that displays a Cancel button after 1 second and cancels the update if the button is clicked:
<asp:UpdateProgress ID="UpdateProgress1" DisplayAfter="1000" runat="server"> <ProgressTemplate> <b>Working...</b> <input type="button" id="cancelButton" onclick="cancelUpdate();" value="Cancel" /> </ProgressTemplate> </asp:UpdateProgress> <script type="text/javascript">

Page 9 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control Tasks Detailed Steps

function cancelUpdate() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack(); } </script>

e. Close your browser and return to Visual Studio.

Page 10 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control

Exercise 3 Adding Partial-page Rendering to Tech.aspx

Scenario
In the next exercise, youll apply the UpdatePanel treatment to Tech.aspx to eliminate the flashing in that page, too. Rather than add one UpdatePanel, youll add four. Youll also learn how to use the UpdatePanel.Update method to programmatically trigger UpdatePanel refreshes. Tasks
1. Add an UpdatePanel

Detailed Steps a. Open Tech.aspx in Visual Studio. b. Tech.aspx contains three MultiView controls. The first encapsulates the header graphic at the top of the page and has an ID equal to HeaderMultiView. Find that MultiView control and wrap an UpdatePanel around it as shown here:
<asp:UpdatePanel ID="HeaderUpdatePanel" runat="server"> <ContentTemplate> <asp:MultiView ID="HeaderMultiView" ActiveViewIndex="0" runat="server"> . . . </asp:MultiView> </ContentTemplate> </asp:UpdatePanel>

to Tech.aspx

c. Launch Tech.aspx in your browser. d. Click the Boards | Boots | Bindings | Softgoods | Bags links a few times and verify that the header graphic doesnt flash as it did before.

Page 11 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control Tasks Detailed Steps

e. Close your browser and return to Visual Studio.

2. Add more

UpdatePanels to Tech.aspx

a. The UpdatePanel eliminated the flashing you experienced earlier, but it introduced a problem of its own: the content elsewhere on the page (for example, the Additional Photos element) no longer updates when you click the Boards | Boots | Bindings | Softgoods | Bags links. Can you figure out why? Note: The reason content outside the UpdatePanel doesnt update is that the Boards | Boots | Bindings | Softgoods | Bags LinkButtons no longer post back to the server. The event handlers for the LinkButtons execute inside the callbacks generated by the UpdatePanel, but the only content returned by the callbacks is the content inside the UpdatePanel. The UpdatePanel uses that content to refresh the portion of the page it encapsulates. b. The first step in fixing the problem is to add an UpdatePanel to the left half of the page underneath the header graphic. That part of the page is rendered by a Repeater control. Open Tech.aspx in Visual Studio and wrap an UpdatePanel around the Repeater:
<asp:UpdatePanel ID="LeftPanelUpdatePanel" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:Repeater ID="TechRepeater" DataSourceID="TechXmlDataSource" Runat="server"> . . . </asp:Repeater> </ContentTemplate> </asp:UpdatePanel>

Note: The UpdateMode=Conditional attribute enables us to programmatically

Page 12 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control Tasks Detailed Steps refresh the UpdatePanel by calling its Update method. If UpdateMode=Always (the default), calling Update on the UpdatePanel throws an exception. c. The next step is to surround the portion of the page where the Additional Photos element resides with an UpdatePanel:
<asp:UpdatePanel ID="AdditionalPhotosUpdatePanel" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:MultiView ID="AdditionalPhotosMultiView" ActiveViewIndex="0" runat="server"> . . . </asp:MultiView> </ContentTemplate> </asp:UpdatePanel>

d. Now do the same for the portion of the page beneath the Additional Photos element:
<asp:UpdatePanel ID="RightPanelUpdatePanel" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:MultiView ID="RightPanelMultiView" ActiveViewIndex="0" runat="server"> . . . </asp:MultiView> </ContentTemplate> </asp:UpdatePanel>

e. Finally, open Tech.aspx.cs and add the following statements to end of the OnNavLinkClicked method to programmatically update the three new UpdatePanels when a nav link is clicked:
LeftPanelUpdatePanel.Update(); AdditionalPhotosUpdatePanel.Update(); RightPanelUpdatePanel.Update();

f. Launch Tech.aspx in your browser and verify that clicking the Boards | Boots | Bindings | Softgoods | Bags links updates the content everywhere on the page and does so without flashing. g. Click the numbered buttons in the Additional Photos element and observe that the flashing has gone away there, too. Can you explain why? h. Close your browser and return to Visual Studio.

Page 13 of 14

ASP.NET AJAX: Part 1 The UpdatePanel Control

Summary
Heres a recap of what you learned in this lab: How to use UpdatePanel controls to eliminate flashing and flickering and perform clean content refreshes in Web pages How to use AsyncPostBackTriggers to force controls outside an UpdatePanel to trigger UpdatePanel updates How to use the UpdatePanel.Update method to programmatically trigger UpdatePanel updates

How to use UpdateProgress controls to indicate that an update is in progress UpdatePanel is the crown jewel of ASP.NET AJAX. It makes partial-page rendering as simple as adding a control to a page. And its just one of several controls in ASP.NET AJAX and the ASP.NET AJAX Control Toolkit that provide handy wrappers around AJAX.

Page 14 of 14