1. ASP.NET Ajax Supplementary Tutorial

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

3. http://www.google.com/ig?hl=en A very popular example…..

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

5. ASP.Net Ajax Architecture

6. 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. ScriptManager UpdatePanel UpdateProgressTimer UpdatePanel Enables you to refresh selected parts of the page, instead of refreshing the whole page by using a synchronous postback. UpdatePanel UpdateProgress Provides status information about partial-page updates in UpdatePanel controls. UpdateProgress UpdatePanel 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. Timer UpdatePanel

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

8. 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 its C#), and then click OK.

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

10. 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.ScriptManager

11. To create a new ASP.NET Web page - III

12. To create a new ASP.NET Web page - IV Drag an UpdatePanel control from the toolbox and drop it underneath the ScriptManager control.UpdatePanelScriptManager

13. 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.GridViewUpdatePanel 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 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.

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

15. 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.UpdateProgressUpdatePanel Select the UpdateProgress control, and in the Properties window, set the AssociatedUpdatePanelID property to UpdatePanel1.UpdateProgress This associates the UpdateProgress control with the UpdatePanel control that you added previously.UpdateProgressUpdatePanel In the editable area of the UpdateProgress control, type Getting Employees....UpdateProgress 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. UpdateProgress

16. To add a delay to the sample application Inside the UpdatePanel control, select the GridView control.UpdatePanelGridView In the Properties window, click the Events button. Double-click the PageIndexChanged event to create an event handler.PageIndexChanged Add the following code to the PageIndexChanged event handler to artificially create a three-second delay:PageIndexChanged System.Threading.Thread.Sleep(3000);

17. 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.ScriptManager Double-click the UpdatePanel control to add it to the page.UpdatePanel 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.UpdatePanel CalendarUpdatePanel

19. Calendar application (contd.) Click outside the UpdatePanel control and then add a second Calendar control to the page.UpdatePanelCalendar This control will not be part of the UpdatePanel control. UpdatePanel

21. 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.UpdatePanel The displayed month changes without refreshing the whole page. Navigate to the previous or next month in the calendar that is outside the UpdatePanel controlUpdatePanel The whole page is refreshed.

22. Further Reading: Ajax Web Services http://www.asp.net/AJAX/Documentation/Liv e/overview/AsynchronousLayerOverview.aspx http://www.asp.net/AJAX/Documentation/Liv e/overview/AsynchronousLayerOverview.aspx http://www.asp.net/AJAX/Documentation/Liv e/tutorials/ASPNETApplicationServicesTutorial s.aspx http://www.asp.net/AJAX/Documentation/Liv e/tutorials/ASPNETApplicationServicesTutorial s.aspx

23. Thank you!