首先我们今天要用到的是ajax.net professional ，您可以从http://www.schwarz-interactive.de/ 获取关于ajax.net的相关信息。其次还需要知道xml数据岛的相关知识。下面我们先来看一个简单的绑定例子

      首先我们今天要用到的是ajax.net professional ，您可以从http://www.schwarz-interactive.de/ 获取关于ajax.net的相关信息。其次还需要知道xml数据岛的相关知识。下面我们先来看一个简单的绑定例子：

　　第一步先确定xml数据源

＜xml id="xmldata" name="xmldata"＞
　＜root＞
　　＜metadata＞
　　　＜author＞john smith＜/author＞
　　　＜generator＞visual notepad＜/generator＞
　　　＜pagetype＞reference＜/pagetype＞
　　　＜abstract＞specifies a data island＜/abstract＞
　　＜/metadata＞
　　＜metadata＞
　　　＜author＞john smith2＜/author＞
　　　＜generator＞visual notepad2＜/generator＞
　　　＜pagetype＞reference2＜/pagetype＞
　　　＜abstract＞specifies a data island2＜/abstract＞
　　＜/metadata＞
　　＜metadata＞
　　　＜author＞john smith3＜/author＞
　　　＜generator＞visual notepad3＜/generator＞
　　　＜pagetype＞reference3＜/pagetype＞
　　　＜abstract＞specifies a data island3＜/abstract＞
　　＜/metadata＞
　＜/root＞
＜/xml＞

　　第二步确定绑定容器，在这里我们使用table

＜table datasrc="#xmldata" border=1＞
　＜tr＞
　　＜td＞＜span datafld="author"＞loading...＜/span＞＜/td＞
　　＜td＞＜span datafld="generator"＞loading...＜/span＞＜/td＞
　　＜td＞＜span datafld="pagetype"＞loading...＜/span＞＜/td＞
　　＜td＞＜span datafld="abstract"＞loading...＜/span＞＜/td＞
　＜/tr＞
＜/table＞

　　把这两段代码copy到您的html页面运行既可看到效果。

　　第一段是我们的xml数据源，也就是要绑定的数据，metadata结点相当于表名， author、generator、pagetype、abstract相当于列名，下面的table是用来显示数据的容器。＜table datasrc="#xmldata" border=1＞是指定table的数据源，＜span datafld="author"＞loading...＜/span＞绑定字段名。

　　好了，知道这些之后就再来看如何结合ajax实现无刷新绑定。

　　第一步：配置ajax，在web.config文件中加入配置节：

＜httphandlers＞
＜add verb="post,get" path="ajaxpro/*.ashx" type="ajaxpro.ajaxhandlerfactory, ajaxpro"/＞
＜/httphandlers＞

　　第二步，编写返回数据集的代码：

public class myclass
{
　[ajaxmethod]
　public string getdataset()
　{
　　dataset dst = new dataset();
　　datatable dt = new datatable();
　　dt.columns.add("text");
　　dt.columns.add("number");
　　random random = new random(guid.newguid().gethashcode());
　　for (int i = 0; i ＜ random.next(10,20); i++)
　　{
　　　datarow row = dt.newrow();
　　　row["text"] = guid.newguid().tostring("n");
　　　row["number"] = random.next(100);
　　　dt.rows.add(row);
　　}
　　dst.tables.add(dt);
　　string text = "";
　　using(memorystream ms = new memorystream())
　　{
　　　dst.writexml(ms);
　　　ms.position = 0;
　　　streamreader sr = new streamreader(ms);
　　　text = sr.readtoend();
　　}
　　return text;
　}
}

　　第三步：在page_load中注册该方法，ajaxpro.utility.registertypeforajax(typeof(webtest1.ajaxtest1));（webtest1是名称空间的名字）

　　第四步：添加客户端绑定

＜input onclick="webtest1.myclass.getdataset(callback)" type="button" value="getdataset"＞
＜div id="odatapanel"＞
＜/div＞
＜table datasrc="#xmldata" width="500" border="1" cellspacing="1" cellpadding="1"＞
　＜thead＞
　　＜tr＞
　　　＜th width="70%"＞姓名＜/th＞
　　　＜th width="30%"＞年龄＜/th＞
　　＜/tr＞
　＜/thead＞
　＜tr＞
　　＜td＞＜span datafld="text"＞＜/span＞＜/td＞
　　＜td＞＜span datafld="number"＞＜/span＞＜/td＞
　＜/tr＞
＜/table＞＜div id="odatapanel"＞是准备用来存放xml数据源的容器

　　第五步：编定加载数据的javascript代码

function callback(res)
{
if(!res.error)
{
document.all.odatapanel.innerhtml = '＜xml id="xmldata"＞'+ res.value +'＜/xml＞';
}
else
{
alert(res.error.message);
}
}