Simple use of Ajax

• AjaxTesting/Ajax.zip

• Download sourcecode

Introduction

This article is introducing the usage of ajax technology by implementing a simple web page using the Ajax.dll made shwartz.

 

1)Make your application.
2)Make your database:

   table name(buildings) columns(BuildingID,Price,Area,Address,Image)

3) Add reference to Ajax.dll.
4) Design your class that contains the business logic for your web page.

[Ajax.AjaxMethod()]

public DataSet GetBuildings()

{

ds=db.MySelect("select * from buildings");

return ds;

}

[Ajax.AjaxMethod()]

public DataSet Search(string price,string priceCondition,string area,string areaCondition)

{

string sqlSearch="select * from buildings where 1=1";

if(price!="")

sqlSearch+=" and price"+priceCondition+""+price+"";

if(area!="")

sqlSearch+=" and area"+areaCondition+""+area+"";

ds=db.MySelect(sqlSearch);

return ds;

}

5) Add attribute [Ajax.AjaxMethod()] on every method that will be called by java script.

6)Add to the page load, note that you get the type of the class you made.

Ajax.Utility.RegisterTypeForAjax(typeof(ClassSearch));

7) In aspx make 2 functions: first that will call the server side method, second will be its callback.

//2 functions for getting all the buildings

function GetBuildings()

{

    ClassSearch.GetBuildings(GetBuildings_callBack);

}

function GetBuildings_callBack(response)</code>

  {
       var ds=response.value;
       if(ds!=null && typeof(ds)=="object" && ds.Tables!=null)
       {
           var myDS=new Array();
           myDS[myDS.length]="<table border=1 id=tblData><tr><td                                  style=\"VISIBILITY: hidden\">BuildingID</td><td>Price</td><td>Area</td><td>Address</td><td>Image</td></tr>";
    for(var i=0;i<ds.Tables[0].Rows.length;i++)
    {
     myDS[myDS.length]="<tr>";
     myDS[myDS.length]="<td style=\"VISIBILITY: hidden\">"+ds.Tables[0].Rows[i].BuildingID+"</td>";
     myDS[myDS.length]="<td>"+ds.Tables[0].Rows[i].Price+"</td>";
     myDS[myDS.length]="<td>"+ds.Tables[0].Rows[i].Area+"</td>";
     myDS[myDS.length]="<td>"+ds.Tables[0].Rows[i].Address+"</td>";
     myDS[myDS.length]="<td><img height=30 width=30 src='"+ds.Tables[0].Rows[i].Image+"'></td>";
     myDS[myDS.length]="<td><input type=button onclick=\"window.navigate('Buildings.aspx?bid="+ds.Tables[0].Rows[i].BuildingID+"');\"     value='More                         Info'</td>";
          myDS[myDS.length]="</tr>";     
        }
        myDS[myDS.length]="</table>";
        document.getElementById("lblData").innerHTML=myDS.join("");
     }
     else
     {
        alert("Error. [3001] " + response.request.responseText);
     }
  }

8) loop through the returned data.

9) Add this to the web.config:

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