Click here to Skip to main content
Click here to Skip to main content

AJAX in Action

, 28 Sep 2005
Rate this:
Please Sign up or sign in to vote.
See AJAX in action.

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 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!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

azamsharp
Web Developer
United States United States
I am the founder of knowledge base website, HighOnCoding, GridViewGuy, RefactorCode.com and ScreencastADay.com.
 
HighOnCoding is a website which will get you high legally with useful information. There are tons of articles, videos and podcasts hosted on HighOnCoding.
 
HighOnCoding.com www.HighOnCoding.com
 

My Blog:

Blog

 

Buy my iPhone app ABC Pop

Comments and Discussions

 
GeneralAjax.dll is not working [modified] Pinmemberakeelahmedqureshi7-Oct-08 18:34 
Generali am finding error in this line of code(plz help me ) Pinmembermanoj.singh18-Jun-08 19:46 
GeneralRe: i am finding error in this line of code(plz help me ) PinmemberShreepad Deshpande7-Sep-10 19:09 
Questionwhat about imagebuttons?!!! Pinmembercoolshad30-Aug-06 5:13 
GeneralHelp Pinmemberguocang18-Feb-06 7:00 
GeneralRe: Help Pinmemberazamsharp18-Feb-06 7:13 
GeneralRe: Help Pinmembermcasoni10-May-08 0:13 
GeneralThe code doesn't work PinmemberAmphysvena14-Feb-06 17:15 
GeneralzumiPage for ASP.NET PinmemberAmir L.21-Dec-05 13:13 
Generalsel1 value Pinmembertbaseflug12-Dec-05 11:19 
GeneralAjax and object binding PinsussAnonymous28-Sep-05 11:08 
NewsRe: Ajax and object binding PinmemberSarat Pediredla28-Sep-05 11:41 
GeneralRe: Ajax and object binding Pinmemberazamsharp28-Sep-05 13:52 
GeneralRe: Ajax and object binding Pinmembervbinfo28-Sep-05 22:43 
GeneralRe: Ajax and object binding PinsussAnonymous29-Sep-05 5:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 28 Sep 2005
Article Copyright 2005 by azamsharp
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid