Intro Ajax ASP Net

An Introduction to AJAX Techniques and Frameworks for ASP.
NET - The Code Project - AJAX / Atlas Page 1 of 14
4,278,318 members and growing! 13,859 now online. Email Password Sign in b Remember me?
c
d
e
f
g Password problem?
Home MFC/C++ C# ASP.NET VB.NET Architect SQL All Topics Help! Articles Message Boards Lounge
All Topics, ASP.NET >> AJAX / Atlas >> General (Beginner) C# (C# 2.0), JScript, XML, HTML (IE
4+ DHTML, Gecko DHTML)
Windows, .NET
An Introduction to AJAX Techniques and Frameworks for ASP.NET ASP.NET, Win32, VS, AJAX
By Rama Krishna Vavilala. Dev
Posted : 2 Aug 2006
This article introduces AJAX to ASP.NET developers, implementing an example web page in different ways using ASP.NET Atlas, ASP.NET callbacks, Ajax.Net, Anthem.Net, and MagicAjax.Net. Updated : 24 Aug 2006
Views : 134,578
Advanced Search
ANNOUNCEMENTS Search Articles Go!
Sitemap
Monthly Competition Prize winner: August, 2006 110 votes for this article.
Print Broken Article? Bookmark Discuss Send to a friend Popularity: 9.76. Rating: 4.78 out of 5.
Download source files - 943 Kb
Contents
z Introduction
z The Example Web Page
z The Classical ASP.NET Implementation
z Using ASP.NET Callbacks for AJAX
z AJAX meets Atlas
{ Using Web Services from JavaScript
{ Invoking Page Methods
{ Using the UpdatePanel Server Control
z Other ASP.NET AJAX Frameworks
{ Ajax.Net
{ Anthem.Net
{ MagicAjax.Net
z Summary
Introduction
By now, the chances are high that you have heard of AJAX in the context of web development. The acronym was coined by Jesse James Garret in his article: AJAX: A New Approach to Web Applications. Several
frameworks have emerged since then to support AJAX Web development. In this article, we will examine some of the frameworks that are available for ASP.NET programmers. The emphasis of the article will be
on Microsoft's ASP.NET Atlas which is becoming the most important framework for AJAX development in ASP.NET. We will examine different frameworks and the benefits of AJAX through an example of a web
page in an e-commerce web site. Let's start by looking at the details of the example.
The Example Web Page
We will develop a simple web page that presents the user with a list of items, sold by the e-commerce web site, displayed in a list box. When the user selects an item from the list box, the text below the list
box shows the quantity of the selected item in stock at the warehouse. To properly illustrate the benefits of AJAX, the list-box will appear below paragraphs of “Lorem Ipsum” text. Here is a screenshot of the
example web page:
http://www.codeproject.com/Ajax/IntroAjaxASPNET.asp 7/5/2007
An Introduction to AJAX Techniques and Frameworks for ASP.NET - The Code Project - AJAX / Atlas Page 2 of 14
The example uses a SQL Server Express database. You can download SQL Server Express freely from the SQL Server web site. The list of items is maintained in a table called Items. The table has three
columns: ItemID, ItemName, and ItemQuantity. The list-box is populated by binding it to a SqlDataSource configured with the Items table. The ItemID field of the table is bound to a list item value, and the
ItemName field is bound to the display text. The markup of the page is shown below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>The Classical ASP.NET Way</title>
</head>
<body>
<div class="testContent">
.
Paragraphs of Lorem Ipsum .
</div>
<form id="form1" runat="server">
<div>
<label for="ItemList" accesskey="I">
Items:</label>
<asp:ListBox runat="server" ID="ItemList"
DataSourceID="ItemsSource" DataTextField="ItemName"
DataValueField="ItemID" EnableViewState="False">
</asp:ListBox>
<div id="ItemQuantityDisplay" runat="server">
The item quantity will be displayed here </div>
<asp:SqlDataSource ID="ItemsSource" runat="server"
ConnectionString="<%$ ConnectionStrings:Items %>"
SelectCommand="SELECT [ItemName], [ItemID] FROM [Items]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Let's start by looking at how the web page will be coded in classical ASP.NET.
The Classical ASP.NET Implementation
Our objective is to display the quantity of item in stock when the user selects an item in the listbox. We can do this by changing the text of the ItemQuantityDisplay div element. The ItemQuantityDisplay
has the attribute runat="server" which allows server code to modify the text and other attributes of the div element. We set the listbox’s AutoPostback attribute to true so that the form is automatically
posted back to the server when the listbox selection changes.
protected void Page_Load(object sender, EventArgs e) {

this.MaintainScrollPositionOnPostBack = true;
ItemQuantityDisplay.Visible = false;
}
protected void ItemList_SelectedIndexChanged(object sender, EventArgs e)

{
ItemQuantityDisplay.Visible = true;
try {
ItemQuantityDisplay.InnerText =
String.Format(" {0} in stock",
Warehouse.GetItemQuantity(ItemList.SelectedValue));
} catch (Exception ex) {
Trace.Write("GetItemQuantity Error: " + ex.Message);
ItemQuantityDisplay.InnerText = "Error retrieving quantity";
ItemQuantityDisplay.Attributes["class"] = "Error";
}
}
We have paragraphs of text above the listbox so it is likely that the user may have to scroll to reach the listbox and change its selection. We set the MaintainScrollPositionOnPostBack to true so that after
the postback completes, the scroll position of the page is at the same location where the user left it; otherwise, the user will have to scroll to get to the text displaying the item quantity.
In the ItemList_SelectedIndexChanged, we obtain the quantity of items in the warehouse by calling the Warehouse.GetItemQuantity method which runs a SQL query to get the item quantity. We change the
text of the ItemQuantityDisplay by modifying the InnerText property, which is set to display the quantity of items in stock when no error occurs. If an error occurs, we modify the CSS class of the
ItemQuantityDisplay to “Error” (which is defined in a separate style sheet file) and set the text to the user to show that an error occurred.
Now, let’s see what the user experiences when he browses to the web page. Depending on the browser window height, the user may or may not need to scroll to reach the listbox. Once he reaches the listbox
and selects an item, he will see a brief flicker in the web page and see the quantity of item in stock in the text below the list box. He will see that the web page scrolls down when the page is reloaded after he
selects the item. Such interaction can no where be termed continuous though MaintainScrollPositionOnPostback tries to make the discontinuous action of the postback seem continuous. Now, let’s look at
the AJAX version of the same application.
Continuous Interaction with AJAX
The main promise of AJAX is to provide continuous interaction to users when they use a web site. Let’s see how we can achieve that. In the AJAX version of our application, we will obtain the quantity of the
selected item in stock by using the XMLHttpRequest object and use client scripting to alter the text of the ItemQuantityDisplay. Since the page is not reloaded in its entirety as it was in the classical web
application, we can expect a smoother interaction.
For JavaScript to obtain the quantity of items in stock, we need to provide an end point in our web site where this information can be obtained. We need to have a URL from where the item quantity can be
obtained. The most straightforward way to do this is to access the ASP.NET web service methods through the HTTP GET protocol. The URL is of the form:
http://hostname/path/<webservice>/<methodname>?<name1>=<value1>&<name2>=<value2>
You may have to enable the HTTP GET access to ASP.NET web services in the web.config file. This can be done by adding a configuration entry to the web.config, as shown in the following listing:
<configuration>
<system.web>
<webServices>
<protocols>
<add name="HttpGet"/>
Next, we create a web service that provides a method to obtain the quantity of an item in stock at the warehouse. The code is shown in the following listing:
public class WarehouseService : System.Web.Services.WebService {
[WebMethod]
public int GetItemQuantity(string itemID)
{
return Warehouse.GetItemQuantity(itemID);
}
}
Assuming that the web service is on your local machine and the item ID whose quantity you want to access is 79ec4891-a73d-4fcc-ade9-2c2a47f7b2df, you can use the following URL:
http:://localhost/WareHouseService.asmx/GetItemQuantity?
itemID=79ec4891-a73d-4fcc-ade9-2c2a47f7b2df
This will return a response of the following form:
<int xmlns=”…”>85</int>
Now we are ready to code the rest of the application. Since, an AJAX enabled web page talks to the server asynchronously using JavaScript, it is essential to provide the user some feedback. Many AJAX web
sites show animated GIFs with a text message. Some of the images that are in the public domain can be downloaded from here. We select an appropriate image, and modify the ItemQuantityDisplay as
shown in the listing:
<div>
<span id="ItemQuantityDisplay"></span>
<span id="ProgressDisplay" style="display: none">
<img src="images/loading.gif" alt="Loading" />
Checking Stock...
</span>
</div>
We now have a div which encloses two spans with IDs of ItemQuantityDisplay and ProgressDisplay. The ProgressDisplay display span contains an animated GIF image, with the text “Checking Stock” on
its right side. The ProgressDisplay is initially hidden. Displaying a feedback while an asynchronous operation is in progress is merely a matter of hiding the ItemQuantityDisplay span and showing the
ProgressDisplay span; when the asynchronous operation completes, the ProgressDisplay span is hidden and the ItemQuantityDisplay span is shown.
Next, we need to add JavaScript code that will handle the selection change events for the ItemList and call asynchronously to the server. This can be either embedded within the page or in a separate file. A
separate file approach is the preferred way in AJAX applications as script code base tends to be big. The script code in a separate file means that the code can be cached by the browser independently of the
page, saving some bandwidth. In our example, we put the code in a separate file.
The XMLHttpRequest object is available as a built-in object for Internet Explorer 7.0, Mozilla Firefox, Opera, and Safari. In Internet Explorer 6.0, it is available as an ActiveX Object. The JavaScript code shown
in the listing below accounts for this difference:
if (!window.XMLHttpRequest){
window.XMLHttpRequest = function(){
return new ActiveXObject("Microsoft.XMLHTTP");

}
}
This code first checks the availability of the XMLHttpRequest object. If it is not available, then it adds a new property to the window object of type function. The function instantiates a new ActiveX object with
prog ID Microsoft.XMLHTTP and returns the object. For simplicity, we ignore those browsers which may not have a built-in XMLHttpRequest object and which do not support ActiveX objects. This code allows us
to instantiate the XMLHttpRequest object on all browsers:
var xr = new XMLHttpRequest();
This works because properties and methods of the window object are considered global.
Now, we need to handle the change event for the ItemList. Mozilla Firefox and other W3C DOM Level 2 compatible browsers provide a method called addEventListener, where as Internet Explorer provides a
method called attachEvent. Thus our code to add an event handler for the change event will look like:
if (itemList.attachEvent) {
itemList.attachEvent("onchange", itemList_OnChange);
}
else {
itemList.addEventListener("change", itemList_OnChange, false);
}
The code checks for the existence of the attachEvent method, and if it exists, it calls the attachEvent method, otherwise it calls addEventListener. Also note the difference in the event name; in Internet
Explorer, it is onchange, and in Mozilla FireFox, it is change. Welcome to the world of browser incompatibilities!
The main work in our application will be done in the itemList_OnChange function, shown below:
function itemList_OnChange(){
var xr = new XMLHttpRequest();
xr.open("GET",
"WarehouseService.asmx/GetItemQuantity?itemID=" + itemList.value, true);
xr.onreadystatechange = function() {
if (xr.readyState == 4) {
if (xr.status == 200) { //Successful Request
var doc = xr.responseXML;
var qty;
if (doc.evaluate) {
qty = doc.evaluate("//text()", doc,
//XML Parsing in Mozilla
null,
XPathResult.STRING_TYPE, null).stringValue;
}
else {
//XML Parsing in IE
qty = doc.selectSingleNode("//text()").data;
}
itemQuantityDisplay.innerHTML = qty + " in stock";

itemQuantityDisplay.className = "";
} else {
itemQuantityDisplay.innerHTML = "Error retrieving quantity";
itemQuantityDisplay.className = "Error";
}
//Hide Progress
itemQuantityDisplay.style.display = "";
progressDisplay.style.display = "none";
}
}
xr.send(null);
//Display progress
progressDisplay.style.display = "";
itemQuantityDisplay.style.display = "none";
}
We can see the four steps involved in using the XMLHttpRequest object:
1. Instantiate the XMLHttpRequest object.

2. Call the open method on the XMLHttpRequest object. The first parameter is the HTTP method to use, which is either GET or POST. The second parameter is the URL of the resource that you want to access
using the object.
3. Provide a handler to the onreadystatechange event. The handler will be called by the object as its state changes. The bulk of the work is done in this handler. In the listing, we assign an anonymous
function to handle this event.
4. Call the send method. The send method can take the contents of the request as a string. This is useful for posting to the server using HTTP POST.
When the HTTP request ends, either successfully or with errors, the readyState of the XMLHttpRequest object is set to 4, which means complete. You have to figure whether the request was successful or not
using the status property which returns one of the HTTP status codes. The status code of 200 means success. Once the request completes, the HTTP response can be obtained from either the responseXML
property, which returns the response as an XML DOM document (provided the content of the response is XML), or the responseText property, which returns the response in plain text.
In our case, the response is an XML document, and we need to extract the item quantity from the XML DOM document. Since the quantity of the item is send as text of the root document, the XPATH //text()
will work for us. The exact method of using XPath is different for Internet Explorer and Mozilla Firefox. In Internet Explorer, you can use the selectSingleNode function, which is not available in Mozilla where
you have to use the evaluate method. Luckily, this is the last piece of code where we have to consider cross-browser compatibility issues.
The other interesting thing we do in the code for the event handler is hiding and displaying the progress by manipulating the display property of the element’s style. When the HTTP request is sent, we hide
the ItemQuantityDisplay and show the ProgressDisplay, and when the request is finished, we do the reverse.
Let’s examine the application from the user interaction perspective, and compare it with the classic ASP.NET application in the previous section. When the user scrolls down to the item list and selects an item,
he sees an animation with the text “Checking Stock...” on its right side. The animation disappears after some time, and the user sees either the quantity of items or an error message. There is no screen flicker,
and the scroll position does not change. This can be described as a continuous interaction.
This continuous interaction did come at a price. The price being the amount of client-side code we had to write. Fortunately, the client-side code can be simplified. The simplification can be done by
encapsulating common code in a framework. Luckily, ASP.NET callbacks provide an elementary framework for calling server-side code from client scripts. We examine that in the next section.
Using ASP.NET Callbacks for AJAX
ASP.NET 2.0 has a feature called callbacks which allow controls to call server-side code on a page without a full postback. The callback mechanism is used by the TreeView control, the GridView control, and the
DetailsView control. The TreeView control uses callbacks to expand nodes on demand; the GridView uses callbacks for sorting and paging; the DetailsView control uses callbacks for paging.
The steps involved in using callbacks are the following:
1. Implement the ICallbackEventHandler interface in the control or the Page class. The interface has two methods: RaiseCallbackEvent and GetCallbackResult. RaiseCallbackEvent takes a string
argument which is supplied from the client script invoking the callback; the GetCallbackResult returns a string value which is passed to the client script.
2. Generate the client-side script that will invoke the callback. This can be generated by calling the GetCallbackEventReference method of ClientScriptManager. An instance of ClientScriptManager is
available from the Page class’s ClientScript property.
3. Write code that invokes the client script code generated in step 2. This will probably be done in an event handler.
The following listing shows the implementation of ICallbackEventHandler:
public string GetCallbackResult()

{
return callbackResult;
}
public void RaiseCallbackEvent(string eventArgument)

{
try {
callbackResult = Warehouse.GetItemQuantity(eventArgument).ToString();
}
catch (Exception e)
{
Trace.Write(e.Message);
throw new Exception("Error checking quantity");
}
}
The eventArgument parameter of the RaiseCallbackEvent function is passed from the client script. In our example, this will be the ItemID of the selected item in the ItemList listbox. All the
RaiseCallbackEvent method implementation needs to do is to obtain the item quantity from the eventArgument parameter and put it in a string member variable of the Page. We need a member variable to
store the result as we will need to return this in the GetCallbackResult method.
Implementation of ICallbackEventHandler is just a part of the story. Next, we need to generate the client-side script which actually invokes the script. This is done in the Load event handler of the Page, as
shown below:

if (IsCallback)
return;
string callBackFunctionCall =
ClientScript.GetCallbackEventReference(
this,
"getSelectedItemID()",
"onCallbackComplete",
null,
"onCallbackError",
true
);
Page.ClientScript.RegisterClientScriptBlock(
GetType(),
"CallBack",
"function DoClientCallBack() { "
+ callBackFunctionCall + "} ",
true
);
}
Generating client-side code is a two step process. First, we call the GetCallbackEventReference method. This method takes six parameters:
1. The first parameter is an instance of the class which implements ICallbackEventHandler. In our example, this will be the Page itself.
2. The second parameter is the value that needs to be passed to the RaiseCallbackEvent method. The parameter should be a JavaScript expression that evaluates to a string. In our example, we need to
pass the selected item value in the listbox. To do this, we create a function getSelectedItemID which returns the selected item value in the listbox. We pass the string getSelectedItemID(), which
evaluates to the return value from the function, in this parameter.
3. The third parameter is the client script function to be called when the callback completes. This function is passed the string value returned from the GetCallbackResult.
4. The fourth parameter is a context that can be associated with the callback instance. If there are many callbacks, this parameter can be used to distinguish between them. This parameter has to be a
JavaScript expression.
5. The fifth parameter is the name of the JavaScript function which gets called when an error occurs during the callback process.
6. The final parameter is a boolean value that indicates whether the callback should be synchronous or asynchronous. Since we want to perform an asynchronous operation, we pass true as the value of this
parameter.
The return value from GetCallbackEventReference is a JavaScript expression that makes an asynchronous call to the server. We will put this in a separate JavaScript function called DoClientCallBack, which
will in turn be called by the change event handler of the ItemList element. We use the ClientScript.RegisterClientScriptBlock function to form the JavaScript function and register the inline script block.
This completes the work we have to do on the server. Next, we move to the code on the client.
As usual, we need to attach an event handler to handle the change event of the ItemList control. The code is as shown:
//Callback success
function onCallbackComplete(result, context){
itemQuantityDisplay.innerHTML = result + " in stock";
}
//Callback error
function onCallbackError(){
}
function itemList_OnChange()
{
document.getElementById("ProgressDisplay").style.display = "";
document.getElementById("ItemQuantityDisplay").style.display = "none";
DoClientCallBack();
}
The user interaction in this example is the same as that presented in the previous section, but we can see that the client code is greatly simplified as we no longer have any code to parse the XML or to work
with the XMLHttpRequest object. The ASP.NET callback mechanism takes care of the low level calls; however, we did have to add extra code on the server.
AJAX meets Atlas
Atlas was built to ease development of AJAX applications. The other great advantage of Atlas is that it makes your code compatible across browsers. You don’t have to worry about the differences between the
browsers; it is taken care by Atlas most of the time. We will see how this is done in the next section.
Using Web Services from JavaScript
There are a number ways to implement our example in Atlas. A core feature of Atlas is the ability to invoke web services from JavaScript code. First, we will use this feature of Atlas. Since we already have a
web service in place which we developed for an example in one of the preceding sections, our task is greatly simplified.
The first step to use Atlas is to add Atlas script references to the web page. This is done by adding a ScriptManager control to the web page where you intend to use Atlas. The ScriptManager control takes
care of generating appropriate script references for Atlas framework scripts. It can also generate script references for web service proxies (which are automatically generated by Atlas) and also your own custom
scripts which may depend on Atlas. The following listing demonstrates the use of the Atlas ScriptManager control.
<atlas:ScriptManager EnableScriptComponents="false" ID="ScriptManager1"

runat="server">
<Services>
<atlas:ServiceReference
GenerateProxy="true"
Path="WarehouseService.asmx" />
</Services>
<Scripts>
<atlas:ScriptReference
Path="ScriptLibrary/AtlasExample.js" />
</Scripts>
</atlas:ScriptManager>
The code shown in the listing is all the code you need to add to the web page. The rest of the code, which is in a JavaScript file, is shown below:
var itemList, itemQuantityDisplay, progressDisplay;
function onCallbackComplete(result){
itemQuantityDisplay.innerHTML = result + " in stock";
}
function onCallbackError(){
}
function itemList_OnChange(){
progressDisplay.style.display = "";
itemQuantityDisplay.style.display = "none";
//Invoking the web service

WarehouseService.GetItemQuantity(itemList.value,
onCallbackComplete,
onCallbackError,
onCallbackError);
}
Sys.Runtime.load.add(function() {
itemList = document.getElementById("ItemList");
itemQuantityDisplay = document.getElementById("ItemQuantityDisplay");
progressDisplay = document.getElementById("ProgressDisplay");
//Attaching the event handler

itemList.attachEvent("onchange", itemList_OnChange);
});
The major thing to notice here is the ease of invoking the web service. The web service method is invoked as a regular function call in JavaScript. The results are obtained with the same ease. The Atlas
framework takes care of the construction of the URL, sending calls to the web service, and parsing the return values. The details of the XMLHttpRequest object are completely shielded.
The other thing to notice in the above listing is the use of the attachEvent function to add an event handler. There is no special consideration for different browsers. The code just works with Mozilla Firefox and
Internet Explorer. This is all made possible by the Atlas cross browser compatibility layer.
Invoking Page Methods from JavaScript
Another way Atlas enables JavaScript code to call server code is through Page methods. You can apply the WebMethod attribute to a method in your Page class, and this method will automatically be available to
the JavaScript code. Let's convert our example to use Page methods.
First, we will need to mark a method with the WebMethod attribute:
[System.Web.Services.WebMethod]
public int GetItemQuantity() {
return Warehouse.GetItemQuantity(ItemList.SelectedValue);
}
Notice the use of ItemList.SelectedValue. In a Page method, all the control values can be accessed as they can be accessed in a postback. So use page methods whenever you require values of other server
controls in the method. The JavaScript code will remain almost the same as in the previous section except for the actual web method invocation. This was how the call was made in the previous section:
//Invoking the web service

WarehouseService.GetItemQuantity(itemList.value,
onCallbackComplete,
onCallbackError,
onCallbackError);
This is how you will make a call to a page method:
PageMethods.GetItemQuantity(onCallbackComplete,
onCallbackError,
onCallbackError);
All the different ways we have considered so far, except for the postback sample, required us to use JavaScript. Atlas provides a server control called UpdatePanel which allows you to develop AJAX applications
with little or no JavaScript. Let's see how we can use an UpdatePanel for our example.
Using the UpdatePanel Server Control
To use an UpdatePanel, you need to place the content which needs to be updated after an AJAX call inside the UpdatePanel. As we want the ItemQuantityDisplay div to be updated, we place it inside the
UpdatePanel:
<atlas:UpdatePanel ID="ItemQunatityDisplayPanel" Mode="conditional"

runat="server">
<ContentTemplate>
</div>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger
ControlID="ItemList"
EventName="SelectedIndexChanged" />
</Triggers>
</atlas:UpdatePanel>
As we can see, the UpdatePanel declaration has two parts:
1. The ContentTemplate contains the ASP.NET markup for server controls and the HTML which needs to be dynamically updated.
2. The Triggers section describes what events actually should cause the UpdatePanel contents to be rendered. In the listing above, we indicate that if the SelectedIndexChanged event is fired on the
ItemList control, then the UpdatePanel contents should be updated.
You also need to set the property EnablePartialRendering of the ScriptManager control to true:
<atlas:ScriptManager ID="ScriptManager1" runat="server"

EnablePartialRendering="true">
Setting EnablePartialRendering to true enables the ScriptManager to control the rendering of the page as described later. The server side C# code is listed below:

if (!IsPostback)
ItemQuantityDisplay.Visible = false;
}
protected void ItemList_SelectedIndexChanged(object sender, EventArgs e) {

ItemQuantityDisplay.Visible = true;
try {
ItemQuantityDisplay.InnerText =
String.Format(" {0} in stock",
Warehouse.GetItemQuantity(ItemList.SelectedValue));
} catch (Exception ex) {
Trace.Write("GetItemQuantity Error: " + ex.Message);
ItemQuantityDisplay.InnerText = "Error retrieving quantity";
ItemQuantityDisplay.Attributes["class"] = "Error";
}
}
As you might have noticed, the code looks like typical ASP.NET server code in response to a form postback. Yet, when you run the application, you will see that its behavior is similar to the other AJAX examples
and you have not written a single line of JavaScript. So how does it all work?
What happens is that any kind of client events which cause a postback are intercepted by the Atlas client framework. The form contents are then posted using the XMLHttpRequest object through JavaScript.
From the server perspective, it is like a normal postback, but from the client perspective, the form is not submitted as the browser retains the web page state intact. The server side code then scans through all
the UpdatePanels on the page, and checks if they need to be rendered or updated on the client side. This is done by checking the trigger. Only the portions of the page that are inside an UpdatePanel, which is
triggered for an update, are actually rendered, and instead of sending the page's response as HTML, it is send as XML. The client-side script then parses the response XML and extracts and replaces the updated
UpdatePanels's contents.
To display progress message to the user when an UpdatePanel is being updated, a server control called UpdateProgress is made available. The contents of the UpdateProgress server control are automatically
displayed when the client sends update requests to the web server, and hidden once the update is done.
<atlas:UpdateProgress ID="ProgressDisplay" runat="server">

<ProgressTemplate>
<img src="images/loading.gif" alt="Loading" />
Checking Stock...
</ProgressTemplate>
</atlas:UpdateProgress>
Of course, there is lot more to the UpdatePanel control, and it will require a separate article in itself. The UpdatePanel control is the most important feature of Atlas, and it will be the primary way Atlas will be
used. We have seen here some of the features of Atlas, now, let's examine a few other frameworks.
Other AJAX Frameworks for ASP.NET
Before ASP.NET Atlas was developed, there were several open source implementations to provide AJAX support in ASP.NET. Let's quickly scan through three of the popular open source implementations.
Ajax.NET
Ajax.NET, developed by Michael Schwartz, prides itself to be the first AJAX library for ASP.NET. To use Ajax.NET, you need to download the AjaxPro assembly from the AjaxPro.info web site and place it in the
bin directory of your web site. The server code resembles that of Atlas when using page methods, only the name of the attribute changes:
void Page_Load(object sender, EventArgs e) {

AjaxPro.Utility.RegisterTypeForAjax(GetType());
}
[AjaxPro.AjaxMethod]
public int GetItemQuantity(string itemID) {
return Warehouse.GetItemQuantity(itemID);
}
Here is how you invoke this method from JavaScript:
Intro.AjaxNetExample.GetItemQuantity(itemList.value, onCallbackComplete,
onCallbackError);
Intro.AjaxNetExample is the name of the class of the ASP.NET page which is specified in the @Page declaration:
<%@ Page Language="C#" AutoEventWireup="true"

ClassName="Intro.AjaxNetExample" %>
Ajax.Net is a lightweight library, and it does not support Atlas functionalities like cross-browser compatibility, server side controls etc. However, you can use many of the free JavaScript libraries for other
DHTML work.
Anthem.Net
Anthem.Net was developed by Jason Diamond, and it supports AJAX in ASP.NET through server controls. It has a set of server controls that extend the regular ASP.NET server controls. To enable our application
using Anthem.net, we have to replace the regular ASP.NET controls with Anthem.Net's controls.
<div>
<label for="ItemList" accesskey="I">
Items:</label>
<anthem:ListBox runat="server" ID="ItemList" DataSourceID="ItemsSource"
DataTextField="ItemName"
DataValueField="ItemID" EnableViewState="False" AutoCallBack="True"
OnSelectedIndexChanged="ItemList_SelectedIndexChanged">
</anthem:ListBox>
<anthem:Panel AutoUpdateAfterCallBack="true" runat="server">
</div>
</anthem:Panel>
<asp:SqlDataSource ID="ItemsSource" runat="server"
ConnectionString="<%$ ConnectionStrings:Items %>"
SelectCommand="SELECT [ItemName], [ItemID] FROM [Items]">
</asp:SqlDataSource>
</div>
So we replaced the listbox with Anthem's listbox. Notice that the AutoCallback property is set to true. This ensures that when the listbox selection changes, the Anthem framework will use XMLHttpRequest to
post the contents of the form. This callback works in conjunction with the AutoUpdateAfterCallback property of the anthem:panel control in the page. Anthem framework looks for updated controls, and sends
it back to the client which just replaces the HTML of the updated controls.
Magic Ajax
The final AJAX framework we are going to look at is the MagicAjax framework. This started as a CodeProject article by Argiris Kirtzidis. In terms of use, MagicAjax is very much similar to using Atlas
UpdatePanel. You need to enclose the controls and markup that you want to update in the MagicAjax's AjaxPanel class.
<magicAjax:AjaxPanel runat="server" ID="MagicAjaxPanel">

<asp:ListBox runat="server" ID="ItemList" DataSourceID="ItemsSource"
DataTextField="ItemName"
DataValueField="ItemID" EnableViewState="False" AutoPostBack="True"

OnSelectedIndexChanged="ItemList_SelectedIndexChanged">
</asp:ListBox>

</div>
</magicAjax:AjaxPanel>
The server-side code is almost the same as the postback version of the sample in one of the preceding sections. MagicAjax does not require any kind of JavaScript.
Summary
So we have seen different implementations of a sample in different ways using different frameworks. Exactly what framework you need to use depends on the project and the features you desire from a
framework. Atlas is being developed by Microsoft, and is the most feature intensive of all the frameworks; however, Atlas is quite heavyweight compared to the other three frameworks. MagicAjax.NET and
Anthem.NET are well suited for lightweight and quick AJAX implementations with full server control support. Ajax.NET is good for lightweight remote calls using JavaScript. ASP.NET callbacks are well suited for
control authors who want AJAX functionality for a server control.
The source code includes all the implementations which we have discussed. As usual, comments are welcome.
Rama Krishna Vavilala
Click here to view Rama Krishna Vavilala's online profile.
Other popular AJAX / Atlas articles:
z Build Google IG like Ajax Start Page in 7 days using ASP.NET Ajax and .NET 3.0
Build a start page similar to Google IG in 7 nights using ASP.Net Ajax, .NET 3.0, Linq, DLinq and XLinq.
z Introduction to Anthem.NET
How to do AJAX without writing any JavaScript.
z ASP.NET AJAX under the hood secrets
Performance tips and hard-core tricks that change core runtimes, not for the faint hearted.
z Dropdown Box Using AJAX
This article illustrates two dropdown-boxes with nations and states. When selecting a particular nation, the corresponding states will be in the states dropdownbox.
[Top] Sign in to vote for this article: Poor n

j n
k
l
m j n
k
l
m j n
k
l
m j Excellent
j n
k
l
m k
l
m Vote
Note: You must Sign in to post to this message board.

FAQ Message score threshold 3.0 Search comments Set Options
View Message View Per page 25
Msgs 1 to 25 of 51 (Total: 51) (Refresh) First Prev Next
Subject Author Date
Great Article Elina Blank 12:02 13 Apr '07
Another aproach naits 17:13 11 Mar '07
Problem in Atlas when using dynamic databind RSArockiam 3:06 27 Feb '07
Re: Problem in Atlas when using dynamic databind Lancelot69 13:07 8 Mar '07
Prob with warehouse 15:45 13 Feb '07
About itemList element Gustavo Valdes 7:55 6 Jan '07
Extremely Helpful Apurva Kaushal 4:00 26 Dec '06
Excellent Article ..... Umer Khan 13:56 25 Dec '06
Very Good Document Amarendhi 7:57 12 Dec '06
Ajax Beta (Formerly Atlas) fpatton 11:46 14 Nov '06
Re: Ajax Beta (Formerly Atlas) Rama Krishna Vavilala 12:48 14 Nov '06
Object doesnt support this property or method [modified] gooseman112 2:50 11 Nov '06
More complete AJAX products comparison devdotnet2003 10:13 31 Oct '06
Ajax implemenatition (c#0)in asp.net 1.1 v.venkannababu 7:23 18 Sep '06
Re: Ajax implemenatition (c#0)in asp.net 1.1 Matias Baldi 9:05 26 Sep '06
Re: Ajax implemenatition (c#0)in asp.net 1.1 [modified] Peeyush bhatt 1:03 29 Sep '06
Re: Ajax implemenatition (c#0)in asp.net 1.1 ZeusZ71 16:31 29 Oct '06
about ajax implemeation v.venkannababu 7:21 18 Sep '06
very good article vik20 10:20 17 Sep '06
Useful Captain.Danger 8:16 13 Sep '06
Good Article, worth to consider these.. atmonline 13:53 8 Sep '06
Re: Good Article, worth to consider these.. haroldmaude 18:28 21 Nov '06
FIND PARTICULAR CONTROL alokdotnet 4:21 2 Sep '06
Thanks amitsol 2:07 1 Sep '06
Nice work.About Smoot Navigation venkat_eswar 1:36 31 Aug '06
Last Visit: 3:35 Thursday 5th July, 2007 First Prev Next
General comment News / Info Question Answer Joke / Game Admin message
Updated: 24 Aug 2006 Article content copyright Rama Krishna Vavilala, 2006
everything else Copyright © CodeProject, 1999-2007.
Web09 | Advertise on The Code Project | Privacy
The Ultimate Toolbox • ASP Alliance • Developer Fusion • Developersdex • DevGuru • Programmers Heaven • Planet Source Code • Tek-Tips Forums •

Intro Ajax ASP Net

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Intro Ajax ASP Net

Uploaded by

Copyright:

Available Formats

An Introduction to AJAX Techniques and Frameworks for ASP.

NET - The Code Project - AJAX / Atlas Page 1 of 14

Download source files - 943 Kb

The Example Web Page

The Classical ASP.NET Implementation

protected void Page_Load(object sender, EventArgs e) {

protected void ItemList_SelectedIndexChanged(object sender, EventArgs e)

Continuous Interaction with AJAX

public class WarehouseService : System.Web.Services.WebService {

This will return a response of the following form:

return new ActiveXObject("Microsoft.XMLHTTP");

var xr = new XMLHttpRequest();

itemQuantityDisplay.innerHTML = qty + " in stock";

1. Instantiate the XMLHttpRequest object.

Using ASP.NET Callbacks for AJAX

The steps involved in using callbacks are the following:

The following listing shows the implementation of ICallbackEventHandler:

public string GetCallbackResult()

public void RaiseCallbackEvent(string eventArgument)

protected void Page_Load(object sender, EventArgs e) {

AJAX meets Atlas

Using Web Services from JavaScript

<atlas:ScriptManager EnableScriptComponents="false" ID="ScriptManager1"

var itemList, itemQuantityDisplay, progressDisplay;

//Invoking the web service

//Attaching the event handler

Invoking Page Methods from JavaScript

First, we will need to mark a method with the WebMethod attribute:

//Invoking the web service

This is how you will make a call to a page method:

Using the UpdatePanel Server Control

<atlas:UpdatePanel ID="ItemQunatityDisplayPanel" Mode="conditional"

As we can see, the UpdatePanel declaration has two parts:

<atlas:ScriptManager ID="ScriptManager1" runat="server"

protected void Page_Load(object sender, EventArgs e) {

protected void ItemList_SelectedIndexChanged(object sender, EventArgs e) {

<atlas:UpdateProgress ID="ProgressDisplay" runat="server">

Other AJAX Frameworks for ASP.NET

void Page_Load(object sender, EventArgs e) {

Here is how you invoke this method from JavaScript:

<%@ Page Language="C#" AutoEventWireup="true"

<magicAjax:AjaxPanel runat="server" ID="MagicAjaxPanel">

DataValueField="ItemID" EnableViewState="False" AutoPostBack="True"

<div id="ItemQuantityDisplay" runat="server">

Rama Krishna Vavilala

Click here to view Rama Krishna Vavilala's online profile.

Other popular AJAX / Atlas articles:

[Top] Sign in to vote for this article: Poor n

Note: You must Sign in to post to this message board.

View Message View Per page 25

Msgs 1 to 25 of 51 (Total: 51) (Refresh) First Prev Next

Subject Author Date

Great Article Elina Blank 12:02 13 Apr '07

Another aproach naits 17:13 11 Mar '07

Prob with warehouse 15:45 13 Feb '07

About itemList element Gustavo Valdes 7:55 6 Jan '07

Extremely Helpful Apurva Kaushal 4:00 26 Dec '06

Excellent Article ..... Umer Khan 13:56 25 Dec '06

Very Good Document Amarendhi 7:57 12 Dec '06

Ajax Beta (Formerly Atlas) fpatton 11:46 14 Nov '06

More complete AJAX products comparison devdotnet2003 10:13 31 Oct '06

Ajax implemenatition (c#0)in asp.net 1.1 v.venkannababu 7:23 18 Sep '06

about ajax implemeation v.venkannababu 7:21 18 Sep '06