ExtJs与WCF交互:生成树

上文做了下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

posted @ 2008-06-15 10:05 Robin Zhang 阅读(...) 评论(...) 编辑 收藏