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