Using the AJAX library in ASP.NET Web Forms

Creating AJAX Enabled Web Forms

Enables increased user interactivity as app requires fewer page refreshes.

AJAX = platform independent technology.

Can add to any web app - not specific to ASP.NET.

ASP.NET Components related to AJAX

Uses and benefits of AJAX

Rich user experience than all-server side web application.

AJAX server controls

Provide partial page updates and server-to-client progress updates.

Inherit from System.Web.UI.Control class.

ScriptManager and ScriptManagerProxy Controls

Each AJAX page requires instance of ScriptManager.

Pushes AJAX library to client when page requested.

Manages partial pages updates, progress indicators, etc.

Has no visual representation.

By default EnablePartialRendering property is true, set to false to disable partial page updates.

Used to register custom scripts with AJAX library

Often need AJAX support in user controls, presents a problem as only one instance of ScriptManager can exist on a page. Solution is to use ScriptManagerProxy in user controls and child pages whilst MasterPage holds the ScriptManager.

UpdatePanel Control

Defines area of page that post back independent of rest of page.

Partial page updates give illusion of running client side, but actually small asynchronous server postbacks. ScriptManager manages this communication.

Acts as container for other controls. These inner controls will be managed at server as partial-page updates.

Controlling partial-page updates

Each UpdatePanel can act independently or in co-ordinated fashion.

May have controls that cause standard postbacks on same page as those causing asynchronous.

UpdatePanel properties for controlling when postback occurs:

Can explicitly define controls that will trigger update to UpdatePanel. Controls can be inside, or outside of UpdatePanel. Update will be triggered for both Conditional and Always modes. Within UpdatePanel markup define Trigger element that identifiers trigger control and its event that causes postback, e.g.:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<asp:AsyncPostBackTrigger ControlID#"ButtonSearch" EventName="Click"/>


Error Handling

Write handler for the AsyncPostBackError event on ScriptManager control.

Can use AsyncPostBackErrorMessage property of ScriptManager to display error message to user when partial-page update error occurs.

UpdateProgress Control

Provides info to user during partial-page update, e.g. animated GIF to indicate system is processing.

Place within the ContentTemplate element of UpdatePanel.

Content within ProgressTemplate element could be image, text, or other HTML content that will be shown whilst partial-page updated is executing.

Can also associate with UpdatePanel via the AssociatedUpdatePanelId property - thus use single UpdateProgress Control to handle multiple UpdatePanels.

By default appears .5 second after partial page update starts. Can use DisplayAfter property to specify a different number of milliseconds to delay appearance.

Can abort async postback processing by adding Cancel button to the UpdateProgress control and from its event handler calling the abortPostBack method of the PageRequestManager class.

Timer Control

Update portions of page on periodic basis, e.g. for advertisement, stock ticker, etc.

Can add to ContentTemplate of UpdatePanel, timer will then trigger partial-page update of UpdatePanel. Once postback processing complete the timer is reset.

Can also be defined outside of UpdatePanel and user Trigger control within UpdatePanel to form the association. Outside of an UpdatePanel the timer is reset the moment it is raised. If another timed interval elapses whilst postback is still being processed then first postback is cancelled.