USING AJAX.NET Library

Returning a Simple String from the Server Method

Let’s start with a very basic example.

In this example I will make a call from the client side onLoad event which will return a string from the server side method and display it on the screen in the form of an alert box.

I assume that you have already made a reference to the Ajax.dll in your project and made the required adjustments in the web.config file. Now you are ready to use the AJAX.NET library. First thing I will show you is how to initialize the AJAX.NET library, and this is demonstrated below:

public class Demo3 : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
// Initializing AJAX.NET Library
Ajax.Utility.RegisterTypeForAjax(typeof(Demo3));
}

}

As you can see we have registered our class name with the AJAX.NET library.

Now let’s create a small method that will be called from the client side. This method will simply return a string “Hello World” to the client.

public string PrintHelloWorld()
{
return "Hello World";
}

The method which you are trying to call from the client side must be marked with the [Ajax.AjaxMethod] attribute. The code below shows how to call the method from the client on the onLoad event.

<body onload="CallHelloWorld()">
<form id="Form1" method="post" runat="server">
</form>
</body>
</HTML>

<script language =javascript>

function CallHelloWorld()
{
AjaxDemoReturnString.PrintHelloWorld(CallHelloWorld_CallBack);
}

function CallHelloWorld_CallBack(response)
{
// check that if any error has been returned
if(respone.error == null)
{
// displays the message on the screen
alert(response.value);
}
}

</script>

This CallHelloWorld() method is called when the page is loaded and makes a call to the server side method AjaxDemoReturnString.PrintHelloWorld(). AjaxDemoReturnString is the name of the class and PrintHelloWorld is the name of the method which is marked with the [Ajax.AjaxMethod] attribute. When you run this demo a simple message “Hello World” will be displayed on the screen.

Sending Parameters to the Server Method

The example above demonstrates how to return a string from the method. In the example below, I will show you how to pass parameters to the server’s method. I am going to pass the username to the server method and display a greeting message. Let’s look at the simple server method below:

[Ajax.AjaxMethod]
public string GreetUser(string userName)
{
return "Hello, " + userName;
}
As you can see all that the method does is concatenate “Hello” at the beginning of the string.

<input type="button" value="Greet me!" onclick="GreetUser()" />

Attach the button click event to call GreetUser() function.

<script language = "javascript">

function GreetUser()
{
// get the username from the textbox
var username = document.getElementById("txtUserName").value;
Demo3.GreetUser(username,GreetUser_CallBack);
}

function GreetUser_CallBack(response)
{
alert(response.value);
}

</script>

The screen shot of the result is given below:

Displaying Passed Parameters Using Alert Box

I am sure you have understood the fundamentals behind the AJAX.NET library. Now let’s see some advanced uses of AJAX.

Returning a Dataset

The Dataset is among the most commonly used data carrier object in the Microsoft.NET framework. I use it often to bind data to the Datagrid control. In this example I will demonstrate how one can bind the data from the Dataset to the table without using Postback.

Firstly a sever side method is required which will return a Dataset. In the example below I used the Northwind database which is shipped with SQL SERVER 7 and SQL SERVER 2000. If for some reason you do not have the database installed on your machine, then you can download it from the link below:

Download Northwind Database

The method GetDataSet() simply populates the Dataset with the data from the Categories table.

// This method returns the dataset to the client
[Ajax.AjaxMethod]
public DataSet GetDataSet()
{
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;
}

Now I will show how to call the GetDataSet() from the client side and populate the HTML table.

Let’s see what is going on in the BindDataSetToTable_CallBack() method. I got the response object which has the value property containing the Dataset. I copied the Dataset into a var type variable so I could perform iteration on it. I then created a new array object which acts as a StringBuilder object and contains the html code to generate the table. A for loop was used to iterate through the dataset and get the rows from the specified columns. Finally, I used the span tag of id Display1 to display the table on the screen.

Below is the screen shot of the table displayed on the screen:

Image5.jpg: HTML Table Populated Using Dataset

One of the interesting things to note is the ViewState generated for the page.

Image6.jpg: ViewState Generated When Using AJAX

As you can see, the ViewState generated is much less than it was when server controls were used to display the data.

Returning a Custom Object

Most Enterprise Applications work with Entity Classes instead of Dataset objects. I will show you that binding a custom object is as simple as binding a Dataset to the HTML Table.

Creating the Categories and CategoryDetails Classes

CategoryDetails class will map to the Categories table in the Northwind database.The code below shows the CategoryDetails class:

// This class defines the Categories
[Serializable]
public class CategoryDetails
{
private int _categoryID = 0;
private string _categoryName = null;
private string _categoryDescription = null;

public int CategoryID
{
get { return _categoryID; }
set { _categoryID = value; }
}

public string CategoryName
{
get { return _categoryName; }
set { _categoryName = value; }
}

public string CategoryDescription
{
get { return _categoryDescription; }
set { _categoryDescription = value; }
}
}

Notice the [Serializable] attribute on the class. The [Serializable] tag is compulsory since we are going to access the class properties on a different thread. Now let’s see the Categories class which contains the method GetCategories().

public class Categories
{
// Declare an array list to hold the collection
private ArrayList categoriesList = new ArrayList();

public Categories()
{

}

public ArrayList GetCategories()
{
string connectionString = (string) ConfigurationSettings.AppSettings["ConnectionString"];
SqlConnection myConnection = new SqlConnection(connectionString);

SqlCommand myCommand = new SqlCommand("SELECT * FROM Categories",myConnection);

SqlDataReader reader = null;

try
{
myConnection.Open();
reader = myCommand.ExecuteReader();
while(reader.Read())
{
CategoryDetails category = new CategoryDetails();
category.CategoryID = (int) reader["CategoryID"];
category.CategoryName = reader["CategoryName"] as String;
category.CategoryDescription = reader["Description"] as String;

// Add to the ArrayList
categoriesList.Add(category);
}

}
finally
{
myConnection.Close();
myCommand.Dispose();
}

// return the collection object
return categoriesList;

}

The GetCategories() method simply fills the ArrayList categoriesList with the rows from the Categories table in the Northindwind database. You can call the GetCategories() method from the code behind contained in the ASP.NET Page.

[Ajax.AjaxMethod]
public ArrayList GetCategories()
{
Categories category = new Categories();
ArrayList catList = category.GetCategories();
return catList;

}

Remember to make the method with the [Ajax.AjaxMethod] attribute or else you would not be able to call the method from the client script. All that is left to do is to call the GetCatories() method from the JavaScript code.

The code above is quite similar to the one I demonstrated earlier in which I used a Dataset to populate the HTML Table. The function DisplayCategories_CallBack() receives the ArrayList object from the server side method GetCategories(). After receiving the ArrayList I simply iterated through the list and assigned the public properties defined in the CategoryDetails class to the table cell.

Conclusion

In this article you’ve seen how to avoid unnecessary Postbacks by making client side asynchronous calls using the AJAX.NET Library. You also learned that AJAX minimizes the ViewState of the page which leads to high performance applications.

1 2