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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Ado.Net连接池的速度测试

晚上闲来无事,突然想测试一下Ado.Net连接池带来的连接速度提升,写了以下代码: using System; using System.Configura...

2146
来自专栏大内老A

ASP.NET MVC如何实现自定义验证(服务端验证+客户端验证)

ASP.NET MVC通过Model验证帮助我们很容易的实现对数据的验证,在默认的情况下,基于ValidationAttribute的声明是验证被使用,我们只需...

1945
来自专栏大内老A

.NET Core的文件系统[5]:扩展文件系统构建一个简易版“云盘”

FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为...

2166
来自专栏walterlv - 吕毅的博客

将 async/await 异步代码转换为安全的不会死锁的同步代码

发布于 2018-03-16 03:58 更新于 2018-08...

3581
来自专栏大内老A

利用EntLib授权机制实现对ASP.NET页面的自动授权

ASP.NET默认采用UrlAuthorizationModule和FileAuthorizationModule分别实现针对请求地址和物理文件的授权,但是在很...

2299
来自专栏Java开发者杂谈

RocketMQ专题2:三种常用生产消费方式(顺序、广播、定时)以及顺序消费源码探究

​ 在进行常用的三种消息类型例子展示的时候,我们先来说一说RocketMQ的几个重要概念:

3871
来自专栏GreenLeaves

C# 多线程学习系列三之CLR线程池系列之ThreadPool

1、进程和CLR的关系 一个进程可以只包含一个CLR,也可以包含多个CLR 2、CLR和AppDomain的关系 一个CLR可以包含多个AppDomain 3、...

1322
来自专栏逸鹏说道

MVC5 Entity Framework学习之异步和存储过程

在之前的文章中,你已经学习了如何使用同步编程模型来读取和更新数据,在本节中你将学习如何实现异步编程模型。异步可以使应用程序执行更有效率,因为它可以更有效的使用服...

3809
来自专栏分布式系统和大数据处理

C#网络编程(异步传输字符串) - Part.3

这篇文章我们将前进一大步,使用异步的方式来对服务端编程,以使它成为一个真正意义上的服务器:可以为多个客户端的多次请求服务。但是开始之前,我们需要解决上一节中遗留...

1293
来自专栏恰童鞋骚年

ASP.Net MVC开发基础学习笔记:四、校验、AJAX与过滤器

  位于 System.ComponentModel.DataAnnotations 命名空间中的特性指定对数据模型中的各个字段的验证。这些特性用于定义常见的验...

1392

扫码关注云+社区

领取腾讯云代金券