ASP.net Ajax Sample ASP.net Ajax Application

ASP.NET AJ AX > Sample ASP.NET AJ AX Application
http://www.asp.net/Ajax/Documentation/Live/Tutorials/CreateSimpleAJ AXApplication.aspx[3/1/10 20:07:38]
Preferred Sample Language: C#







Overview Tutorials Server Reference Client Reference ASP.NET AJ AX Home
Start > Sample ASP.NET AJ AX Application
Sample ASP.NET AJ AX Application
Introduction
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:
Overview
ASP.NET AJAX Roadmap
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 I t 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 AJ AX-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 AJ AX-enabled Web Site
1. Start Visual Studio.
2. In the Fi l e menu, click New Web Si t e.
Tutorials
Sample ASP.NET AJ AX Application
ASP.NET AJ AX and J avaScript
Extending J avaScript with ASP.NET AJ AX
Creating Custom Client Script in ASP.NET
AJ AX
Dynamically Assigning ASP.NET AJ AX Script
References
Globalizing a Date by Using Client Script
Embedding a J avaScript File as a Resource in
an Assembly
Embedding Localized Resources for a
J avaScript File
Adding Localized Resources to a J avaScript
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 AJ AX Extensibility
Creating Custom ASP.NET AJ AX Non-Visual
Client Components
Creating Custom ASP.NET AJ AX 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.
C#
ASP.NET AJ AX > Sample ASP.NET AJ AX Application
http://www.asp.net/Ajax/Documentation/Live/Tutorials/CreateSimpleAJ AXApplication.aspx[3/1/10 20:07:38]
The New Web Si t e dialog box is displayed.
3. Under Vi sual St udi o i nst al l ed t empl at es, select ASP. NET AJ AX- Enabl ed Web
Si t e.
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 I t em.
The Add New I t emdialog box is displayed.
2. Under Vi sual St udi o i nst al l ed t empl at es, select Web For m.
3. Name the new page Employees.aspx and clear the Pl ace code i n separ at e
f i l e check box.
4. Select the language you want to use.
5. Click Add.
6. Switch to Design view.
7. In the AJ AX Ext ensi ons tab of the toolbox, double-click the ScriptManager
control to add it to the page.
8. Drag an UpdatePanel control from the toolbox and drop it underneath the
ScriptManager control.
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
ASP.NET AJ AX > Sample ASP.NET AJ AX Application
http://www.asp.net/Ajax/Documentation/Live/Tutorials/CreateSimpleAJ AXApplication.aspx[3/1/10 20:07:38]
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 Dat a tab of the toolbox, drag a GridView control into the editable
area of the UpdatePanel control.
2. In the Gr i dVi ew Tasks menu, click Aut o For mat .
3. In the Aut o For mat panel, under Sel ect a scheme, select Col or f ul and then
click OK.
4. In the Gr i dVi ew Tasks menu, select <New dat a sour ce> from the Choose Dat a
Sour ce list.
The Dat a Sour ce Conf i gur at i on wizard is displayed.
5. Under Wher e wi l l t he appl i cat i on get dat a f r om, select Dat abase and then
click OK.
6. In the Conf i gur e Dat a Sour ce wizard, for the Choose Your Dat a Connect i on
step, configure a connection to the AdventureWorks database and then
click Next .
7. For the Conf i gur e t he Sel ect St at ement step, select Speci f y a cust omSQL
st at ement or st or ed pr ocedur e and then click Next .
8. In the SELECT tab of the Def i ne Cust omSt at ement or St or ed Pr ocedur es step,
enter the following SQL statement:
9. Click Next .
10. Click Fi ni sh.
11. In the Gr i dVi ew Tasks menu, select the Enabl e pagi ng check box.
12. Save your changes, and then press CTRL+F5 to view the page in a
SELECT Fi r st Name, Last Name FROM HumanResour ces. vEmpl oyee ORDER BY
Last Name, Fi r st Name
ASP.NET AJ AX > Sample ASP.NET AJ AX Application
http://www.asp.net/Ajax/Documentation/Live/Tutorials/CreateSimpleAJ AXApplication.aspx[3/1/10 20:07:38]
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 AJ AX Ext ensi ons 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 Updat ePanel 1.
This associates the UpdateProgress control with the UpdatePanel control
that you added previously.
3. In the editable area of the UpdateProgress control, type Get t i ng Empl oyees
. . . .
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 Event s 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:
CS
VB
/ / I ncl ude t hr ee second del ay f or exampl e onl y.
Syst em. Thr eadi ng. Thr ead. Sl eep( 3000) ;
ASP.NET AJ AX > Sample ASP.NET AJ AX Application
http://www.asp.net/Ajax/Documentation/Live/Tutorials/CreateSimpleAJ AXApplication.aspx[3/1/10 20:07:38]
note
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 I t button.

See Also
Overview
ASP.NET AJAX Roadmap
Introduction to the UpdatePanel Control
Introduction to the UpdateProgress Control
The UpdatePanel Control
The UpdateProgress Control
Copyright © 2005 - 2007 Microsoft Corporation. All rights reserved.
' I ncl ude t hr ee second del ay f or exampl e onl y.
Syst em. Thr eadi ng. Thr ead. Sl eep( 3000)