ext异步请求一个aspx/ashx/web service取得数据,服务端返回一个json.然后客户端接收并显示....

最新推荐文章于 2025-12-04 16:02:23 发布

最新推荐文章于 2025-12-04 16:02:23 发布 · 286 阅读

文章标签：

今天在论坛中有人问ext和asp.net是如何进行交互的,对于一个刚入门的新手来说,这个问题可能会使其比较迷惑,下面我写一个非常简单的例子来说明一下ext如何与asp.net来进行数据交互

Default.htm:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>UntitledPage</title>

<linkrel="stylesheet"type="text/css"href="ext/resources/css/ext-all.css"/>

<scripttype="text/javascript"src="ext/adapter/ext/ext-base.js"></script>

<scripttype="text/javascript"src="ext/ext-all.js"></script>

</head>

<body>

<divid="listContainer"></div>

<scripttype="text/javascript">

varstore=newExt.data.JsonStore({

url:'DefaultHandler.ashx?method=getlist',
root:'items',
remoteSort:true,
fields:[
'TestName',
'TestValue'
],
listeners:{
load:function(store,records,options){
grid.render();
},
loadexception:function(proxy,options,response){
Ext.Msg.alert('Loaddataerror!',response.responseText);
}
}
});


Ext.onReady(function(){
Ext.QuickTips.init();
store.load();
});



varlistContainer=Ext.get("listContainer");

vargrid=newExt.grid.GridPanel({
el:'listContainer',
width:listContainer.getComputedWidth(),
autoHeight:true,
store:store,
disableSelection:false,
loadMask:true,
deferRowRender:false,
sm:newExt.grid.RowSelectionModel({singleSelect:true}),
columns:[
{
header:'name',
dataIndex:'TestName',
sortable:true
},{
header:'value',
dataIndex:'TestValue',
sortable:true
}]
});



window.onresize=function(){
grid.setWidth(listContainer.getComputedWidth());
};
functionButton1_onclick(){
//这里简单的来访问一下store中的数据
alert(store.data.items[0].data.TestName);
alert(store.data.items[0].data.TestValue);
}



</script>

<inputid="Button1"type="button"value="display"onclick="returnButton1_onclick()"/>

</body>

</html>

DefaultHandler.ashx:

<%@WebHandlerLanguage="C#"Class="DefaultHandler"%>

usingSystem;

usingSystem.Web;

usingSystem.Data;

publicclassDefaultHandler:IHttpHandler{

publicvoidProcessRequest(HttpContextcontext){

stringstr=context.Request.QueryString["method"];

if(string.IsNullOrEmpty(str))
{

context.Response.Write("error!");

return;
}

switch(str)
{

case"getlist":
GetList(context);

break;

//下边还有可以接着写. 
}
context.Response.End();
}

publicboolIsReusable{

get{

returnfalse;
}
}

publicvoidGetList(HttpContextcontext)
{

//这里模拟一个DataTable,实际应用中可能是去数据库里查询数据 

DataTabledt=newDataTable();

dt.Columns.Add("TestName",typeof(string));

dt.Columns.Add("TestValue",typeof(string));

for(inti=0;i<6;i++)
{
DataRowdr=dt.NewRow();

dr["TestName"]="TestName"+i.ToString();

dr["TestValue"]="TestValue"+i.ToString();
dt.Rows.Add(dr);
}

//将一个DataTable中的数据转成json,实际开发中可以用Newtonsoft.Json等 

//组件将集合类等,方便的转成json对象 

System.Text.StringBuildersb=newSystem.Text.StringBuilder();

sb.Append("{items:[");

foreach(DataRowdrindt.Rows)
{

sb.Append("{");

sb.AppendFormat("TestName:'{0}',TestValue:'{1}'",dr[0],dr[1]);

sb.Append("},");
}

//输出拼成的json 

context.Response.Write(sb.ToString().Trim(',')+"]}");
}
}