ExtJs与WCF交互: 生成树

简介

在现代的Web应用程序开发中，前端框架ExtJs和后端服务框架WCF的结合是非常常见的。ExtJs作为一种强大的JavaScript框架，提供了丰富的UI组件和数据处理能力，而WCF则提供了强大的服务端功能，可以方便地与数据库和其他外部资源进行交互。本文将介绍如何使用ExtJs和WCF实现生成树的功能。

准备工作

在使用ExtJs和WCF之前，我们需要先进行一些准备工作。首先，确保你已经安装了最新版本的ExtJs和WCF。其次，你需要在你的项目中准备好一些用于生成树的数据。

创建基础界面

首先，我们需要创建一个基础的界面来展示生成树。可以使用ExtJs提供的Grid和Tree组件来实现这个界面。具体的代码如下所示：

# Base.html

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs与WCF交互: 生成树</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.create('Ext.grid.Panel', {
                title: 'Generated Tree',
                renderTo: Ext.getBody(),
                height: 300,
                width: 400,
                store: Ext.create('Ext.data.TreeStore', {
                    // 这里填写你的WCF服务地址
                    proxy: {
                        type: 'ajax',
                        url: 'http://your-wcf-service-url',
                        reader: {
                            type: 'json'
                        }
                    },
                    root: {
                        text: 'Root',
                        expanded: true
                    }
                }),
                columns: [{
                    xtype: 'treecolumn',
                    text: 'Name',
                    dataIndex: 'name',
                    flex: 2
                }, {
                    text: 'Type',
                    dataIndex: 'type',
                    flex: 1
                }]
            });
        });
    </script>
</head>
<body></body>
</html>

在这段代码中，我们首先引入了ExtJs和样式文件。然后，通过Ext.onReady函数在页面加载完成后创建一个GridPanel组件。我们为GridPanel设置了标题、高度、宽度和数据源等属性。数据源使用了Ext.data.TreeStore类型，并通过一个WCF服务的地址来获取数据。在数据源中，我们指定了根节点的名称和展开状态。接下来，我们为GridPanel设置了两列：Name和Type，分别用于显示树节点的名称和类型。

创建WCF服务

接下来，我们需要创建一个WCF服务来提供生成树的数据。具体的代码如下所示：

// TreeService.cs

using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Web;

namespace TreeService
{
    [ServiceContract]
    public interface ITreeService
    {
        [OperationContract]
        [WebGet(ResponseFormat = WebMessageFormat.Json)]
        List<TreeNode> GetTree();
    }

    public class TreeService : ITreeService
    {
        public List<TreeNode> GetTree()
        {
            // 这里填写你的树节点数据逻辑
            List<TreeNode> nodes = new List<TreeNode>();

            return nodes;
        }
    }

    public class TreeNode
    {
        public string name { get; set; }
        public string type { get; set; }
        public List<TreeNode> children { get; set; }
    }
}

在这段代码中，我们首先创建了一个WCF服务接口ITreeService，其中包含了一个用于获取树节点数据的方法GetTree。接着，我们创建了一个实现了ITreeService接口的TreeService类。在TreeService类中，我们实现了GetTree方法，该方法返回一个包含了树节点数据的列表。我们还创建了一个TreeNode类，用于表示树节点的数据结构。

配置WCF服务

完成了WCF服务的代码编写后，我们需要将其配置为一个可部署的服务。具体的配置步骤如下：

打开Visual Studio的“工具”菜单，选择“NuGet包管理器”->“程序包管理器控制台”。
在控制台中输入以下命令来安装WCF服务相关的包：

Install-Package Microsoft.AspNet.WebApi
Install-Package Microsoft.AspNet.WebApi.WebHost

将上面创建的TreeService.cs文件添加到你的项目中。
打开Global.asax.cs文件，并添加以下代码：

public class Global : System.Web.HttpApplication
{
    protected void Application_Start(object sender, EventArgs e)
    {
        RouteTable.Routes.MapRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        RouteTable.Routes.MapRoute(
            name: "ExtJsApi",
            routeTemplate: "{*url}",
            defaults: new { controller = "Tree", action = "Index" }
        );
    }
}

在项目中创建一个新的控制器文件TreeController.cs，并添加以下代码：

using System.Collections.Generic;
using System.Web.Http;

namespace TreeService.Controllers
{
    public class TreeController : ApiController
    {
        [HttpGet]
        public List<TreeNode> Index()
        {
            TreeService service = new TreeService();
            return service.GetTree();
        }
    }
}

编译并运行你的项目，确保WCF服务能够正常访问。

运行和测试

完成了以上的所有步骤后，你可以通过访问Base.html文件来运行和测试你的生成树功能了。打开浏览器，输入http://your-base-url/Base.html，然后按下回车键。如果一切正常，你应该能看到一个带有树形结构的Grid控件，其中包含了你在GetTree方法中设置的树节点数据。

总结

本文介绍了如何使用ExtJs和WCF来实现生成树的功能。我们首先创建了一个基础界面来展示生成树，然后创建了一个WCF服务来提供树节点数据。通过配置WCF服务的相关设置，我们最终实现了一个完整的生成树的功能。希望本文能对你有所帮助。

参考资料

本文来自极简博客，作者：天空之翼，转载请注明原文链接：ExtJs与WCF交互: 生成树