亚洲av成人在线一区,中文字幕国产精品二区,少妇又爽又刺激视频

ExtJs與WCF交互:生成樹上文做了下Ajax與WCF進行json交互的簡單介紹,本文闡述一個具體的實際應用:ExtJs與WCF交互,生成樹.也很簡單

上文做了下Ajax與WCF進行json交互的簡單介紹,本文闡述一個具體的實際應用:ExtJs與WCF交互,生成樹.也很簡單.先看看最終的效果吧:

第一步: 創建一個.net framework 3.5的網站項目ExtJsTreeWcf

第二步: 在網站項目中創建一個啟用了Ajax的WCF服務WcfTreeService.svc，創建好之后，對該服務做如下的更改：

1）在WcfTreeService.svc中增加Factory="System.ServiceModel.Activation.WebServiceHostFactory",打開WcfTreeService.Svchtml編輯器的方法如下：

添加Factory之后的html為

2）去除web.config中的<enableWebScript/>

第三步：在WcfTreeService.svc修改代碼為：

[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 = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class WcfTreeService

{

// 添加 [WebGet] 屬性以使用 HTTP GET

[OperationContract]

[WebInvoke(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] 標記它們

}

其中treenode是數據契約，而WcfTreeService是服務契約，服務操作GetTree返回Json編碼格式數據

第四步：拷貝extjs的腳本資源拷貝到項目中的js目錄，然后在default.aspx中添加對extjs腳本的引用：

第五步：在default.aspx增加如下的頁面元素：

<h2>ExtJs與WCF交互-樹</h2>

</div>

在<head></head>中添加如下腳本：

Ext.onReady(function() {

var Tree = Ext.tree;

var tree = new Tree.TreePanel( {

rootVisible: false,

el : 'tree-div',//目標div容器

width: 175,

height:200,

autoScroll : true,

animate : true,

enableDD : true,

loader : new Tree.TreeLoader( {

dataUrl : 'WcfTreeService.svc/GetTree'

})

});

var root = new Tree.AsyncTreeNode( {

text : '根結點',

draggable : false,

id : '-100'

});

tree.setRootNode(root);

tree.render();

root.expand();

});

</script>

瀏覽頁面default.aspx便出現文章開頭的頁面效果

利用httpwacth察看WcfTreeService.svc/GetTree的輸出如下：

[{"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"}]

程序示例項目： /Files/jillzhang/ExtJsTreeWcf.rar

作者：jillzhang
出處：http://jillzhang.cnblogs.com/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

Robin's Space

ExtJs與WCF交互:生成樹

公告