Hello ASP.NET AJAX !
Introduction
In September 2005 I wrote a five part series on using
AJAX with ASP.NET 2.0. The series showed how to use raw AJAX with ASP.NET.
Though using raw AJAX did the job of improving responsiveness and reducing
post backs, it was certainly considerable effort to achieve the desired result.
Now that ASP.NET AJAX is on the anvil things are simple yet powerful. In this
article I will give you an introduction to ASP.NET AJAX along with a "hello
world" sort of example. In coming weeks and months you will get further
installments of the series.
Overview of ASP.NET AJAX
ASP.NET AJAX is the name given to Microsoft's
implementation of AJAX. Microsoft already has a sound platform of ASP.NET
to develop web site. With the addition of AJAX no doubt it is poised to offer an
excellent environment for web site development. Today people look at AJAX for
the following main reasons:
-
User responsiveness
-
Reducing post backs
-
Rich user experience
In a traditional web sites when a user submits a
form he needs to wait till the complete page is posted back to the server and
response is received. That means he needs to wait more. In AJAX the page
processing is essentially asynchronous one. Naturally, the web page is more
responsive to user actions.
In traditional web applications a web page is frequently
posted back to the server even if a small portion of it needs to be changed.
This incurs more network overhead and pages take more time to render. In AJAX a
small portion of the whole page can be refreshed avoiding any need to post back
the complete page. This naturally improves the performance from end user point
of view.
ASP.NET provides an impressive array of server controls
such as Grids and Lists. However, some UI elements are best rendered using
client side script. Menus, short cut menus, progress bars, auto suggestion
textboxes, drag and drop, message boxes, modal windows are just some
examples. ASP.NET AJAX offers a good range of such controls (more on that
later).
Architecture and parts of ASP.NET AJAX
The overall ASP.NET AJAX consists of two main parts
:
-
Server side components
-
Client side components
Note that the word "component" above refers to binaries,
scripts and anything else that makes that layer.
Server Side Components
The server side components consists of:
ASP.NET AJAX provides certain server controls that allow
you to empower your applications with AJAX functionality. Most notable controls
are ScriptManager and UpdatePanel. The ScriptManager control takes care of
all the ins and outs of script resources and partial page rendering. On any web
form that wants to use ASP.NET AJAX there must be one instance of ScriptManager
control. The UpdatePanel control allows you to refresh a part of the whole web
form. You can think of it as a control that can turn any web server control into
AJAX enabled control.
ASP.NET 2.0 Membership and Profile APIs are part of
ASP.NET's server side functionality. Fortunately, ASP.NET AJAX provides a set of
web services through which you can consume these features from the client side.
For example, from client side script you can check if a user is authenticated
and so on.
ASP.NET AJAX also allows you to develop your own AJAX
server controls. These controls can have client side "behaviors" and can provide
rich and custom functionality as per your requirement.
Client Side Components
ASP.NET AJAX client side components consists of
JavaScript script libraries. These script libraries make overall JavaScript more
object oriented and add several enhancements to traditional JavaScript. For
example, in traditional JavaScript you use document.getElementById() method to
access any HTML element on the page. Using AJAX client libraries you can refer
to these elements as controls e.g. Label, Selector and Button controls. One good
part of ASP.NET AJAX client side components is that they are browser
independent. They work on almost all the leading browsers such as IE, FireFox,
Safari and others.
NOTE:
Some part of the client side components
mentioned above is now separated as "ASP.NET AJAX Futures". Nevertheless, it is
part of overall client side components.
ASP.NET AJAX Control Toolkit
ASP.NET AJAX Control Toolkit is a collection of rich
AJAX controls that you can use out of the box in your applications. It also
provides an SDK for developing your own controls. Some of the controls included
in the toolkit are - CollapsiblePanel, ConfirmButton, HoverMenu and
ModalPopup.
Developing a Simple AJAX Enabled Application
In order to work through this example you must install
ASP.NET AJAX 1.0 RC on your machine. To begin with create a new web site using
Visual Studio. Notice that after installing ASP.NET AJAX there is a new web site
template named "ASP.NET AJAX Enabled Web Site". The following figure shows the
"New Web Site" dialog with this template.

Using this template is not mandetory. However, it adds
certain markup in the web.config file. If you don't use this template then you
need to do that job on your own. Also, it references System.Web.Extensions
assembly. This assembly contains core ASP.NET AJAX functionality.
If you open the default web form you will find a
ScriptManager control placed on it. Drag and drop a Label control on the web
form. Also drag and drop two UpdatePanel controls and one UpdateProgress control
on the web form. Note that these controls are located on the AJAX Extensions
node of the toolbox.
Drag and drop a Button and a Label inside the first
UpdatePanel control. Drag and drop a Label and a Timer control inside the
second UpdatePanel control. Set the Interval property of Timer control to 3000
milliseconds. Finally, drag and drop a Label control inside the UpdateProgress
control and set its Text Property to "Wait...Server is processing your
request...".
In the Page_Load event of the web form add the following
code:
protected void Page_Load(object sender, EventArgs e)
{
Label2.Text = "Time Stamp : " + DateTime.Now.ToString();
}
The code simply sets the Text property of the Label
control that is directly placed on the form to current date and time. Now write
the following code in the Click event handler of the button that is placed
inside the first UpdatePanel.
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = "Time Stamp : " + DateTime.Now.ToString();
}
The code simply sleeps for 3 seconds and then displays
current date and time in the Label control. Finally write the following code in
the Tick event of the Timer control.
protected void Timer1_Tick(object sender, EventArgs e)
{
Label4.Text = "Timer is ticking : " + DateTime.Now.ToString();
}
The Tick event is raised every time a time
span equal to the Interval property is elapsed. The code simply sets
the Text of the other Label control to current date and time.
Now set the AssociatedUpdatePanelID property of
UpdateProgress control to the ID of first UpdatePanel. The UpdateProcess control
is used to display a progress indicator to the end user when the associated
UpdatePanel is being refreshed.
That's it! You just developed an AJAX enabled web form.
Run the form in the browser and observe the following things:
-
When you click on the Button from the first
UpdatePanel only the Label inside that UpdatePanel changes its value. The
Label on the form remains unchanged. This means only the region of UpdatePanel
is getting refreshed.
-
When you click on the Button from the first
UpdatePanel. the UpdateProgress control shows wait message till the refresh is
not complete.
-
The label placed inside the second UpdatePanel
automatically changes its value after every 3 seconds.
The following Figure shows the web form in action:
