How To: Improve User Experience with AJAX

J.D. Meier, Alex Homer, David Hill, Jason Taylor, Prashant Bansode, Lonnie Wall, Rob Boucher Jr, Akshay Bogawat.

Applies To

  • Visual Studio 2008
  • ASP.NET 3.5

Summary

This How To article shows you how to improve the user experience by using Microsoft AJAX to implement partial page refresh. This technique provides a more responsive and usable user interface for ASP.NET applications than the use of the default ASP.NET full page refresh mechanism.

Contents

  • Objectives
  • Overview
  • Summary of Steps
  • Step 1 – Create an ASP.NET AJAX-Enabled Web Site
  • Step 2 – Add an UpdatePanel Control to an ASP.NET Web Page
  • Step 3 – Add Content to an UpdatePanel Control
  • Step 4 – Add an UpdateProgress Control to the Page
  • Step 5 – Add a Test Delay to the Sample Application
  • Additional Resources

Objectives

  • Learn how to implement partial page refresh using ASP.NET AJAX.
  • Learn how to use the UpdatePanel control to implement partial page refresh.
  • Learn how to use the UpdateProgress control to provide progress feedback.

Overview

Create an AJAX enabled Web site using the New Project wizard. After you create your site, add an UpdatePanel control and populate it with the content that will be refreshed. Use an UpdateProgress control to show your users the state of the refresh activity.

Summary of Steps

  • Step 1 – Create an ASP.NET AJAX-Enabled Web Site
  • Step 2 – Add an UpdatePanel Control to an ASP.NET Web Page
  • Step 3 – Add Content to an UpdatePanel Control
  • Step 4 – Add an UpdateProgress Control to the Page
  • Step 5 – Add a Test Delay to the Sample Application

Step 1 – Create an ASP.NET AJAX-Enabled Web Site

In this step, you create a Web site that can host ASP.NET AJAX controls.
  1. Start Visual Studio 2008.
  2. Open the File menu, point to New and click Project….
  3. In the Project Types list of the New Project dialog box, expand the language of your choice and select Web.
  4. In the list of Visual Studio installed templates, select ASP.NET Web Application.
  5. Type a name for the project and select a location, then click OK.

This creates a new Web application project containing a single ASP.NET page named Default.aspx. You can host AJAX controls in this page.

Step 2 – Add an UpdatePanel Control to an ASP.NET Web Page

In this step you add the UpdatePanel control to host the content that will be refreshed.
  1. Open the Default.aspx page in design mode in the Visual Studio editor.
  2. Drag a ScriptManager control from the AJAX Extensions section of the Toolbox onto the page.
  3. Drag an UpdatePanel control from the AJAX Extensions section of the Toolbox onto the page below the ScriptManager control.

The ScriptManager is responsible for managing the client script for ASP.NET AJAX pages. It registers the appropriate client-side script for AJAX library into the page. * UpdatePanel* allows to refresh only selected parts of page instead of full postback.

Step 3 – Add Content to an UpdatePanel Control

In this step you add content to the UpdatePanel control that you want to refresh without refreshing the complete page.
  1. Switch to Source view of the Web page and add the following code inside the <asp:UpdatePanel> element.
<ContentTemplate></ ContentTemplate>
  1. Drag a GridView control from the Data tab of the toolbox into the editable area of the ContentTemplate element.
  2. In the GridView Tasks menu, click Auto Format, select Colorful in the Select a scheme list, and then click OK. (If you cannot see the GridView Tasks menu, click on the GridView control to select it and then click on the arrow indicator that appears at the top right).
  3. Open the GridView Tasks menu again and select <New data source…> in the Choose Data Source drop-down list.
  4. In the Data Source Configuration wizard, select Database in the “Where will the application get data from” list and then click OK.
  5. In the Add Connection dialog, type .\SQLExpress (or the name of your SQL Server instance) in the Server name text box and open the “Select or enter a database name” drop-down list. Select a database from the list (use the AdventureWorks database if it is available) and then click OK.
  6. In the Data Source Configuration wizard, click Next twice to get to the Configure the Select Statement step. Select a table from the database, set the check box marked with an asterisk () to select all columns of the table, then click Next*.
  7. Click Test Query to ensure that you have a valid connection and query statement, then click Finish.
  8. In the GridView Tasks menu, select the “Enable paging” and “Enable sorting” check boxes.
  9. Press F5 or click the Run icon in the toolbar to view the page in a browser.

Notice that there is no page flash when you select different pages of data or change the sort order by clicking the column headings. This is because the page is not performing a postback and updating the complete page every time.

Step 4 – Add an UpdateProgress Control to the Page

In this step you add the UpdateProgress control to the page so that you can provide feedback to the user.
  1. Drag an UpdateProgress control from the AJAX Extensions tab of the toolbox and drop it inside the UpdatePanel control. (If you place it outside the UpdatePanel control, you will see an error message when you run the page).
  2. Click on the UpdateProgress control and add the following element inside the UpdateProgress control:
<ProgressTemplate>Please wait...</ProgressTemplate>
  1. Press F5 or click the Run icon in the toolbar to view the page in a browser.

If there is a delay while the page runs the SQL query and returns the data, the UpdateProgress control displays the message you entered until the partial page refresh occurs. However, you may not see this at this stage because the local query runs very quickly.

Step 5 – Add a Test Delay to the Sample Application

In this step you temporarily add a delay to the application so you can test the UpdateProgress control and see it in action. Before deployment, remove this delay.
  1. Inside the UpdatePanel control, select the GridView control.
  2. In the Properties window, click the Events button.
  3. Double-click the PageIndexChanged event to create an event handler, and add the following code to it to create an artificial three-second delay:
// Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
  1. In the Properties window, double-click the Sorted event to create an event handler, and add the same code shown in the previous step.
  2. Press F5 or click the Run icon in the toolbar to view the page in a browser. Click the column headings to sort the rows, and switch from one page of rows to another.

Because there is now a three-second delay every time that you move to a new page of data in the GridView or change the sort order, you will be able to see the contents of the UpdateProgress control. If you view the source of the page in your browser, you will see the JavaScript code that uses the ASP.NET AJAX library to perform the partial page refresh, and the content of the UpdateProgress control - which is hidden using CSS until a partial page refresh occurs.

Additional Resources

Last edited Dec 17, 2008 at 7:52 PM by prashantbansode, version 1

Comments

No comments yet.