Documentation for: ASP.NET Ajax Version 1.0

This documentation is for a previous version. For the current released version, see the ASP.NET Ajax documentation on MSDN.








Skip Navigation Links.
Sample ASP.NET AJAX Application
ASP.NET AJAX and JavaScript
Extending JavaScript with ASP.NET AJAX
Creating Custom Client Script in ASP.NET AJAX
Dynamically Assigning ASP.NET AJAX Script References
Globalizing a Date by Using Client Script
Embedding a JavaScript File as a Resource in an Assembly
Embedding Localized Resources for a JavaScript File
Adding Localized Resources to a JavaScript File
Creating Custom Client Events
The UpdatePanel Control
Introduction to the UpdatePanel Control
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls
Using the UpdatePanel Control with Data-Bound Controls
Using the UpdatePanel Control with Master Pages
Using the UpdatePanel Control with User Controls
Using the UpdatePanel Control with a Web Service
Customizing Error Handling for UpdatePanel Controls
Animating UpdatePanel Controls
Canceling an Asynchronous Postback
Giving Precedence to a Specific Asynchronous Postback
Working with PageRequestManager Events
The UpdateProgress Control
Introduction to the UpdateProgress Control
Programming UpdateProgress Controls in Client Script
The Timer Control
Introduction to the Timer Control
Using the Timer Control with Multiple UpdatePanel Controls
ASP.NET Application Services
Using Forms Authentication
Using Profile Information
Web Services
Exposing Web Services to Client Script
Calling Web Services from Client Script
ASP.NET AJAX Extensibility
Creating Custom ASP.NET AJAX Non-Visual Client Components
Creating Custom ASP.NET AJAX Client Controls
Creating an Extender Control
Adding Client Capabilities to a Web Server Control
Creating a Client Component Class Using the Prototype Model
Defining Custom Component Properties and Raising PropertyChanged Events
Releasing Component Resources

Sample ASP.NET AJAX Application


This tutorial creates a basic sample application that uses features of Microsoft ASP.NET AJAX. You can read more about what ASP.NET AJAX is, what technical issues it is designed to solve, and what its important components are in the following introductory ASP.NET AJAX documents:

In this tutorial 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.

You can see the code in action in this tutorial by clicking the Run It button. To implement the procedures in your own development environment you need:

  • Microsoft Visual Studio 2005 or Microsoft Visual Web Developer Express Edition.

  • The latest release of Microsoft ASP.NET AJAX installed and configured. For more information, see Installing ASP.NET AJAX.

  • An ASP.NET AJAX Web site.

  • 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 an ASP.NET AJAX-Enabled Web Site

You can create ASP.NET AJAX-enabled Web sites in Visual Studio by using the template installed with ASP.NET AJAX.

To create an ASP.NET AJAX-enabled Web Site

  1. Start Visual Studio.

  2. In the File menu, click New Web Site.

    The New Web Site dialog box is displayed.

  3. Under Visual Studio installed templates, select ASP.NET AJAX-Enabled Web Site.

  4. Enter a location and a language, and then click OK.

Adding an UpdatePanel Control to an ASP.NET Web Page

After you create an AJAX-enabled 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

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

    The Add New Item dialog box is displayed.

  2. Under Visual Studio installed templates, select Web Form.

  3. Name the new page Employees.aspx and clear the Place code in separate file check box.

  4. Select the language you want to use.

  5. Click Add.

  6. Switch to Design view.

  7. In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.

    UpdatePanel Tutorial
  8. Drag an UpdatePanel control from the toolbox and drop it underneath the ScriptManager control.

    UpdatePanel Tutorial

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 tutorial, you will add a data-bound control that displays data from the AdventureWorks database.

To add content to an UpdatePanel control

  1. From the Data tab of the toolbox, drag a GridView control into the editable area of the UpdatePanel control.

  2. In the GridView Tasks menu, click Auto Format.

  3. In the Auto Format panel, under Select a scheme, select Colorful and then click OK.

  4. In the GridView Tasks menu, select <New data source> from the Choose Data Source list.

    The Data Source Configuration wizard is displayed.

  5. Under Where will the application get data from, select Database and then click OK.

  6. In the Configure Data Source wizard, for the Choose Your Data Connection step, configure a connection to the AdventureWorks database and then click Next.

  7. For the Configure the Select Statement step, select Specify a custom SQL statement or stored procedure and then click Next.

  8. 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
  9. Click Next.

  10. Click Finish.

  11. In the GridView Tasks menu, select the Enable paging check box.

  12. 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

  1. From the AJAX Extensions tab of the toolbox, drag an UpdateProgress control onto the page and drop it underneath the UpdatePanel control.

  2. 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.

  3. In the editable area of the UpdateProgress control, type Getting Employees ... .

  4. 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

  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.

  4. Add the following code to the PageIndexChanged event handler to artificially create a three-second delay:


    //Include three second delay for example only.


    'Include three second delay for example only.

    The handler for the PageIndexChanged event intentionally introduces a delay for this tutorial. 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.

  5. 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.

    To see the full example in action, click the Run It button.