上文做了下Ajax与WCF进行json交互的简单介绍,本文阐述一个具体的实际应用:ExtJs与WCF交互,生成树.也很简单.先看看最终的效果吧:
第一步: 创建一个.net framework 3.5的网站项目ExtJsTreeWcf
第二步: 在网站项目中创建一个启用了Ajax的WCF服务WcfTreeService.svc，创建好之后，对该服务做如下的更改：
1）在WcfTreeService.svc中增加Factory="System.ServiceModel.Activation.WebServiceHostFactory",打开WcfTreeService.Svchtml编辑器的方法如下：
添加Factory之后的html为
2）去除web.config中的<enableWebScript/>
第三步：在WcfTreeService.svc修改代码为：
[DataContract] public class
treenode 
{ 
[DataMember] public string id; [DataMember] public string text; [DataMember] public List<treenode> children = new List<treenode>(); [DataMember] public string cls; [DataMember] public bool leaf; 
}
[ServiceContract(Namespace = ""
)] [AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)] public class
WcfTreeService
{ // 添加 [WebGet] 属性以使用 HTTP GET [OperationContract] [WebInvoke(ResponseFormat=WebMessageFormat.Json)] public treenode[] GetTree() 
{ // 在此处添加操作实现 treenode t = new treenode(); t.id = "noe1"; t.text = "节点1"; t.cls = "folder"; treenode t0 = new treenode(); t0.id = "noe1_0"; t0.text = "节点1_0"; t0.cls = "folder"; t0.leaf = true; t.children.Add(t0); treenode t1 = new treenode(); t1.cls = "folder"; t1.id = "000"; t1.text = "节点1"; treenode t2 = new treenode(); t2.id = "noe1_1"; t2.text = "节点1_1"; t2.cls = "folder"; t2.leaf = true; t1.children.Add(t2); List<treenode> nodes = new List<treenode>(); nodes.Add(t); nodes.Add(t1); return nodes.ToArray(); 
} // 在此处添加更多操作并使用 [OperationContract] 标记它们 }
}
其中treenode是数据契约，而WcfTreeService是服务契约，服务操作GetTree返回Json编码格式数据
第四步：拷贝extjs的脚本资源拷贝到项目中的js目录，然后在default.aspx中添加对extjs脚本的引用：
<link rel="stylesheet" type="text/css" href="js/ext2.1/resources/css/ext-all.css">
<script type="text/javascript" src="js/ext2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext2.1/ext-all.js"></script>
第五步：在default.aspx增加如下的页面元素： <h2>ExtJs与WCF交互-树</h2>
<div id="tree-div">
</div>
在<head></head>中添加如下脚本：
<script type="text/javascript">
Ext.onReady(function()
{ var Tree = Ext.tree; var tree = new Tree.TreePanel( { rootVisible: false, el : 'tree-div',//目标div容器 width: 175, height:200, autoScroll : true, animate : true, enableDD : true, loader : new Tree.TreeLoader( { dataUrl : 'WcfTreeService.svc/GetTree' }) }); var root = new Tree.AsyncTreeNode( { text : '根结点', draggable : false, id : '-100' }); tree.setRootNode(root); tree.render(); root.expand(); }
); </script>
浏览页面default.aspx便出现文章开头的页面效果
利用httpwacth察看WcfTreeService.svc/GetTree的输出如下：
[{"children":[{"children":[],"cls":"folder","id":"noe1_0","leaf":true,"text":"节点1_0"}],"cls":"folder","id":"noe1","leaf":false,"text":"节点1"},{"children":[{"children":[],"cls":"folder","id":"noe1_1","leaf":true,"text":"节点1_1"}],"cls":"folder","id":"000","leaf":false,"text":"节点1"}]