Steve C. Orr

Software Engineer, Web Developer, Database Designer
 
  

 

















































ASP.NET VERSIONS: 2.x

Introduction to ASP.NET AJAX

Create Rich User Interfaces with Client Side Callbacks, AJAX style.

By Steve C. Orr

Most knowledgeable developers agree that ASP.NET 2.0 is a truly great product. Its server-centric approach allows developers to use ASPX pages to declare pages, controls, and data sources, and bind them all together in highly useful ways with little or no code.

Most knowledgeable developers also agree that ASP.NET 2.0’s server-centric approach is also its greatest weakness. The main reason is that it requires frequent postbacks to do even the most trivial things — unless you’re willing to get your hands dirty with custom client-side JavaScript code, XmlHttp, client-side callbacks, cross-browser incompatibilities, and other time consuming complications. In a world where the term “Web 2.0” gains new meaning and strength with every day that passes, this server-centric flaw is becoming ever more glaring.

That's where ASP.NET AJAX comes in.

ASP.NET: The Next Generation

What is ASP.NET AJAX? It's a lot of things. One of the most hyped capabilities of ASP.NET AJAX is the built-in AJAX support that makes postbacks virtually obsolete; but ASP.NET AJAX is much more than that. It is a layer of server-side and client-side libraries that extend ASP.NET 2.0 to provide a richer client experience for end users. Developers who are comfortable with JavaScript will find a rich client-side library at their disposal that encapsulates such sticky issues as cross-browser incompatibilities and functional mismatches between JavaScript capabilities and the .NET Framework. ASP.NET AJAX's extensible framework allows developers to create custom code and controls that take advantage of its cutting-edge capabilities.

ASP.NET AJAX seamlessly supports Internet Explorer, Firefox, and Safari. For now, Opera is left out in the cold, but I happen to know the ASP.NET AJAX team secretly wants to add support for it.

After downloading and installing the free version 1.0 of ASP.NET AJAX from http://ajax.asp.net you can get started with development right away. When creating a new Web application in Visual Studio 2005, you’ll see a new ASP.NET AJAX web site template. When you choose this template it will put some ASP.NET AJAX-related items into the web.config file. If you’ve got an existing Web application to which you’d like to add ASP.NET AJAX capabilities, you can add these web.config sections manually in any existing Web application.

The New Server-side Controls of ASP.NET AJAX

ASP.NET AJAX currently comes with a variety of new controls (see Figure 1). The ScriptManager control is the most important, because it manages all the ASP.NET AJAX scripts for a page. Exactly one instance of this non-visible control must be present on every page that uses ASP.NET AJAX features. In cases where you might be tempted to want to use two script managers on a page (for example, one for a Master Page and another for its content page), you can use a ScriptManagerProxy instead of a second ScriptManager. The ScriptManagerProxy behaves much the same as a ScriptManager, but behind the scenes it coordinates its effort with the ScriptManager to ensure there aren’t too many cooks in the kitchen.

Control Name

Control Description

ScriptManager

Exactly one instance of the ScriptManager control must be on every page that uses ASP.NET AJAX.  This non-visible control coordinates all script functions for the page

ScriptManagerProxy

Can be used as a virtual ScriptManager for content pages in cases where the Master Page already declares the ScriptManager

UpdatePanel

Controls contained within an UpdatePanel can be automatically updated via AJAX and other rich client side script functionality

UpdateProgress

Provides feedback to the user during long running AJAX calls

Timer

Permits content updates on a regularly scheduled basis

Figure 1. These ASP.NET AJAX server-side controls provide enhanced capabilities to web developers.

At design time the UpdatePanel acts very much like the standard ASP.NET Panel control, allowing controls to be dropped inside it and arranged in normal ways. The real magic happens at run time. By default, any controls contained within the UpdatePanel will be updated via AJAX requests. For example, if you drop a standard ASP.NET 2.0 GridView control into it, paging and sorting operations will be done automatically via AJAX, without having to redraw the whole page between each click. This results in a much smoother user experience. It should be noted that ASP.NET AJAX also updates the page’s ViewState on each AJAX call, so that normal postbacks can still occur subsequently without error.

This all works great under ideal conditions, but even AJAX can’t save a user from slow servers, lagging networks, and complex database queries that simply take time to run. Users shouldn’t be left twiddling their thumbs during long-running operations, and that’s where the UpdateProgress control comes in handy. When placed on a form, it appears only while AJAX requests are in progress. It displays a configurable message and cancel button to put the user in the driver’s seat. The UpdateProgress control’s run-time appearance is fully customizable via ASP.NET templates, so you can make it match your vision of beauty.

The Timer control is another useful ASP.NET AJAX server control. Much like the Windows Forms timer control, it allows an event to be raised on a regular timed interval. The Interval property is configurable by the millisecond, so setting it to 60,000 would cause the timer’s server-side Tick event to be called (via AJAX ) once every minute.  This is a great way to cause an UpdatePanel to update via AJAX on a regular basis.

So Much More ...

A single article can do no more than scratch the surface of what ASP.NET AJAX has to offer. While you’ve now had a good introduction to the new server controls included with ASP.NET AJAX, there are many aspects of ASP.NET AJAX that will have to wait for future articles. For example, there’s a toolkit for making your own custom ASP.NET AJAX controls just in case you don’t find one that meets your needs. The toolkit also comes with some nice controls that will surely be worth further investigation.

To learn more about ASP.NET AJAX, I suggest you read the book that me and some associates of mine recently wrote:

Beginning ASP.NET 2.0 AJAX (by Wrox Press)


 
 
Of course there are other ways to implement AJAX functionality besides relying on ASP.NET AJAX, including some nice 3rd party controls. However, ASP.NET AJAX will be incorporated into the next version of ASP.NET released by Microsoft.  So you can learn it now or you can learn it later, but you will be learning it if you are an ASP.NET developer so you might as well get a head start.

 

(advertisement)