AJAX in ASP.NET 2.0 - Introduction To The Basics

adam.n — Tue, 17 Apr 2007 02:59:00 GMT

This is a copy of the post on my blog Noiz Waves.

AJAX has become quite the buzzword lately when it comes to Web 2.0. Luckily, AJAX is really easy to integrate into new and existing ASP.NET application; it's just a matter of adding some simple controls here and there. The best thing about AJAX in ASP.NET is that no complex coding is required; all the postbacks and Javascript is abstracted away.

In this article I want to provide a quick introduction to AJAX in ASP.NET, highlighting core ideas and useful hints, aimed for existing developers who want to dabble with AJAX. I'm going to start with installing ASP.NET AJAX and configuring Visual Studio 2005 (which takes no time at all). Then its onto a description of 3 of the main controls that utilise AJAX; the ScriptManager, UpdatePanel and Timer. Finally, I will create a small project that combines these controls to perform a simple task.

Installing ASP.NET AJAX

Firstly, you need to have Visual Studio 2005 and .NET 2.0 installed on your machine. Once you have done this, you need to download the ASP.NET AJAX Extensions 1.0 (version correct at time of writing). The download is only a couple of megabytes and provides the essentials for AJAX'ing your websites. Whilst here, you can also download the ASP.NET AJAX Control Toolkit. It provides a large number of AJAX'ed controls which are ready to use.

Once the extensions have been installed, all that needs doing is adding the AJAX extensions to the Visual Studio toolbox. I added the controls to a new tab called 'AJAX Extensions' by right-clicking on the tab selecting Choose Items and browsing to "C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\System.Web.Extensions.dll" then clicking OK. If all goes well, your toolbox will look like this:

That's it! AJAX has been installed, and its ready to be used. If you want the AJAX Control Toolkit controls in your toolbox, the procedure is similar, but you browse to "C:\Program Files\Microsoft ASP.NET\Ajax Control Toolkit\AjaxControlToolkit.dll". Now, onto the controls...

The ScriptManager

In a nutshell, the ScriptManager is the control that handles most of the behind the scenes Javascript side of AJAX. There must be a ScriptManager on any page that uses AJAX. The easiest way to achieve this is to put one at the top of the master page. As far as properties go, EnablePartialRendering is the single most important one to be familiar with. In a nutshell, it enables or disables asynchronous postbacks. Disabling partial rendering forces all postbacks to be full postbacks. This is extremely handy when debugging some errors, as the error provided with partial rendering is a small javascript popup.

The UpdatePanel

The UpdatePanel is the easiest way to use AJAX to improve the responsiveness of a web application using AJAX. When an event occurs that is deemed to be a trigger for the panel, the server processes the request and responds with the updated contents of the UpdatePanel INSTEAD of the contents of the entire page. What this means is that user interactions affecting a small area of the page will only cause that small area to refresh. This results in a sizable saving of bandwidth, and a noticeable increase in response time.

UpdatePanels have a few important parameters that can require tweaking. ChildrenAsTriggers causes the panel to be refreshed when ever a child control fires an event. In some situations that is undesirable, as unnecessary asynchronous postbacks will occur. Triggers is a collection of control + events pairs on the page that will cause the update panel to refresh. This is my preferred way to specify when the contents of the panel are refreshed. UpdateMode specifies whether the update panel will refresh its contents on any postback or only those that trigger the panel. Again, I set this to 'Conditional' as it gives me finer control over when the panel is refreshed.

The Timer

This control is one that i had no use for during the first few months of developing, but after tinkering with the Timer it is extremely useful in some situations. A Timer fires a Tick event at regular intervals, and these ticks can be used as triggers for UpdatePanels. In other words, asynchronous postbacks can occur without any interaction from the user at all. This would come in handy for regularly saving the contents of a textbox or loading live stock prices for example. Timer has a couple of simple but useful properties, and these are Interval (the delay in milliseconds between tick events being fired) and Enabled (should the timer fire tick events or not).

It is possible to get tricky and put a Timer inside an UpdatePanel, and change the Timer's properties at run time. By setting the Interval to a very small number, and then immediately disabling the timer in the tick event handler, only one tick event will occur. This is an effective way of running a section of code only when the page has finished loading in the client's browser.

Sample ASP.NET AJAX Website Project

The sample project I've included with this article uses all three of the described AJAX controls. It contains a ScriptManager at the top, an UpdatePanel which contains some labels whose contents will be changed and refreshed asynchonously, and a Timer to trigger the change in label text and cause the actual asynchronous postback.

There is only 2 line of actual C# code in this simple project, and they set the label text to a random integer. Other than that, no additional coding was required to implement an AJAX'ed website. Pretty good eh'?

From the use of 3 basic controls, anyone can AJAX up their projects, making them both better to use and more efficient to serve. There are a couple of other controls included in the ASP.NET AJAX Extensions that I haven't touched on here; they are the ScriptManagerProxy and UpdatProgress. I would strongly suggest that everyone muck around with the UpdateProgress control. From a usability point of view, it is essential to know when the page is performing behind the scenes, not just for the users of the site, but also the developers and debuggers.

Attachments: SampleAJAXWebsite.zip

Adam's Blog : introduction

AJAX in ASP.NET 2.0 - Introduction To The Basics