使用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>
<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>
<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] 标记它们
}
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>
<!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如下图：
