Ligando o jsTree programaticamente a entidades do server side usando JSON no ASP.NET

jsTree é
um componente jQuery baseado em JavaScript muito útil para exibição de conteúdo
em uma estrutura de árvore de forma hierárquica. Darei uma demonstração de
como você pode ligar o jsTree de maneira programática com os dados do Server side
utilizando JSON.

Antes de irmos para a implementação, vamos primeiro
dar uma olhada no formato de entrada do JSON para criar nós.

1.json:  [   { attributes:  { id: "root1", rel: "root" },
2.state: "open", data: "Root node 1",
3.children: [    { attributes: { id: "root1_child1", rel: "folder" },
4.data: { title: "Custom icon", icon: "../images/ok.jpg" }
5.},
6.//.. . other nodes
7.]

E
aqui está a implementação baseada na entidade de um jsTree node.

001.using System;
002.using System.Collections.Generic;
003.using System.Linq;
004.using System.Web;
005. 
006.public class JsTreeNode
007.{
008.public JsTreeNode()
009.{
010.}
011.Attributes _attributes;
012.public Attributes attributes
013.{
014.get
015.{
016.return _attributes;
017.}
018.set
019.{
020._attributes = value;
021.}
022.}
023.Data _data;
024.public Data data
025.{
026.get
027.{
028.return _data;
029.}
030.set
031.{
032._data = value;
033.}
034.}
035.string _state;
036.public string state
037.{
038.get
039.{
040.return _state;
041.}
042.set
043.{
044._state = value;
045.}
046.}
047.List<jstreenode> _children;
048.public List<jstreenode> children
049.{
050.get
051.{
052.return _children;
053.}
054.set
055.{
056._children = value;
057.}
058.}
059. 
060.}
061.public class Attributes
062.{
063.string _id;
064. 
065.public string id
066.{
067.get
068.{
069.return _id;
070.}
071.set
072.{
073._id = value;
074.}
075.}
076.string _rel;
077. 
078.public string rel
079.{
080.get
081.{
082.return _rel;
083.}
084.set
085.{
086._rel = value;
087.}
088.}
089.string _mdata;
090. 
091.public string mdata
092.{
093.get
094.{
095.return _mdata;
096.}
097.set
098.{
099._mdata = value;
100.}
101.}
102.}
103. 
104.public class Data
105.{
106.string _title;
107. 
108.public string title
109.{
110.get
111.{
112.return _title;
113.}
114.set
115.{
116._title = value;
117.}
118.}
119. 
120.string _icon;
121. 
122.public string icon
123.{
124.get
125.{
126.return _icon;
127.}
128.set
129.{
130._icon = value;
131.}
132.}
133.}
134. 
135. 
136. 
137. 
138.</jstreenode></jstreenode>

Como você
pode ver no JSON, o jsTree espera cada nó da coleção contendo a seguinte
estrutura

1.{  attributes: { id: "pjson1_5", rel: "root2" },  data: "Root node 2" }

onde
estados e filhos são campos opcionais a serem criados. Ao manter a anatomia
acima no jsTree node, podemos criar classes server side para ter o
mapeamento um-a-um esses objetos json, com composições/agregações
necessárias, de modo que podemos conectá-las com o node collection, preenchido a
partir do server side. Vamos criar um jsTreeNode principal e as outras
entidades que compõe sua anatomia como 
mostrado acima.

 < O
jsTreeNode é capaz de mapear o tipo de node do json no jsTree completamente. E
agora é hora de preencher a collection do jsTreeNode e a ligar ao JsTree.

01.using System;
02.using System.Collections.Generic;
03.using System.Linq;
04.using System.Web;
05.using System.Web.UI;
06.using System.Web.UI.WebControls;
07.using System.Web.Script.Serialization;
08. 
09.public partial class _Default : System.Web.UI.Page
10.{
11.protected void Page_Load(object sender, EventArgs e)
12.{
13.if (!IsPostBack)
14.{
15.RouteCallbacks();
16.}
17.}
18.void RouteCallbacks()
19.{
20.string callback = Request.Params["callback"];
21.if (string.IsNullOrEmpty(callback))
22.return;
23. 
24.if (callback == "GetNodesJson")
25.this.GetNodesJson();
26.}
27.void GetNodesJson()
28.{
29.List<jstreenode> nodesList = new List<jstreenode>();
30.for (int i = 1; i < 10; i++)
31.{
32.JsTreeNode node = new JsTreeNode();
33.node.attributes = new Attributes();
34.node.attributes.id = "rootnod" + i;
35.node.attributes.rel = "root" + i;
36.node.data = new Data();
37.node.data.title = "Root node:" + i;
38.node.state = "open";
39. 
40.node.children = new List<jstreenode>();
41. 
42.for (int j = 1; j < 4; j++)
43.{
44.JsTreeNode cnode = new JsTreeNode();
45.cnode.attributes = new Attributes();
46.cnode.attributes.id = "childnod1" + j;
47.node.attributes.rel = "folder";
48.cnode.data = new Data();
49.cnode.data.title = "child node: " + j;
50.cnode.attributes.mdata = "{draggable : true,max_children : 1,max_depth : 1 }";
51.node.children.Add(cnode);
52. 
53.}
54.node.attributes.mdata = "{draggable : false,max_children : 1, max_depth :1}";
55.nodesList.Add(node);
56.}
57.JavaScriptSerializer ser = new JavaScriptSerializer();
58.string res = ser.Serialize(nodesList);
59.Response.ContentType = "application/json";
60.Response.Write(res);
61.Response.End();
62.}
63.}
64.</jstreenode></jstreenode></jstreenode>

A
seguir, está o fragmento do código completo do client side necessário para ligar
o jsTree às entidades do server side baseadas em dados JSON. Por favor, não se
esqueça de adicionar o jQuery e seus arquivos js do jsTree relacionados à sua
página. A configuração “rule{}” é opcional. Só é obrigatória quando
você quer que seu jsTree seja totalmente ***able.

01.<script type="text/javascript">
02.$(function() {
03.$("#divJsTreeDemo").tree({
04.data: {
05.type: "json",
06.url: "Default.aspx?callback=GetNodesJson",
07.async: true
08. 
09.},
10. 
11.rules: {
12.metadata: "mdata",
13.use_inline: true,
14.clickable: ["root2", "folder"],
15.deletable: "none",
16.renameable: "all",
17.creatable: ["folder"],
18.draggable: ["folder"],
19.dragrules: ["folder * folder", "folder inside root", "tree-drop inside root2"],
20.drag_button: "left",
21.droppable: ["tree-drop"]
22. 
23.}
24.});
25. 
26.});
27. 
28.</script>

A
seguir está a marcação da página.

1.<form id="form1" runat="server">
2.<div id="divJsTreeDemo">
3.</div>
4.</form>

Aqui
está, dê uma olhada.

 Espero
que ajude. Para mais sobre jsTree, acesse seu website.

?

Texto original disponível em http://mohyuddin.blogspot.com/2009/05/binding-jstree-programmatically-with.html