Resources

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

  • Microsoft AJAX Library - JavaScript files to make client-side JavaScript easier. Provides support for classes, namespaces, event handling, data types, etc. Combines JavaScript and DHTML. Library used by AS{.NET and AJAX Control Toolkit.
  • ASP.NET AJAX server controls - server controls that when used enable partial-page updates, provide progress indication to server and periodically update portions of pages.
  • jQuery - code library to aid writing client-side scripts and AJAX applications
  • AJAX Control Toolkit - community created and supported controls
  • Client-side web service support - support for calling web-services asynchronously using JavaScript Object Notation (JSON) serialisation and XML
  • ASP.NET standard controls - ASP.NET controls make use of client side JavaScript.

Uses and benefits of AJAX

Rich user experience than all-server side web application.

  • Partial page updates - can define areas of page to post-back and update independently from rest of page. Only updated content refreshed when request completes. Ensure user stays within their current context. Provides users with feeling they are interacting with application (and not server).
  • Client-side processing - immediate feedback and responsiveness to users. Can enable functionality such as collapsible page areas, tabs, data sorting, etc.
  • Desktop-like UI - AJAx provides user controls such as modal dialogue boxes, progress indicators, masked edit boxes, tool tips, etc.
  • Progress indication - can track server side progress and provide updates to user.
  • Performance and high scale - increased performance and scalability by processing portions of page on client.
  • Web service calls - call back to server from client script and show results to user (by partial page updates)
  • Cross browser support - JavaScript, AJAX and jQuery supported on multiple platforms.

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:

  • UpdateMode
  • Always - content of UpdatePanel updated on every postback, including those generated by another UpdatePanel or standard page postback
  • Conditional - indicates update to UpdatePanel conditional on something else on page, e.g. have nested UpdatePanels with inner panel having Conditional UpdateMode then it will be updated only when parent UpdatePanel causes a postback. Can also explicitly call its update method from server-side code,
  • ChildrenAsTriggers - if UpdateMode is Conditional then (by default) nested UpdatePanel controls will not cause update to its parent. Change this behaviour by setting outer UpdatePanel ChildrenAsTriggers property to true, then any updates triggered by nested UpdatePanel will also update the parent UpdatePanel.

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">
	<Triggers>
		<asp:AsyncPostBackTrigger ControlID#"ButtonSearch" EventName="Click"/>
	</Triggers>

	<ContentTemplate>
		...
	</ContentTemplate>
</asp:UpdatePanel>

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.

Downloads