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.

public DataSet GetBuildings()

return ds;

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

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

if(price!="")

if(area!="")

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>

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