ExtJs与WCF交互:生成树

ゝ一世哀愁。 2021-11-10 04:50 227阅读 0赞

上文做了下Ajax与WCF进行json交互的简单介绍,本文阐述一个具体的实际应用:ExtJs与WCF交互,生成树.也很简单.先看看最终的效果吧:

![061508_0205_ExtJsWCF1.png][]

第一步: 创建一个.net framework 3.5的网站项目ExtJsTreeWcf

第二步: 在网站项目中创建一个启用了Ajax的WCF服务WcfTreeService.svc，创建好之后，对该服务做如下的更改：

1）在WcfTreeService.svc中增加Factory="System.ServiceModel.Activation.WebServiceHostFactory",打开WcfTreeService.Svchtml编辑器的方法如下：

![061508_0205_ExtJsWCF2.png][]

![061508_0205_ExtJsWCF3.png][]

添加Factory之后的html为

![061508_0205_ExtJsWCF4.png][]

2）去除web.config中的<enableWebScript/>

![061508_0205_ExtJsWCF5.png][]

第三步：在WcfTreeService.svc修改代码为：

![None.gif][] \[DataContract\]  
![None.gif][]  
![None.gif][]publicclass  treenode  
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]![dot.gif][] \{  
![InBlock.gif][]  
![InBlock.gif][]\[DataMember\]  
![InBlock.gif][]  
![InBlock.gif][]publicstring id;  
![InBlock.gif][]  
![InBlock.gif][]\[DataMember\]  
![InBlock.gif][]  
![InBlock.gif][]publicstring text;  
![InBlock.gif][]  
![InBlock.gif][]\[DataMember\]  
![InBlock.gif][]  
![InBlock.gif][]public List<treenode> children =new List<treenode>();  
![InBlock.gif][]  
![InBlock.gif][]\[DataMember\]  
![InBlock.gif][]  
![InBlock.gif][]publicstring cls;  
![InBlock.gif][]  
![InBlock.gif][]\[DataMember\]  
![InBlock.gif][]  
![InBlock.gif][]publicbool leaf;  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][]\[ServiceContract(Namespace ="" )\]  
![None.gif][]  
![None.gif][]\[AspNetCompatibilityRequirements(RequirementsMode =  AspNetCompatibilityRequirementsMode.Allowed)\]  
![None.gif][]  
![None.gif][]publicclass  WcfTreeService  
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]![dot.gif][] \{  
![InBlock.gif][]  
![InBlock.gif][]// 添加 \[WebGet\] 属性以使用 HTTP GET   
![InBlock.gif][]  
![InBlock.gif][]\[OperationContract\]  
![InBlock.gif][]  
![InBlock.gif][]\[WebInvoke(ResponseFormat=WebMessageFormat.Json)\]  
![InBlock.gif][]  
![InBlock.gif][]public treenode\[\] GetTree()  
![InBlock.gif][]  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]![dot.gif][]\{  
![InBlock.gif][]  
![InBlock.gif][]// 在此处添加操作实现   
![InBlock.gif][]  
![InBlock.gif][]treenode t =new treenode();  
![InBlock.gif][]  
![InBlock.gif][]t.id ="noe1";  
![InBlock.gif][]  
![InBlock.gif][]t.text ="节点1";  
![InBlock.gif][]  
![InBlock.gif][]t.cls ="folder";  
![InBlock.gif][]  
![InBlock.gif][]treenode t0 =new treenode();  
![InBlock.gif][]  
![InBlock.gif][]t0.id ="noe1\_0";  
![InBlock.gif][]  
![InBlock.gif][]t0.text ="节点1\_0";  
![InBlock.gif][]  
![InBlock.gif][]t0.cls ="folder";  
![InBlock.gif][]  
![InBlock.gif][]t0.leaf =true;  
![InBlock.gif][]  
![InBlock.gif][]t.children.Add(t0);  
![InBlock.gif][]  
![InBlock.gif][]treenode t1 =new treenode();  
![InBlock.gif][]  
![InBlock.gif][]t1.cls ="folder";  
![InBlock.gif][]  
![InBlock.gif][]t1.id ="000";  
![InBlock.gif][]  
![InBlock.gif][]t1.text ="节点1";  
![InBlock.gif][]  
![InBlock.gif][]treenode t2 =new treenode();  
![InBlock.gif][]  
![InBlock.gif][]t2.id ="noe1\_1";  
![InBlock.gif][]  
![InBlock.gif][]t2.text ="节点1\_1";  
![InBlock.gif][]  
![InBlock.gif][]t2.cls ="folder";  
![InBlock.gif][]  
![InBlock.gif][]t2.leaf =true;  
![InBlock.gif][]  
![InBlock.gif][]t1.children.Add(t2);  
![InBlock.gif][]  
![InBlock.gif][]List<treenode> nodes =new List<treenode>();  
![InBlock.gif][]  
![InBlock.gif][]nodes.Add(t);  
![InBlock.gif][]  
![InBlock.gif][]nodes.Add(t1);  
![InBlock.gif][]  
![InBlock.gif][]return nodes.ToArray();  
![InBlock.gif][]  
![ExpandedSubBlockEnd.gif][]\}  
![InBlock.gif][]  
![InBlock.gif][]  
![InBlock.gif][]  
![InBlock.gif][]// 在此处添加更多操作并使用 \[OperationContract\] 标记它们   
![InBlock.gif][]  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][]\}  
![None.gif][]  
![None.gif][]

其中treenode是数据契约，而WcfTreeService是服务契约，服务操作GetTree返回Json编码格式数据

第四步：拷贝extjs的脚本资源拷贝到项目中的js目录，然后在default.aspx中添加对extjs脚本的引用：

![None.gif][]<link rel="stylesheet" type="text/css" href="js/ext2.1/resources/css/ext-all.css">   
![None.gif][]  
![None.gif][]<script type="text/javascript" src="js/ext2.1/adapter/ext/ext-base.js"></script>   
![None.gif][]  
![None.gif][]<script type="text/javascript" src="js/ext2.1/ext-all.js"></script>   
![None.gif][]  
![None.gif][]第五步：在default.aspx增加如下的页面元素：  
![None.gif][]  
![None.gif][]<h2>ExtJs与WCF交互-树</h2>   
![None.gif][]  
![None.gif][]<div id="tree-div">   
![None.gif][]  
![None.gif][]</div>   
![None.gif][]  
![None.gif][]

在<head></head>中添加如下脚本：

![None.gif][]<script type="text/javascript">   
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]Ext.onReady(function() ![dot.gif][] \{  
![InBlock.gif][]  
![InBlock.gif][]var Tree = Ext.tree;  
![InBlock.gif][]  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]var tree =new Tree.TreePanel( ![dot.gif][]\{  
![InBlock.gif][]  
![InBlock.gif][]rootVisible: false,  
![InBlock.gif][]  
![InBlock.gif][]el : 'tree-div',//目标div容器   
![InBlock.gif][]  
![InBlock.gif][]width: 175,  
![InBlock.gif][]  
![InBlock.gif][]height:200,  
![InBlock.gif][]  
![InBlock.gif][]autoScroll : true,  
![InBlock.gif][]  
![InBlock.gif][]animate : true,  
![InBlock.gif][]  
![InBlock.gif][]enableDD : true,  
![InBlock.gif][]  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]loader : new Tree.TreeLoader( ![dot.gif][]\{  
![InBlock.gif][]  
![InBlock.gif][]dataUrl : 'WcfTreeService.svc/GetTree'  
![InBlock.gif][]  
![ExpandedSubBlockEnd.gif][]\})  
![InBlock.gif][]  
![ExpandedSubBlockEnd.gif][]\});  
![InBlock.gif][]  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]var root =new Tree.AsyncTreeNode( ![dot.gif][]\{  
![InBlock.gif][]  
![InBlock.gif][]text : '根结点',  
![InBlock.gif][]  
![InBlock.gif][]draggable : false,  
![InBlock.gif][]  
![InBlock.gif][]id : '\-100'  
![InBlock.gif][]  
![ExpandedSubBlockEnd.gif][]\});  
![InBlock.gif][]  
![InBlock.gif][]tree.setRootNode(root);  
![InBlock.gif][]  
![InBlock.gif][]tree.render();  
![InBlock.gif][]  
![InBlock.gif][]root.expand();  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][]\} );  
![None.gif][]  
![None.gif][]</script>    
![None.gif][]   
![None.gif][]

浏览页面default.aspx便出现文章开头的页面效果

利用httpwacth察看WcfTreeService.svc/GetTree的输出如下：

![None.gif][]\[\{"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][Files_jillzhang_ExtJsTreeWcf.rar]

转载于:https://www.cnblogs.com/jillzhang/archive/2008/06/15/1222233.html

[061508_0205_ExtJsWCF1.png]: /images/20211109/c2ef279d2e8440cb85fa474df1acb380.png
[061508_0205_ExtJsWCF2.png]: /images/20211109/1d4b7d0635ce4527a2b73fc73a4fdb5e.png
[061508_0205_ExtJsWCF3.png]: /images/20211109/1948be49004e4350a9836bbe24e11ed7.png
[061508_0205_ExtJsWCF4.png]: /images/20211109/895a7ceafb3e488da3fd78fedc9d7149.png
[061508_0205_ExtJsWCF5.png]: /images/20211109/0c035079342e43d4b69962e62708933b.png
[None.gif]: /images/20211109/b21c3d3cac8249108ffa33ae5660c897.png
[ExpandedBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif
[dot.gif]: /images/20211109/201780cd334b4f3cb82841da828e1384.png
[InBlock.gif]: /images/20211109/a2909f47a733418cb5d1c3ecc3cbf9ca.png
[ExpandedBlockEnd.gif]: /images/20211109/b299322c44f94a20aeaeebb40f631d3c.png
[ExpandedSubBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif
[ExpandedSubBlockEnd.gif]: /images/20211109/2de52b53b4f542d2b71c11fc4e3b4369.png
[Files_jillzhang_ExtJsTreeWcf.rar]: http://files.cnblogs.com/jillzhang/ExtJsTreeWcf.rar