上文做了下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"}]
程序示例项目: /Files/jillzhang/ExtJsTreeWcf.rar