USING AJAX.NET Library

Abstract

AJAX (Asynchronous JavaScript and XML) allow you to make server side calls without a Postback.

This increases the performance since you do not have to wait for the whole page to refresh to view the changes. In this article I will explain how to make asynchronous calls using the AJAX.NET library. The article also briefly discusses the effect of ViewState on the performance of the application.

Introduction

The concept of remote scripting was introduced by Microsoft in the form of embedded Java applets in the page which communicated with the server. The problem with that approach was that you must have Java enabled on your browser for it to work. Later JavaScript Remote Scripting was introduced which enabled developers to make asynchronous calls using DHTML and JavaScript.

In this article I will show how you can take a step further and make asynchronous calls using the AJAX.NET library which easily merge with the .NET framework.

System Requirements

To run the code for this sample you should have

AJAX.NET Class Library
VS.NET
MSDE or SQL Server with the Northwind database installed.

Installing and Compiling the Sample Code

The sample code for this article consists of a VS.NET project. The project was originally created in Visual Studio.NET 2003. If you are using Visual Studio.NET 2005 BETA I or BETA II then you can easily upgrade it using a Visual Studio.NET 2005 BETA built in converter.

What is a Postback?

Postback is the communication between the client and the server. Consider a situation where you have a form populated with input controls. You fill the input controls and submit the form. Your request will be sent to the server for processing and then it will be returned to you with the result. This process is known as Postback.

Postback and ViewState

Whenever you send a request to the server through the server control the page keeps track of the state of the control. This is accomplished by storing the state of the control in the ViewState variable. If you have several controls on the form then the ViewState size will be very large.

In the example below I have used a single TextBox. I wrote some text in the TextBox and pressed the Postback button to send my request to the server.

The user interface is given below:

User Interface of Demo1 Page

The ViewState generated for this page is given in the screen shot below:

ViewState Generated by a TextBox Control

Most forms will only contain a single TextBox. To give this ViewState a reality test I included several controls on the form. In the example below, I have generated the user interface by dynamically creating the controls and adding them to the panel control.

The new user interface will look like the screen shot below:

Dynamically Created Server Controls

Now let’s observe the source code which enables the creation of the controls:

private void Page_Load(object sender, System.EventArgs e)
{
BuildControls();
}

// This method will build the controls dynamically
private void BuildControls()
{
// Create a datagrid control
DataGrid myDataGrid = new DataGrid();
myDataGrid.DataSource = GetCategories();

// create 5 textboxes
for(int i=1;i<=5;i++)
{
TextBox myTextBox = new TextBox();
// add to the panel controls
pnControls.Controls.Add(myTextBox);
}
// add datagrid to the panel control
pnControls.Controls.Add(myDataGrid);
pnControls.DataBind();

}

// This method returns the dataset filled with the Categories table
private DataSet GetCategories()
{
string connectionString = (string) ConfigurationSettings.AppSettings["ConnectionString"];
SqlConnection myConnection = new SqlConnection(connectionString);

SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Categories",myConnection);
DataSet ds = new DataSet();
ad.Fill(ds,"Categories");
return ds;

}

The code did not demonstrate anything fancy. It simply created the controls dynamically and added it to the panel control. Here is the ViewState generated for the page:

View State Created by Dynamically Created Server Controls

Now the size of the asp .net file transferred between the IIS and the client is bigger. My whole idea in presenting the demo is to show that ViewState can be very costly when you have several controls on the page triggering the Postback event. When you do a Postback the ViewState is passed to the server and than back again to the client.

AJAX to the Rescue

As mentioned in the introduction, AJAX allows you to execute the server side methods without making a Postback. This means that you will not need to refresh the page to see the new results. There are several ways to make server side calls from the client, and these include Callbacks, Atlas etc. I will explain how you can make client calls using AJAX.NET library. There is one more article on DHTML tooltips using Ajax .Net that you may be interested in.

Downloading AJAX.NET Library

AJAX.NET library is created by Michael Schwarz and is available as a free download from his website (http://ajax.schwarz-interactive.de/csharpsample/default.aspx).

Getting Started With AJAX.NET Library

Once you have downloaded AJAX.NET Library from the link provided above you are ready to use AJAX. All you need to do now is to make a reference to the Ajax.dll in your project. After making reference you just need to add the following few lines to your web.config file.

1 2