现在的位置: 首页 > 综合 > 正文

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

2011年12月20日 ⁄ 综合 ⁄ 共 4568字 ⁄ 字号 评论关闭

花了近一天的时间调试解决,希望对有相同需要的朋友有帮助:

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如下图:

抱歉!评论已关闭.