Key AJAX Control
Making your Web apps more interactive is easier than you think.
- By Peter Varhol
It's a great concept, but
ASP.NET AJAX can be downloaded for Visual Studio 2005 at http://tinyurl.com/ypqcwd. It's also an integrated part of Visual Studio 2008, so if you've downloaded and started using this new IDE, you're all set.
A key ASP.NET AJAX control is the UpdatePanel. The UpdatePanel control serves to provide existing ASP.NET pages with AJAX functionality but with no additional code. It works by specifying regions of an ASP.NET page that can be updated without refreshing the entire page. It's ideal for taking existing pages and turning them into AJAX pages.
You can use the UpdatePanel to wrap a portion of your existing ASP.NET page. The portion you choose is likely to be some data that updates frequently, and that seems slow because the entire page refreshes. The UpdatePanel control then takes what would normally be a post-back and turns it into an XML call over HTTP. If an end user clicks on a button, changes data, sorts the data grid within the bounds of the UpdatePanel, or does other things that would normally cause a full page refresh, the action is performed much faster.
The namespace for the UpdatePanel class is System.Web.UI. Controls can be added declaratively at design time or programmatically as a result of a runtime action. In addition to putting an UpdatePanel control directly on a page, you can use UpdatePanel controls inside user controls, or on master and content pages.
If the UpdateMode property of the UpdatePanel control
is set to Always, the UpdatePanel control's content is updated on every postback that originates from the page. This includes postbacks from controls that are inside other UpdatePanel controls and postbacks that are not inside UpdatePanel controls.
If the property is set to Conditional, the UpdatePanel control's content is updated as follows:
- When you explicitly call the Update method.
- It's nested inside another UpdatePanel control and the parent control is updated.
- A trigger using the Triggers property of the UpdatePanel control is executed.
- The ChildrenAsTriggers property is set to true and a child UpdatePanel control executes a postback.
- In practice, you'll probably find that setting the UpdateMode property to Always is the safe approach and doesn't cause a noticeable performance lag on the page.
An ASP.NET AJAX page must include one instance of the ScriptManager control, which is a server control that makes script resources available to the browser. This control registers the script for the Microsoft AJAX Library for the page. This enables client-side scripts to support features such as partial-page rendering and Web-service calls. When a page contains an UpdatePanel control, the ScriptManager control manages partial-page rendering in the browser by working with the page lifecycle to update the data inside UpdatePanel controls.
[click image for larger view]
You can use multiple UpdatePanel controls to update different page regions independently. If you have multiple buttons, data input and display panels, grids, or other ASP.NET controls, you can put an UpdatePanel around each and have them operate independently of one another. When a page with multiple UpdatePanel controls is first called and rendered, all content within these controls is updated and sent to the browser. After the initial rendering, those controls are updated individually based on changes to their content.
So put an UpdatePanel control on your existing ASP.NET page. You'll find that the control you wrapped in it will update independently of the rest of the page, and much more quickly. With that one action, you're well on your way to using ASP.NET AJAX to make your Web app more responsive and natural to end users.
Peter Varhol is the executive editor,
reviews of Redmond magazine and has more than 20 years of experience as a software
developer, software product manager and technology writer. He has graduate degrees
in computer science and mathematics, and has taught both subjects at the university