简单使用 Ajax

realhossam

1.18/5 (4投票s)

2006年3月28日

1分钟阅读

21718

389

在 .net 中简单使用 Ajax 技术

引言

本文介绍如何通过使用 shwartz 制作的 Ajax.dll 实现一个简单的网页来使用 ajax 技术。

1) 创建您的应用程序。
2) 创建您的数据库

表名 (buildings) 列名 (BuildingID, Price, Area, Address, Image)

3) 添加对 Ajax.dll 的引用。
4) 设计包含您的网页的业务逻辑的类。

[Ajax.AjaxMethod()]

publicDataSet GetBuildings()

{

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

returnds;

}

[Ajax.AjaxMethod()]

publicDataSet Search(字符串price,字符串priceCondition,字符串area,字符串areaCondition)

{

字符串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);

returnds;

}

5) 在每个将被 java script 调用的方法上添加属性 [Ajax.AjaxMethod()]。

6) 添加到页面加载中，请注意获取您所创建的类的类型。

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

7) 在 aspx 中创建 2 个函数：第一个将调用服务器端方法，第二个将是它的回调。

//2 个用于获取所有建筑物的函数

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) 循环访问返回的数据。

9) 将此添加到 web.config

简单使用 Ajax

AjaxTesting/Ajax.zip

下载源代码

引言