Transcript Creating an ASP.NET AJAX

ASP.NET Ajax
Supplementary Tutorial
Why Use ASP.NET AJAX? - I
ASP.NET AJAX enables you to build rich Web
applications that have many advantages over Web
applications that are completely server-based. ASP.NET
AJAX applications offer:
• Improved efficiency by performing significant parts of a
Web page's processing in the browser.
• Familiar UI elements such as progress indicators,
tooltips, and pop-up windows.
• Partial-page updates that refresh only the parts of the
Web page that have changed.
A very popular example…..
http://www.google.com/ig?hl=en
Why Use ASP.NET AJAX? - II
• Client integration with ASP.NET application services for
forms authentication and user profiles.
• Integration of data from different sources through calls to
Web services.
• A framework that simplifies customization of server
controls to include client capabilities.
• Support for the most popular and generally used browsers,
which includes Microsoft Internet Explorer, Mozilla Firefox,
and Apple Safari.
ASP.Net Ajax Architecture
ASP.NET AJAX Server Controls
• ScriptManager Manages script resources for client components, partialpage rendering, localization, globalization, and custom user scripts. The
ScriptManager control is required in order to use the UpdatePanel,
UpdateProgress, and Timer controls.
• UpdatePanel Enables you to refresh selected parts of the page, instead of
refreshing the whole page by using a synchronous postback.
• UpdateProgress Provides status information about partial-page updates in
UpdatePanel controls.
• Timer Performs postbacks at defined intervals. You can use the Timer
control to post the whole page, or use it together with the UpdatePanel
control to perform partial-page updates at a defined interval.
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.
Creating an ASP.NET AJAX-Enabled
Web Site
Start Visual Studio.
In the File menu, click New Web Site.
The New Web Site dialog box is displayed.
Under Visual Studio installed templates, select
ASP.NET AJAX-Enabled Web Site.
Enter a location and a language (for us it’s C#),
and then click OK.
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.
To create a new ASP.NET Web page - II
 Select the language you want to use (C#).
 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.
To create a new ASP.NET Web page - III
To create a new ASP.NET Web page - IV
Drag an UpdatePanel control from the toolbox and drop it
underneath the ScriptManager control.
To add content to an UpdatePanel
control - I
•
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.
To add content to an UpdatePanel
control - II
•
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.
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 underneath 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.
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:
System.Threading.Thread.Sleep(3000);
A Calendar application
• Create a new page and switch to in Design view.
• In the AJAX Extensions tab of the toolbox,
double-click the ScriptManager control to add it
to the page.
• Double-click the UpdatePanel control to add it to
the page.
• Click inside the UpdatePanel control and then in
the Standard tab of the toolbox, double-click a
Calendar control to add it to the UpdatePanel
control.
Calendar application (contd.)
• Click outside the UpdatePanel control and
then add a second Calendar control to the
page.
• This control will not be part of the
UpdatePanel control.
Calendar Application (contd.)
• Save your changes and then press CTRL+F5 view
the page in a browser.
• Navigate to the previous or next month in the
calendar that is inside the UpdatePanel control.
• The displayed month changes without refreshing
the whole page.
• Navigate to the previous or next month in the
calendar that is outside the UpdatePanel control
• The whole page is refreshed.
Further Reading: Ajax Web Services
• http://www.asp.net/AJAX/Documentation/Liv
e/overview/AsynchronousLayerOverview.aspx
• http://www.asp.net/AJAX/Documentation/Liv
e/tutorials/ASPNETApplicationServicesTutorial
s.aspx
Thank you!