Tech Brief

Key AJAX Control

Making your Web apps more interactive is easier than you think.

Asynchronous JavaScript and XML (AJAX) is a set of techniques for adding greater interactivity to Web pages. When used together, these longstanding technologies enable the transfer of data between client and server without the necessity of using HTTP POST and GET. An AJAX-enabled ASP.NET page can move small amounts of data back and forth between the browser and the server without a page refresh. The result is a response time that, in some cases, is almost the equivalent of a rich client application, but with the reach of a Web app.

It's a great concept, but one that you probably approach with some trepidation. You might think that this requires the re-write of your ASP.NET pages with hundreds or thousands of lines of JavaScript with embedded XML. Under most circumstances you would be right, but Microsoft released a toolkit called ASP.NET AJAX (previously code-named "Atlas") that substantially eases the use of AJAX in existing ASP.NET apps.

ASP.NET AJAX can be downloaded for Visual Studio 2005 at 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.

UpdatePanel Control
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.

ScriptManager Control
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.

AJAX 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.

About the Author

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 level.

comments powered by Disqus
Upcoming Events

.NET Insight

Sign up for our newsletter.

I agree to this site's Privacy Policy.