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