AJAX in Action

• Download source - 10.2 Kb

Introduction

I love AJAX, it really cleans my dishes. Unfortunately, in this article we will not be talking about washing detergent. If you like you can visit Clean My Dishes for more details. In this article we will be talking about AJAX (Asynchronous JavaScript and XML). All you need to know right now is that AJAX allows you to make server side calls without doing a postback.

Downloading the AJAX.NET Library

• Download link.

First of all, you need to download the AJAX.NET library created by Michael Schwarz. Now that you have downloaded the library and made the reference to the DLL in your project, we can start some dirty stuff.

What are we going to do?

Okay, here is what we are going to do. We are going to make a dropdown list using <select> HTML tags. We will populate the dropdown list from the database. Now when we select any item from the dropdown list, it will fetch the result from the database and display it on the screen in a DataGrid. All of this will happen with no pstback.

I highly recommend that you first read the basic instructions of using the AJAX.NET Library which are given at the above URL, so that you will have the basic idea.

AJAX in Action

Our first task is that when the page is loaded the dropdown list is populated with data from the database. But before that let's initialize our AJAX library by making a call in the page_load event.

private void Page_Load(object sender, System.EventArgs e)
{
  Ajax.Utility.RegisterTypeForAjax(typeof(UsingAjax));
}

In this article we will be using the Northwind database. First of all you need to make a server method so that you can get a DataSet and bind it to the dropdown list. Let's make that method:

[Ajax.AjaxMethod]
public DataSet GetDropDownListData()
{
  string query = "SELECT CategoryID,CategoryName FROM Categories ";
  SqlConnection myConnection = new SqlConnection(GetConnectionString());
  SqlDataAdapter ad = new SqlDataAdapter(query,myConnection);
  DataSet ds = new DataSet();
  ad.Fill(ds,"Categories");
  return ds;
}

As you might have already noticed, this method is marked with the Ajax.AjaxMethod attribute. This means that this method is going to be called from the client side. Now let's see how we can access this method from the client side.

function FillDropDownList()
{
  UsingAjax.GetDropDownListData(FillDropDownList_CallBack);
}

function FillDropDownList_CallBack(response)
{
  var ds = response.value;
  var html = new Array();

  if(ds!= null && typeof(ds) == "object" && ds.Tables!= null)
  {
    for(var i=0;i<ds.Tables[0].Rows.length;i++)
    {
      html[html.length] = "<option value=" + 
                          ds.Tables[0].Rows[i].CategoryID + ">" 
                          + ds.Tables[0].Rows[i].CategoryName + 
                          "</option>";
    }
    document.getElementById("Display").innerHTML = 
        "<select id=\"sel\" onchange=\" ChangeListValue" + 
        "(this.options[this.selectedIndex].value); \">" + 
        html.join("") + "</select>";
  }
}

Let me first explain the FillDropDownList() method. UsingAjax is the name of the class which contains the GetDropDownListData method which we implemented a few moments ago. We call FillDropDownList_CallBack() which contains the actual code to populate the dropdown list.

Take a look at the line below:

document.getElementById("Display").innerHTML = 
                       "<select id=\"sel\" onchange=\"

You must be wondering what "Display" is. Display is no more than a SPAN tag. I have implemented it below:

<span id="Display"></span>

Now let's go and see how the ChangeListValue method is implemented since it is called when the selection in the dropdown changes.

function ChangeListValue(index)
{
  GetResult(index);
}

ChangeListValue() calls GetResult(index). Now let's go to GetResult(index).

function GetResult(categoryID)
{
  UsingAjax.GetProductsByID(categoryID,GetResult_CallBack);
}

function GetResult_CallBack(response)
{
  var ds = response.value;
  if(ds!=null && typeof(ds) == "object" && ds.Tables!=null)
  {
    var s = new Array();
    s[s.length] = "<table border = 1>";

    for(var i=0;i<ds.Tables[0].Rows.length;i++)
    {
        s[s.length] = "<tr>";
        s[s.length] = "<td>" + ds.Tables[0].Rows[i].ProductID + "</td>";
        s[s.length] = "<td>" + ds.Tables[0].Rows[i].ProductName + "</td>";
        s[s.length] = "<td>" + ds.Tables[0].Rows[i].QuantityPerUnit + "</td>";
        s[s.length] = "</tr>";
    }
    s[s.length] = "</table>";

    document.getElementById("Display1").innerHTML = s.join("");
  }
}

GetResults() method calls the server side method "GetProductsByID".

[Ajax.AjaxMethod]
public DataSet GetProductsByID(int categoryID)
{
  string query = "SELECT * FROM Products WHERE CategoryID = @CategoryID ";
  SqlConnection myConnection = new SqlConnection(GetConnectionString());
  SqlCommand myCommand = new SqlCommand(query,myConnection);

  myCommand.Parameters.Add("@CategoryID",categoryID);
  SqlDataAdapter ad = new SqlDataAdapter(myCommand);
  DataSet ds = new DataSet();

  ad.Fill(ds);
  return ds;
}

So, there you go now. When you select an item from the dropdown, your DataGrid will pull up new results without having to refresh the page. In other words, there will be no postback.

You should also make a BindControls() method that will populate the controls when the page loads. Here is my implementation of the BindControls() method. Keep in mind that we have already implemented the FillDropDownList() method above.

function BindControls()
{
  FillDropDownList();
}

After making the BindControls method you just need to call it when the page loads.

<body onload="BindControls();">

You also need to add these settings in the web.config file:

<configuration>
  <system.web>
    <httpHandlers>
      <add verb="POST,GET " path="ajax /*.ashx"
           type="Ajax.PageHandlerFactory, Ajax" /> 
    </httpHandlers>  
    ...
  <system.web>
</configuration>

For your convenience I have attached the zip file which contains all the files you need for this project. I hope you like the article, happy coding!