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

最新推荐文章于 2024-08-20 21:14:58 发布

iteye_11002

最新推荐文章于 2024-08-20 21:14:58 发布

阅读量247

点赞数

文章标签： json javascript xhtml ViewUI

今天在论坛中有人问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(',')+"]}"); 
}
}
 
 

例子完了.很容易吧.在实际的开发中往往会把页面中的javascript脚本单独写到一个js文件中.这样会有很多的好处.

本示例中我用ashx(HttpHandler)文件来处理客户端请求,你也可以用aspx,web services等等.

iteye_11002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext异步请求一个aspx/ashx/web service取得数据,服务端返回一个json.然后客户端接收并显示....

今天在论坛中有人问ext和asp.net是如何进行交互的,对于一个刚入门的新手来说,这个问题可能会使其比较迷惑,下面我写一个非常简单的例子来说明一下ext如何与asp.net来进行数据交互Default.htm:&lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xht...
复制链接

扫一扫