Documentation for: ASP.NET Ajax Version 1

possumneckvegetableSoftware and s/w Development

Jul 4, 2012 (5 years and 1 month ago)


ASP.NET AJAX > Sample ASP.NET AJAX Application[3/1/10 20:07:38]
Preferred Sample Language:

Server Reference
Client Reference
Start > Sample ASP.NET AJAX Application
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
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
menu, click
New Web Site
Sample ASP.NET AJAX Application
ASP.NET AJAX and JavaScript
Extending JavaScript with ASP.NET AJAX
Creating Custom Client Script in ASP.NET
Dynamically Assigning ASP.NET AJAX Script
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
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
Using the UpdatePanel Control with User
Using the UpdatePanel Control with a Web
Customizing Error Handling for UpdatePanel
Animating UpdatePanel Controls
Canceling an Asynchronous Postback
Giving Precedence to a Specific Asynchronous
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
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.
ASP.NET AJAX > Sample ASP.NET AJAX Application[3/1/10 20:07:38]
New Web Site
dialog box is displayed.
3. Under
Visual Studio installed templates
, select
ASP.NET AJAX-Enabled Web
4. Enter a location and a language, and then click
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
New Item
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
check box.
4. Select the language you want to use.
5. Click
6. Switch to Design view.
7. In the
AJAX Extensions
tab of the toolbox, double-click the
control to add it to the page.
8. Drag an
UpdatePanel control from the toolbox and drop it underneath the
ScriptManager control.
Creating an Extender Control
Adding Client Capabilities to a Web Server
Creating a Client Component Class Using the
Prototype Model
Defining Custom Component Properties and
Raising PropertyChanged Events
Releasing Component Resources
ASP.NET AJAX > Sample ASP.NET AJAX Application[3/1/10 20:07:38]
Adding Content to an UpdatePanel Control
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
To add content to an UpdatePanel control
1. From the
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
and then
4. In the
GridView Tasks
menu, select
<New data source>
from the
Choose Data
Data Source Configuration
wizard is displayed.
5. Under
Where will the application get data from
, select
and then
6. In the
Configure Data Source
wizard, for the
Choose Your Data Connection
step, configure a connection to the AdventureWorks database and then
7. For the
Configure the Select Statement
step, select
Specify a custom SQL
statement or stored procedure
and then click
8. In the
tab of the
Define Custom Statement or Stored Procedures
enter the following SQL statement:
9. Click
10. Click
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
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY
LastName, FirstName
ASP.NET AJAX > Sample ASP.NET AJAX Application[3/1/10 20:07:38]
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
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
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
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
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
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.
ASP.NET AJAX > Sample ASP.NET AJAX Application[3/1/10 20:07:38]
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
5. Save your changes, and then press CTRL+F5 to view the page in a
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

See Also
Introduction to the UpdatePanel Control
Introduction to the UpdateProgress Control
The UpdatePanel Control
The UpdateProgress Control
Copyright © 2005 - 2007 Microsoft Corporation. All rights reserved.
'Include three second delay for example only.