这一次我们用WCF来替代WebService服务.
还是先创建一个WebApplication工程
添加Grid.htm文件,代码如下:
引用的ext-base.js,ext-all.js,resources/css/ext-all.css文件在www.extjs.com中能够下到
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
< script src ="/ExtJs/ext-base.js" type ="text/javascript" ></ script >
< script src ="/ExtJs/ext-all.js" type ="text/javascript" ></ script >
< link href ="/resources/css/ext-all.css" rel ="stylesheet" type ="text/css" />
</ head >
< body >
< div >
< span style ="float:left; margin:20px 10px 0px 20px" id ="grid" ></ span >< span style ="float:left; margin:20px 10px 0px 20px" id ="group" ></ span >
</ div >
< script type ="text/javascript" > ...
<!--
Ext.onReady(getValue);//onReady为页面加载时运行,参数为函数名
function getValue()
...{
GetWebServiceData();//读取数据
}
function GetWebServiceData()
...{
Ext.Ajax.request(
...{
method:"get",
url:"/testsvc.svc/GridsJson",
success:ExtSuccess,
headers:...{'Content-Type':'application/json;utf-8'}//在这里一定要指定头信息为json,否则将返回的是XML,而不是Json
}
)
}
//responseText返回的Json字符串为:
//{"d":"{'source':[{'id':0,'gname':'综合网址','gchr':null,'gcharge_id':null,'gstatus_id':null,'gsystem_id':null,'gtype_id':null,'gdev':null,'gopt':null,'galias':'collects','gdate':null,'gdes':null,'gtags':null,'gimg':null,'gweb':null,'gimp_id':null,'gtel':null,'gemail':null,'createdxml':false},
// {'id':10001,'gname':'春秋Q传','gchr':'C','gcharge_id':null,'gstatus_id':15,'gsystem_id':2,'gtype_id':6,'gdev':'金山软件','gopt':'金山软件','galias':'chunqiuqzhuan','gdate':null,'gdes':null,'gtags':'金山,2D,春秋,CQ,可爱','gimg':'','gweb':'http://cq.xoyo.com/','gimp_id':9,'gtel':'028-85437733-5','gemail':'-','createdxml':true},
// {'id':10003,'gname':'刀Online','gchr':'D','gcharge_id':null,'gstatus_id':16,'gsystem_id':2,'gtype_id':6,'gdev':'韩国Inix Soft','gopt':'世界都','galias':'dao','gdate':null,'gdes':null,'gtags':'3D,PK,变身,战场,宠物','gimg':'','gweb':'http://www.kalonline.com.cn/','gimp_id':6,'gtel':'-','gemail':'kefu@kalonline.com.cn','createdxml':true},
// {'id':10004,'gname':'风火之旅','gchr':'F','gcharge_id':null,'gstatus_id':15,'gsystem_id':2,'gtype_id':6,'gdev':'北京林果','gopt':'久游网','galias':'fenghuozhilv','gdate':null,'gdes':null,'gtags':'久游,3D,国战,祭炼,副本','gimg':'','gweb':'http://fj.9you.com/','gimp_id':6,'gtel':'021-61361878','gemail':'fj@staff.9you.com','createdxml':true},
// {'id':10005,'gname':'封印传说','gchr':'F','gcharge_id':null,'gstatus_id':14,'gsystem_id':2,'gtype_id':6,'gdev':'韩国NFLAVOR','gopt':'雷穹网络','galias':'fenyingchuanshuo','gdate':null,'gdes':null,'gtags':'3D,宠物,摆摊,商城,封印','gimg':'','gweb':'http://fy.lqn.cn/','gimp_id':8,'gtel':'0535-2102808','gemail':'gamemaster@lqn.cn','createdxml':true},
// {'id':10006,'gname':'龙影','gchr':'L','gcharge_id':null,'gstatus_id':13,'gsystem_id':2,'gtype_id':6,'gdev':'智艺网络','gopt':'智艺网络','galias':'anyingshenji','gdate':null,'gdes':null,'gtags':'3D,转职,地下城,MMORPG,PK','gimg':'','gweb':'http://www.52sol.com/','gimp_id':8,'gtel':'-','gemail':'-','createdxml':true},
// {'id':10007,'gname':'飚车','gchr':'B','gcharge_id':null,'gstatus_id':16,'gsystem_id':2,'gtype_id':7,'gdev':'SEGA','gopt':'天纵网络','galias':'biaoche','gdate':null,'gdes':null,'gtags':'天纵,3D,SEGA,极速,牌照','gimg':'','gweb':'http://ctr.joyzone.com.cn/','gimp_id':15,'gtel':'021-61206611','gemail':'ctcs@joyzone.com.cn','createdxml':true},
// {'id':10008,'gname':'华夏Ⅱ','gchr':'H','gcharge_id':null,'gstatus_id':17,'gsystem_id':2,'gtype_id':6,'gdev':'深圳网域','gopt':'深圳网域','galias':'huaxia2','gdate':null,'gdes':null,'gtags':'网域,2D,变身,战场,MMORPG','gimg':'','gweb':'http://www.huaxia2.com/','gimp_id':8,'gtel':'0755-26952799','gemail':'hx@szdomain.com','createdxml':true},
// {'id':10009,'gname':'巨人','gchr':'J','gcharge_id':null,'gstatus_id':14,'gsystem_id':2,'gtype_id':6,'gdev':'巨人网络','gopt':'巨人网络','galias':'juren','gdate':null,'gdes':null,'gtags':'巨人,2.5D,MMORPG,任务,职业','gimg':'','gweb':'http://jr.ztgame.com/','gimp_id':7,'gtel':'021-61205656','gemail':'-','createdxml':true},
// {'id':10010,'gname':'大话西游3','gchr':'D','gcharge_id':null,'gstatus_id':17,'gsystem_id':2,'gtype_id':6,'gdev':'网易','gopt':'网易','galias':'dahuaxiyou3','gdate':null,'gdes':null,'gtags':'网易,大话,2D,回合,宠物','gimg':'','gweb':'http://xy3.163.com/','gimp_id':8,'gtel':'020-83918161','gemail':'-','createdxml':true}]}"}
function ExtSuccess(results)
...{
var jsonData = Ext.util.JSON.decode(results.responseText);
jsonData = Ext.util.JSON.decode(jsonData.d);//将返回的Json字符串转换为Json对象
var reader=new Ext.data.JsonReader(
...{
//totalProperty: "results",
//id: "id"
root:"source" //构造元数据的数组由jsonData.source得到
},[
//以下属性为source对象数组中每个对象的属性映射
...{name:'id'}, //id
...{name: 'gname'} //如果name与mapping同名,可以省略mapping
]
)
//图表一 Start
//生成元数据
var store=new Ext.data.Store(...{
reader:reader
});
store.loadData(jsonData);
//现在配置列信息,列信息的dataIndex必须在reader的名字映射中有,例:{header:'姓名',sortable: true,dataIndex:'gname'}的gname必须在{name: 'gname'}中存在
var col=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(...{header:'序号',width:30}),//计算行数,无法映射
...{header:'ID',sortable: true,dataIndex:'id'},
...{header:'姓名',sortable: true,dataIndex:'gname'}
]);
//配置视图信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列显示/隐藏';
//现在我们有一个可用的grid了,别骄傲这只是第一步
var grid=new Ext.grid.GridPanel(...{
//el:Ext.getBody(),//要存放绘制的表格的对象(方法一)
renderTo:Ext.get('grid').dom,//要存放绘制的表格的对象(方法二)
height:300,//不赋值为默认
width:200,//不赋值为默认
store:store,
cm:col,
view:view
});
//grid.render();//绘制表格(方法一),下面的分组有相同的三种用法
//图表一 End
//分组图表 Start
//现在我们需要一个GroupingStore
var gstore=new Ext.data.GroupingStore(...{
reader:reader,
groupField:'name',
groupOnSort:true,
sortInfo:...{field: 'id', direction: "ASC"} //使用GroupingStore时必须指定sort
});
gstore.loadData(jsonData);
//扩展一下我们的grid,让他能分组当然会更酷一点
var ggrid = new Ext.grid.GridPanel(...{
ds: gstore,
cm:col,
view: new Ext.grid.GroupingView(...{
forceFit:true,
sortAscText :'正序',
sortDescText :'倒序',
columnsText:'列显示/隐藏',
groupByText:'依本列分组',
showGroupsText:'分组显示',
groupTextTpl: '{text} ({[values.rs.length]} 条记录)'
}),
frame:true,
width: 400,//不赋值为默认
height: 600,//不赋值为默认
collapsible: true,
animCollapse: false,
//renderTo:Ext.getBody()
renderTo:Ext.get('group').dom
});
//分组图表 End
}
//-->
</ script >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
< script src ="/ExtJs/ext-base.js" type ="text/javascript" ></ script >
< script src ="/ExtJs/ext-all.js" type ="text/javascript" ></ script >
< link href ="/resources/css/ext-all.css" rel ="stylesheet" type ="text/css" />
</ head >
< body >
< div >
< span style ="float:left; margin:20px 10px 0px 20px" id ="grid" ></ span >< span style ="float:left; margin:20px 10px 0px 20px" id ="group" ></ span >
</ div >
< script type ="text/javascript" > ...
<!--
Ext.onReady(getValue);//onReady为页面加载时运行,参数为函数名
function getValue()
...{
GetWebServiceData();//读取数据
}
function GetWebServiceData()
...{
Ext.Ajax.request(
...{
method:"get",
url:"/testsvc.svc/GridsJson",
success:ExtSuccess,
headers:...{'Content-Type':'application/json;utf-8'}//在这里一定要指定头信息为json,否则将返回的是XML,而不是Json
}
)
}
//responseText返回的Json字符串为:
//{"d":"{'source':[{'id':0,'gname':'综合网址','gchr':null,'gcharge_id':null,'gstatus_id':null,'gsystem_id':null,'gtype_id':null,'gdev':null,'gopt':null,'galias':'collects','gdate':null,'gdes':null,'gtags':null,'gimg':null,'gweb':null,'gimp_id':null,'gtel':null,'gemail':null,'createdxml':false},
// {'id':10001,'gname':'春秋Q传','gchr':'C','gcharge_id':null,'gstatus_id':15,'gsystem_id':2,'gtype_id':6,'gdev':'金山软件','gopt':'金山软件','galias':'chunqiuqzhuan','gdate':null,'gdes':null,'gtags':'金山,2D,春秋,CQ,可爱','gimg':'','gweb':'http://cq.xoyo.com/','gimp_id':9,'gtel':'028-85437733-5','gemail':'-','createdxml':true},
// {'id':10003,'gname':'刀Online','gchr':'D','gcharge_id':null,'gstatus_id':16,'gsystem_id':2,'gtype_id':6,'gdev':'韩国Inix Soft','gopt':'世界都','galias':'dao','gdate':null,'gdes':null,'gtags':'3D,PK,变身,战场,宠物','gimg':'','gweb':'http://www.kalonline.com.cn/','gimp_id':6,'gtel':'-','gemail':'kefu@kalonline.com.cn','createdxml':true},
// {'id':10004,'gname':'风火之旅','gchr':'F','gcharge_id':null,'gstatus_id':15,'gsystem_id':2,'gtype_id':6,'gdev':'北京林果','gopt':'久游网','galias':'fenghuozhilv','gdate':null,'gdes':null,'gtags':'久游,3D,国战,祭炼,副本','gimg':'','gweb':'http://fj.9you.com/','gimp_id':6,'gtel':'021-61361878','gemail':'fj@staff.9you.com','createdxml':true},
// {'id':10005,'gname':'封印传说','gchr':'F','gcharge_id':null,'gstatus_id':14,'gsystem_id':2,'gtype_id':6,'gdev':'韩国NFLAVOR','gopt':'雷穹网络','galias':'fenyingchuanshuo','gdate':null,'gdes':null,'gtags':'3D,宠物,摆摊,商城,封印','gimg':'','gweb':'http://fy.lqn.cn/','gimp_id':8,'gtel':'0535-2102808','gemail':'gamemaster@lqn.cn','createdxml':true},
// {'id':10006,'gname':'龙影','gchr':'L','gcharge_id':null,'gstatus_id':13,'gsystem_id':2,'gtype_id':6,'gdev':'智艺网络','gopt':'智艺网络','galias':'anyingshenji','gdate':null,'gdes':null,'gtags':'3D,转职,地下城,MMORPG,PK','gimg':'','gweb':'http://www.52sol.com/','gimp_id':8,'gtel':'-','gemail':'-','createdxml':true},
// {'id':10007,'gname':'飚车','gchr':'B','gcharge_id':null,'gstatus_id':16,'gsystem_id':2,'gtype_id':7,'gdev':'SEGA','gopt':'天纵网络','galias':'biaoche','gdate':null,'gdes':null,'gtags':'天纵,3D,SEGA,极速,牌照','gimg':'','gweb':'http://ctr.joyzone.com.cn/','gimp_id':15,'gtel':'021-61206611','gemail':'ctcs@joyzone.com.cn','createdxml':true},
// {'id':10008,'gname':'华夏Ⅱ','gchr':'H','gcharge_id':null,'gstatus_id':17,'gsystem_id':2,'gtype_id':6,'gdev':'深圳网域','gopt':'深圳网域','galias':'huaxia2','gdate':null,'gdes':null,'gtags':'网域,2D,变身,战场,MMORPG','gimg':'','gweb':'http://www.huaxia2.com/','gimp_id':8,'gtel':'0755-26952799','gemail':'hx@szdomain.com','createdxml':true},
// {'id':10009,'gname':'巨人','gchr':'J','gcharge_id':null,'gstatus_id':14,'gsystem_id':2,'gtype_id':6,'gdev':'巨人网络','gopt':'巨人网络','galias':'juren','gdate':null,'gdes':null,'gtags':'巨人,2.5D,MMORPG,任务,职业','gimg':'','gweb':'http://jr.ztgame.com/','gimp_id':7,'gtel':'021-61205656','gemail':'-','createdxml':true},
// {'id':10010,'gname':'大话西游3','gchr':'D','gcharge_id':null,'gstatus_id':17,'gsystem_id':2,'gtype_id':6,'gdev':'网易','gopt':'网易','galias':'dahuaxiyou3','gdate':null,'gdes':null,'gtags':'网易,大话,2D,回合,宠物','gimg':'','gweb':'http://xy3.163.com/','gimp_id':8,'gtel':'020-83918161','gemail':'-','createdxml':true}]}"}
function ExtSuccess(results)
...{
var jsonData = Ext.util.JSON.decode(results.responseText);
jsonData = Ext.util.JSON.decode(jsonData.d);//将返回的Json字符串转换为Json对象
var reader=new Ext.data.JsonReader(
...{
//totalProperty: "results",
//id: "id"
root:"source" //构造元数据的数组由jsonData.source得到
},[
//以下属性为source对象数组中每个对象的属性映射
...{name:'id'}, //id
...{name: 'gname'} //如果name与mapping同名,可以省略mapping
]
)
//图表一 Start
//生成元数据
var store=new Ext.data.Store(...{
reader:reader
});
store.loadData(jsonData);
//现在配置列信息,列信息的dataIndex必须在reader的名字映射中有,例:{header:'姓名',sortable: true,dataIndex:'gname'}的gname必须在{name: 'gname'}中存在
var col=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(...{header:'序号',width:30}),//计算行数,无法映射
...{header:'ID',sortable: true,dataIndex:'id'},
...{header:'姓名',sortable: true,dataIndex:'gname'}
]);
//配置视图信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列显示/隐藏';
//现在我们有一个可用的grid了,别骄傲这只是第一步
var grid=new Ext.grid.GridPanel(...{
//el:Ext.getBody(),//要存放绘制的表格的对象(方法一)
renderTo:Ext.get('grid').dom,//要存放绘制的表格的对象(方法二)
height:300,//不赋值为默认
width:200,//不赋值为默认
store:store,
cm:col,
view:view
});
//grid.render();//绘制表格(方法一),下面的分组有相同的三种用法
//图表一 End
//分组图表 Start
//现在我们需要一个GroupingStore
var gstore=new Ext.data.GroupingStore(...{
reader:reader,
groupField:'name',
groupOnSort:true,
sortInfo:...{field: 'id', direction: "ASC"} //使用GroupingStore时必须指定sort
});
gstore.loadData(jsonData);
//扩展一下我们的grid,让他能分组当然会更酷一点
var ggrid = new Ext.grid.GridPanel(...{
ds: gstore,
cm:col,
view: new Ext.grid.GroupingView(...{
forceFit:true,
sortAscText :'正序',
sortDescText :'倒序',
columnsText:'列显示/隐藏',
groupByText:'依本列分组',
showGroupsText:'分组显示',
groupTextTpl: '{text} ({[values.rs.length]} 条记录)'
}),
frame:true,
width: 400,//不赋值为默认
height: 600,//不赋值为默认
collapsible: true,
animCollapse: false,
//renderTo:Ext.getBody()
renderTo:Ext.get('group').dom
});
//分组图表 End
}
//-->
</ script >
</ body >
</ html >
创建WCF文件testsvc.svc
using
System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using Component;
using WebApplication1.Dbml;
namespace WebApplication1
... {
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class testsvc
...{
// 添加 [WebGet] 属性以使用 HTTP GET
[OperationContract]
public void DoWork()
...{
// 在此处添加操作实现
return;
}
// 在此处添加更多操作并使用 [OperationContract] 标记它们
[OperationContract]
[WebGet(ResponseFormat=WebMessageFormat.Json)]
public string GridsJson()
...{
LinqToSqlDataContext db = new LinqToSqlDataContext();
var sou = db.gameinfos.Select(n => n).Take(10);
return sou.toJson();
}
}
}
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using Component;
using WebApplication1.Dbml;
namespace WebApplication1
... {
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class testsvc
...{
// 添加 [WebGet] 属性以使用 HTTP GET
[OperationContract]
public void DoWork()
...{
// 在此处添加操作实现
return;
}
// 在此处添加更多操作并使用 [OperationContract] 标记它们
[OperationContract]
[WebGet(ResponseFormat=WebMessageFormat.Json)]
public string GridsJson()
...{
LinqToSqlDataContext db = new LinqToSqlDataContext();
var sou = db.gameinfos.Select(n => n).Take(10);
return sou.toJson();
}
}
}
创建扩展方法ExtendMethod.cs
using
System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Script.Serialization;
using System.Collections;
using System.Reflection;
namespace Component
... {
public static class ExtendMethod
...{
/**//// <summary>
/// 返回Json序列
/// parms字典
/// Key:Json对象名
/// Value:Json对象值
/// </summary>
/// <param name="This"></param>
/// <param name="parms">需要加入的对象</param>
/// <returns></returns>
public static string toJson(this object This,Dictionary<string,object> parms)
...{
JavaScriptSerializer json = new JavaScriptSerializer();
var ds = new ...{ source=This};
Dictionary<object,object> dic = new Dictionary<object,object>();
dic.Add("source",This);
foreach (KeyValuePair<string, object> key in parms)
...{
dic.Add(key.Key,key.Value);
}
return json.Serialize(dic);
}
/**//// <summary>
/// 返回Json序列
/// parms:加入的对象将与this对象同级
/// 未完成
/// </summary>
/// <param name="This"></param>
/// <param name="parms">需要加入的对象</param>
/// <returns></returns>
public static string toJson(this object This, params object[] parms)
...{
JavaScriptSerializer json = new JavaScriptSerializer();
json.MaxJsonLength = int.MaxValue;
Dictionary<string, object> dic = new Dictionary<string, object>();
dic.Add("source", This);
foreach (object i in parms)
...{
Type t = i.GetType();
PropertyInfo[] myproperties = t.GetProperties();
dic.Add(myproperties[0].Name, myproperties[0].GetValue(i, null));
}
return json.Serialize(dic).Replace(""","'");
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Script.Serialization;
using System.Collections;
using System.Reflection;
namespace Component
... {
public static class ExtendMethod
...{
/**//// <summary>
/// 返回Json序列
/// parms字典
/// Key:Json对象名
/// Value:Json对象值
/// </summary>
/// <param name="This"></param>
/// <param name="parms">需要加入的对象</param>
/// <returns></returns>
public static string toJson(this object This,Dictionary<string,object> parms)
...{
JavaScriptSerializer json = new JavaScriptSerializer();
var ds = new ...{ source=This};
Dictionary<object,object> dic = new Dictionary<object,object>();
dic.Add("source",This);
foreach (KeyValuePair<string, object> key in parms)
...{
dic.Add(key.Key,key.Value);
}
return json.Serialize(dic);
}
/**//// <summary>
/// 返回Json序列
/// parms:加入的对象将与this对象同级
/// 未完成
/// </summary>
/// <param name="This"></param>
/// <param name="parms">需要加入的对象</param>
/// <returns></returns>
public static string toJson(this object This, params object[] parms)
...{
JavaScriptSerializer json = new JavaScriptSerializer();
json.MaxJsonLength = int.MaxValue;
Dictionary<string, object> dic = new Dictionary<string, object>();
dic.Add("source", This);
foreach (object i in parms)
...{
Type t = i.GetType();
PropertyInfo[] myproperties = t.GetProperties();
dic.Add(myproperties[0].Name, myproperties[0].GetValue(i, null));
}
return json.Serialize(dic).Replace(""","'");
}
}
}