使用vs2010+WCF发布json数据，ExtJS4.0进行调用

使用vs2010+WCF发布json数据，ExtJS4.0进行调用

花了近一天的时间调试解决，希望对有相同需要的朋友有帮助：
1、新建一空网站,添加一个web页面webform1.aspx，添加ExtJs相关引用

<link href="ExtJs4.0.7/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ExtJs4.0.7/bootstrap.js" type="text/javascript"></script>
2、添加一个启用AJAX的WCF服务Service1.svc，如下图：
3、修改web.config文件，将<enableWebScript />注释掉，换成<webHttp />，这一步很关键，
<system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="WcfAjaxDemo.Service1AspNetAjaxBehavior">
          
          <webHttp />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
      multipleSiteBindingsEnabled="true" />
    <services>
      <service name="WcfAjaxDemo.Service1">
        <endpoint address="" behaviorConfiguration="WcfAjaxDemo.Service1AspNetAjaxBehavior"
          binding="webHttpBinding" contract="WcfAjaxDemo.Service1" />
      </service>
    </services>
</system.serviceModel>
4、WCF中的方法前加上
[WebGet(RequestFormat = WebMessageFormat.Xml, ResponseFormat = WebMessageFormat.Json)]，这一步也很关键，如下：
    [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 = "WcfAjaxDemo")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class Service1
    {
        // 要使用 HTTP GET，请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json)
        // 要创建返回 XML 的操作，
        //     请添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)]，
        //     并在操作正文中包括以下行:
        //         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
        [OperationContract]
        [WebGet(RequestFormat = WebMessageFormat.Xml, 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] 标记它们
    }
在IE地址栏里输入http://localhost:18564/Service1.svc/GetTree，测试WCF是否正常，正常会提示文件下载，用记事本打开后显示如下：
[{"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"}]

如果不正常会出现如下提示，请检查第3、4步
5、客户端使用ExtJs调用生成树TreePanel
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WcfAjaxDemo.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="ExtJs4.0.7/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ExtJs4.0.7/bootstrap.js" type="text/javascript"></script>
    <script type="text/jscript">
        Ext.require(['*']);

        Ext.onReady(function () {
            var store = Ext.create('Ext.data.TreeStore', {
                proxy: {
                    type: 'ajax',
                    url: 'Service1.svc/GetTree'
                },
                root: {
                    text: 'Ext JS',
                    id: 'src',
                    expanded: true
                },
                folderSort: true,
                sorters: [{
                    property: 'text',
                    direction: 'ASC'
                }]
            });

            var tree = Ext.create('Ext.tree.Panel', {
                id: 'tree',
                store: store,
                250,
                height: 300,
                viewConfig: {
                    plugins: {
                        ptype: 'treeviewdragdrop',
                        appendOnly: true
                    }
                },
                renderTo: document.body
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    </form>
</body>
</html>
6、运行webform1.aspx如下图：
相关阅读:
TinySpider开源喽
 TinyXmlParser开源喽
 Tiny快速入门之控制层开发
 TinyDBRouter
TinyIOC
开源前要做好哪些准备工作？
分布式锁的简单实现
 TinyDBCluster Vs routing4db
HTML5基础（五）
HTML5基础（四）
原文地址：https://www.cnblogs.com/suncarry/p/2335983.html