當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
使用vs2010+WCF发布json数据，ExtJS4.0进行调用
生活随笔
收集整理的這篇文章主要介紹了
使用vs2010+WCF发布json数据，ExtJS4.0进行调用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
花了近一天的時間調(diào)試解決，希望對有相同需要的朋友有幫助：
??? <script src="ExtJs4.0.7/bootstrap.js" type="text/javascript"></script>
??? <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>
??? 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，請?zhí)砑?[WebGet] 特性。(默認 ResponseFormat 為 WebMessageFormat.Json)
??????? // 要創(chuàng)建返回 XML 的操作，
??????? //???? 請?zhí)砑?[WebGet(ResponseFormat=WebMessageFormat.Xml)]，
??????? //???? 并在操作正文中包括以下行:
??????? //???????? WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
??????? [OperationContract]
??????? [WebGet(RequestFormat = WebMessageFormat.Xml, ResponseFormat = WebMessageFormat.Json)]
??????? public treenode[] GetTree()
??????? {
??????????? // 在此處添加操作實現(xiàn)
??????????? treenode t = new treenode();
??????????? t.id = "noe1";
??????????? t.text = "節(jié)點1";
??????????? t.cls = "folder";
??????????? treenode t0 = new treenode();
??????????? t0.id = "noe1_0";
??????????? t0.text = "節(jié)點1_0";
??????????? t0.cls = "folder";
??????????? t0.leaf = true;
??????????? t.children.Add(t0);
??????????? treenode t1 = new treenode();
??????????? t1.cls = "folder";
??????????? t1.id = "000";
??????????? t1.text = "節(jié)點1";
??????????? treenode t2 = new treenode();
??????????? t2.id = "noe1_1";
??????????? t2.text = "節(jié)點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] 標記它們
??? }
<!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>
1、新建一空網(wǎng)站,添加一個web頁面webform1.aspx，添加ExtJs相關(guān)引用
<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服務(wù)Service1.svc，如下圖：
3、修改web.config文件，將<enableWebScript />注釋掉，換成<webHttp />，這一步很關(guān)鍵，
?
<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)]，這一步也很關(guān)鍵，如下：
[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，請?zhí)砑?[WebGet] 特性。(默認 ResponseFormat 為 WebMessageFormat.Json)
??????? // 要創(chuàng)建返回 XML 的操作，
??????? //???? 請?zhí)砑?[WebGet(ResponseFormat=WebMessageFormat.Xml)]，
??????? //???? 并在操作正文中包括以下行:
??????? //???????? WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
??????? [OperationContract]
??????? [WebGet(RequestFormat = WebMessageFormat.Xml, ResponseFormat = WebMessageFormat.Json)]
??????? public treenode[] GetTree()
??????? {
??????????? // 在此處添加操作實現(xiàn)
??????????? treenode t = new treenode();
??????????? t.id = "noe1";
??????????? t.text = "節(jié)點1";
??????????? t.cls = "folder";
??????????? treenode t0 = new treenode();
??????????? t0.id = "noe1_0";
??????????? t0.text = "節(jié)點1_0";
??????????? t0.cls = "folder";
??????????? t0.leaf = true;
??????????? t.children.Add(t0);
??????????? treenode t1 = new treenode();
??????????? t1.cls = "folder";
??????????? t1.id = "000";
??????????? t1.text = "節(jié)點1";
??????????? treenode t2 = new treenode();
??????????? t2.id = "noe1_1";
??????????? t2.text = "節(jié)點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":"節(jié)點1_0"}],"cls":"folder","id":"noe1","leaf":false,"text":"節(jié)點1"},{"children":[{"children":[],"cls":"folder","id":"noe1_1","leaf":true,"text":"節(jié)點1_1"}],"cls":"folder","id":"000","leaf":false,"text":"節(jié)點1"}]
如果不正常會出現(xiàn)如下提示，請檢查第3、4步
5、客戶端使用ExtJs調(diào)用生成樹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如下圖：
轉(zhuǎn)載于:https://www.cnblogs.com/suncarry/archive/2012/02/02/2335983.html
總結(jié)
以上是生活随笔為你收集整理的使用vs2010+WCF发布json数据，ExtJS4.0进行调用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 测试显卡cpu中文软件,显卡信息检测工具
- 下一篇： JS Compress and Deco