AJAX IN ACTION

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.

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:

First of all you need to download 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 doing to make a DropDownList using <select> html tags. We will populate the DropDownList from database. Now when we select any item from the DropDownList it will fetch the result from the database and display it on the screen in a Datagrid. All of this will happen with NO POSTBACK.

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.

UPDATE:

I forgot to add in the article that you 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>

AJAX IN ACTION:

Our first task is that when the page is loaded the DropDownList 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 dataset and bind it to the dropdownlist. 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 that this method is marked with 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(). UsingAjax is the name of the class which contains the GetDropDownListData method which we just implement few moments ago. Then we call FillDropDownList_CallBack() which contains the actual code to populate the DropDownList.

Take a look at the line below:

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

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

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

Now let's go and see how 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 BindControls() method. Keep in mind we have already implemented FillDropDownList() method above.

function BindControls()
{
FillDropDownList();
}

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

<body onload="BindControls();">

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!