| Gellenbeck | Wikis | CS 352 | CS 352 Wiki |

Notes Index

ASP.NET AJAX

Microsoft has made available ASP.NET AJAX (previously referred to as Atlas) to provide a way for developers to implement Ajax-based applications within the Visual Studio 2005, .NET 2.0 design space.

In Microsoft's ASP.NET AJAX Overview, included are both client-side and server-side components which can update data on the web page without a complete reload of the page.

ASP.NET AJAX Server Controls

ASP.NET AJAX server controls produce both server and client code that integrates together to produce rich client behavior. When you add an AJAX control to an ASP.NET Web page, the page automatically sends supporting client script to the browser for AJAX functionality. You can provide additional client code to customize the functionality of a control, but this is not required.

The following list describes the most frequently used 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.

Sample Ajax Application

Microsoft's MSDN site has a Sample AJAX Application we can use to become familiar with ASP.NET Ajax server controls

Hands-on Activity - use an UpdatePanel control

1. Create a new web site named Day 19
2. Download and save in your App_Data folder the MS Access Database file Northwind.mdb
3. Add an AJAX Extensions ScriptManager control to the page
4. Add an AJAX Extensions UpdatePanel underneath the ScriptManager
   • Inside the UpdatePanel add a ContentTemplate to hold the panel's content
   • Add a GridView contro inside the ContentTemplate
     • Use the Northwind.mdb database file as the data source and get the FirstName, LastName from the Employees table ordered by LastName
     • Enable Paging
   • Test you page by viewing it in the browser

UpdateProgress Control

The UpdateProgress control displays a status message while new content for an UpdatePanel control is being requested.

Hands-on Activity - use an UpdateProgress control

1. Add an UpdateProgress control underneath the UpdatePanel
   • Set its AssociatedUpdatePanelId to UpdatePanel1
   • Add a ProgressTemplate inside the UpdateProgress control
   • Add the text "Updating Table ..."

Partial Page Rendering

The updating of the GridView is being done asynchronously, but it is hard to tell as we only have one user-initiated event on the page. To use multiple UpdatePanels on a page with Partial Page Rendoring, add the attribute EnablePartialRendering="true" to the asp:ScriptManager control

Hands-on Activity - Partial Page Rendering

1. Set the EnablePartialRendering attribute to "true" in the asp:ScriptManager control
2. Add two more UpdatePanels to your page
3. Inside the ContentTemplate control, add simple content to display the current time

1. Add buttons to trigger an event to set the Literal control's text to DateTime.Now.ToLongTimeString();
2. Test your page in the browser

Triggers

Triggers allow us to associate an event with an UpdatePanel

Hands-on Activity - Add Triggers

1. Add triggers for you two button click events to your UpdatePanels

Time Control

The ASP.NET AJAX Timer control performs postbacks at defined intervals. If you use the Timer control with an UpdatePanel control, you can enable partial-page updates at a defined interval. You can also use the Timer control to post the whole page.