Walkthrough: Creating an Ajax-Enabled Web Site

Article
02/13/2013

This walkthrough creates a basic ASP.NET Web site with a Web page that illustrates some features of Microsoft Ajax that are included when you install Visual Studio. You will build an application that displays pages of employee data from the AdventureWorks sample database. The application uses the UpdatePanel control to refresh only the part of the page that has changed, without the page flash that occurs with a postback. This is referred to as a partial-page update. The sample application also uses the UpdateProgress control to display a status message while the partial-page update is processing.

Prerequisites

To implement the procedures in your own development environment you need:

Visual Studio or Microsoft Visual Web Developer Express.

Note

If you are using Visual Studio, the walkthrough assumes that you selected the Web Development collection of settings when you started Visual Studio the first time. For more information, see How to: Select Web Development Environment Settings.
The AdventureWorks sample database. You can download and install the AdventureWorks database from the Microsoft Download Center. (Search for "SQL Server 2005 Samples and Sample Databases (December 2006)").

Creating a Web Site

If you have already created a Web site in Visual Web Developer (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Studio), you can use that Web site and skip to the next section. Otherwise, create a new Web site and page.

This walkthrough uses a Web site project. You could use a Web application project instead. For information about the difference between these Web project types, see Web Application Projects versus Web Site Projects.

To create a file system Web site

Open Visual Web Developer.
In the File menu, click New Web Site.

The New Web Site dialog box is displayed.
Under Installed Templates, click Visual Basic or Visual C# and then select ASP.NET Web Site.
In the Web location box, select File System, and then enter the name of the folder where you want to keep the pages for your Web site.

For example, type the folder name C:\WebSites.
Click OK.

Visual Studio creates a Web site project that includes prebuilt functionality for layout (a master page, the Default.aspx and About.aspx content pages, and a cascading style sheet), for Ajax (client script files), and for authentication (ASP.NET membership).

Note

In Visual Studio or Microsoft Visual Web Developer Express, the client script files that are included in the project template for an ASP.NET Web site are jQuery script files. You will not use those script files in this walkthrough. Instead, you will use ASP.NET Web server controls that manage client script automatically in order to add Ajax functionality to ASP.NET Web Forms pages. For more information about jQuery, see the jQuery Web site.

Adding an UpdatePanel Control to an ASP.NET Web Page

After you create a Web site, you create an ASP.NET Web page that includes an UpdatePanel control. Before you add an UpdatePanel control to the page, you must add a ScriptManager control. The UpdatePanel control relies on the ScriptManager control to manage partial-page updates.

To create a new ASP.NET Web page

In Solution Explorer, right-click the name of the site and then click Add New Item.

The Add New Item dialog box is displayed.
Under Visual Studio installed templates, select Web Form.
Name the new page Employees.aspx and clear the Place code in separate file check box.
Select the language you want to use.
Click Add.
Switch to Design view.
In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
Drag an UpdatePanel control from the toolbox and drop it beneath the ScriptManager control.

Adding Content to an UpdatePanel Control

The UpdatePanel control performs partial-page updates and identifies content that is updated independently of the rest of the page. In this part of the walkthrough, you will add a data-bound control that displays data from the AdventureWorks database.

To add content to an UpdatePanel control

From the Data tab of the toolbox, drag a GridView control into the editable area of the UpdatePanel control.
In the GridView Tasks menu, click Auto Format.
In the Auto Format panel, under Select a scheme, select Colorful and then click OK.
In the GridView Tasks menu, select <New data source> from the Choose Data Source list.

The Data Source Configuration wizard is displayed.
Under Where will the application get data from, select Database and then click OK.
In the Configure Data Source wizard, for the Choose Your Data Connection step, configure a connection to the AdventureWorks database and then click Next.
For the Configure the Select Statement step, select Specify a custom SQL statement or stored procedure and then click Next.
In the SELECT tab of the Define Custom Statement or Stored Procedures step, enter the following SQL statement:
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
Click Next.
Click Finish.
In the GridView Tasks menu, select the Enable paging check box.
Save your changes, and then press CTRL+F5 to view the page in a browser.

Notice that there is no page flash when you select different pages of data. This is because the page is not performing a postback and updating the whole page every time.

Adding an UpdateProgress Control to the Page

The UpdateProgress control displays a status message while new content for an UpdatePanel control is being requested.

To add an UpdateProgress control to the page

From the AJAX Extensions tab of the toolbox, drag an UpdateProgress control onto the page and drop it beneath the UpdatePanel control.
Select the UpdateProgress control, and in the Properties window, set the AssociatedUpdatePanelID property to UpdatePanel1.

This associates the UpdateProgress control with the UpdatePanel control that you added previously.
In the editable area of the UpdateProgress control, type Getting Employees ... .
Save your changes, and then press CTRL+F5 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 that you entered into the UpdateProgress control.

Adding a Delay to the Sample Application

If your application updates each page of data quickly, you might not see the content of the UpdateProgress control on the page. The UpdateProgress control supports a DisplayAfter property that enables you to set a delay before the control is displayed. This prevents the control from flashing in the browser if the update occurs very fast. By default, the delay is set to 500 milliseconds (.5 second), meaning that the UpdateProgress control will not be displayed if the update takes less than half a second.

In a development environment, you can add an artificial delay to your application to make sure that the UpdateProgress control is functioning as intended. This is an optional step and is only for testing your application.

To add a delay to the sample application

Inside the UpdatePanel control, select the GridView control.
In the Properties window, click the Events button.
Double-click the PageIndexChanged event to create an event handler.
Add the following code to the PageIndexChanged event handler to artificially create a three-second delay:
```
'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)
```
```
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
```
Note

The handler for the PageIndexChanged event intentionally introduces a delay for this walkthrough. In practice, you would not introduce a delay. Instead, the delay would be the result of server traffic or of server code that takes a long time to process, such as a long-running database query.
Save your changes, and then press CTRL+F5 to view the page in a browser.

Because there is now a three-second delay every time that you move to a new page of data, you will be able to see the UpdateProgress control.

Share via