asp.net ajax supplementary tutorial. why use asp.net ajax? - i asp.net ajax enables you to build...
TRANSCRIPT
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.
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, partial-page 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/Live/overview/AsynchronousLayerOverview.aspx
• http://www.asp.net/AJAX/Documentation/Live/tutorials/ASPNETApplicationServicesTutorials.aspx
Thank you!