Ajax is a popular technology that is used in many different ways on the
World Wide Web. It has become a technology of choice for building fast
and responsive user interfaces. This article takes a brief look at the
features of some of the more widely used ASP.NET Ajax frameworks.
The What and Why of Ajax
Before we delve deep into the Ajax frameworks, let's have a quick recap of what Ajax is and why it is so popular. The word
Ajax is an acronym for
Asynchronous
JavaScript
and
XML.
It is a combination of different technologies, used for building rich
and responsive user interfaces. The benefits of using Ajax include:
- faster page renderings and support for partial page updates
- rich and, responsive user interface
- reduced consumption of server resources
Common ASP.NET Ajax Frameworks
The most common Ajax frameworks that can be used with
ASP.NET are:
- Atlas
- AJAXPro.NET
- MagicAJAX.NET
- Anthem.NET
- ASP.NET Ajax
The Atlas Framework
The
Atlas Framework
is actually an extension to ASP.NET. Atlas is actually a set of
technologies that provide support for asynchronous operations in
ASP.NET. It comprises of a client-side script library and a collection
of server controls.
To work with Atlas, you should add the following assemblies as references to your project:
Microsoft.AtlasControlExtender.dll
AtlasControlToolkit.dll
You should also specify the following in your application's
web.config
file:
|
1 | <pages> |
2 | <controls> |
3 | <add namespace="Microsoft.Web.UI"assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/> |
4 | <addnamespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Atlas"tagPrefix="atlas"/> |
5 | </controls> |
6 | </pages> |
| view plain | print | ? |
Here is a markup code snippet that illustrates how you can use the Atlas UpdatePanel:
|
1 | <atlas:UpdatePanel ID="UpdatePanel1" runat="server"> |
2 | <ContentTemplate> |
3 | <asp:GridView ID="GridView1" runat="server" /> |
4 | <Columns> |
5 | ... |
6 | </Columns> |
7 | </asp:GridView> |
8 | </ContentTemplate> |
9 | </atlas:UpdatePanel> |
| view plain | print | ? |
The following code snippet illustrates how the Atlas ScriptManager controls can be used:
|
1 | <atlas:ScriptManager EnableScriptComponents="false" ID="ScriptManager1" runat="server"> |
2 | <Services> |
3 | <atlas:ServiceReference GenerateProxy="true" Path="EmployeeService.asmx" /> |
4 | </Services> |
5 | <Scripts> |
6 | <atlas:ScriptReference Path="EmployeeScripts.js" /> |
7 | </Scripts> |
8 | </atlas:ScriptManager> |
| view plain | print | ? |
The AJAXPro.NET Framework
AJAX.NET Professional (
AjaxPro)
is a popular open-source Ajax library for use with ASP.NET that can be
used for designing and implementing Ajax-enabled Web applications. The
best part is that it works with both ASP.NET 1.1 and ASP.NET 2.0
versions.
ASP.NET AJAX
ASP.NET Ajax is a free
framework that comes from Microsoft and can be used to design and
implement the next generation of cross- browser Web applications with
rich and responsive user interfaces.
ASP.NET 2.0 included support for Ajax using a separate add-on in the
name of ASP.NET 2.0 Ajax Extensions. Later, this became a part of the
ASP.NERT release. The
Microsoft Developer Network
states, "ASP.NET AJAX is a set of technologies to add AJAX
(Asynchronous JavaScript and XML) support to ASP.NET. It consists of a
client-side script framework, server controls, and more". Although Ajax
is essentially a client-side technique, most of its real-world
deployments call for server-side processing. The
ASP.NET Ajax Control Toolkit
from Microsoft includes a rich a set of sample controls and extenders
that can be used to Ajax-enable your ASP.NET applications.
To achieve partial page updates in your ASP.NET web pages through
ASP.NET Ajax, you can make use of the UpdatePanel control. Here is an
example:
|
1 | <form id="Form1" runat="server"> |
2 | |
3 | |
4 | |
5 | |
6 | <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/> |
7 | <asp:UpdatePanel ID="UpdatePanel1" runat="server"> |
8 | |
9 | |
10 | |
11 | <ContentTemplate> |
12 | //Place other controls/updatable content here |
13 | </ContentTemplate> |
14 | </asp:UpdatePanel> |
15 | </form> |
| view plain | print | ? |
The MagicAJAX.NET Framework
MagicAjax, a freely available and flexible Ajax framework, was started
as an article at CodeProject by Argiris Kirtzidis. It has been improved a
lot since then and is available as a free download at the
SourceForge.net Repository
You can use MagicAjax in your code to Ajax-enable your applications by using this method:
|
1 | <magicAjax:AjaxPanel runat="server" ID="MyMagicAjaxPanel"> |
2 | <asp:ListBox runat="server" ID="MyListBox" DataSourceID="SqlDataSource1" |
3 | DataTextField="EmployeeName" DataValueField="EmployeeID" |
4 | EnableViewState="False" AutoPostBack="True" |
5 | OnSelectedIndexChanged="MyListBox_SelectedIndexChanged"> |
6 | </asp:ListBox> |
7 | </magicAjax:AjaxPanel> |
| view plain | print | ? |
The Anthem.NET Framework
Anthem.NET is a
free, easy-to-use, cross-browser, open source Ajax framework, written by
Jason Diamond. It is compliant with both ASP.NET 1.0 and 2.0 versions.
The Anthem.NET framework is comprised of a rich set of Ajax-enabled
controls that you can use to Ajax-enable Web applications developed
using Microsoft ASP.NET technology. The Anthem.NET framework internally
uses the
XMLHttpRequest
object. Here is a sample code that illustrates how you can use this framework to Ajax-enable your application:
|
1 | <anthem:ListBox runat="server" ID="MyListBox" DataSourceID="SqlDataSource1" |
2 | DataTextField="EmployeeName" DataValueField="EmployeeID" |
3 | EnableViewState="False" AutoCallBack="True" |
4 | OnSelectedIndexChanged="MyListBox_SelectedIndexChanged"> |
5 | </anthem:ListBox> |
6 | <anthem:Panel AutoUpdateAfterCallBack="true" runat="server"> |
7 | <div id="EmployeeRecords" runat="server"> |
8 | </div> |
9 | </anthem:Panel> |