今天在论坛中有人问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等等.