使用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" >
          <!-- <enableWebScript /> -->
          < 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,
                width: 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如下图：