JSTree從視圖調用MVC4中的控制器

我想在我的MVC4項目中創建一個動態的JSTree。然而，當談到Json時，我是一個完整的初學者。我試圖讓從我_layout.cshtml一個AJAX調用JSON，這裏是代碼：JSTree從視圖調用MVC4中的控制器

<script type="text/javascript"> 
$(document).ready(function() { 
$("#demo1").jstree({ 
     "json_data": { 
      "ajax": { 
       "type": "POST", 
       "dataType": "json", 
       "contentType": "application/json;", 
       "url": "Home/GetAllNodes", 
       "data": function (node) { 
        return '{ "operation" : "get_children", "id" : 1 }'; 
       }, 
       "success": function (retval) { 
        return retval.d; 
       } 
      } 
     }, 
     "plugins": ["themes", "json_data"] 
    }); 
}); 
</script>

我從this site採取了這種代碼，並一直密切關注的步驟，但是，在這個例子中使用的項目是一個web表單項目，我不確定使用json時這兩個項目之間的轉換。

這裏是我的方法從HomeController中 - GetAllNodes：

[WebMethod] 
     [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
     public static List<JSTreeTestMod> GetAllNodes(string id) 
     { 
      List<JSTreeTestMod> JSTreeArray = new List<JSTreeTestMod>(); 

      JSTreeTestMod treeItem = new JSTreeTestMod(); 
      treeItem.data = "x1"; 
      treeItem.state = "closed"; 
      treeItem.IdServerUse = 10; 
      treeItem.children = null; 
      treeItem.attr = new JSTreeAttribute { id = "10", selected = false }; 
      JSTreeArray.Add(treeItem); 

      JSTreeTestMod treeItem2 = new JSTreeTestMod(); 
      var children = 
       new JSTreeTestMod[] 
     { 
      new JSTreeTestMod { data = "x1-11", attr = new JSTreeAttribute { id = "201" } }, 
      new JSTreeTestMod { data = "x1-12", attr = new JSTreeAttribute { id = "202" } }, 
      new JSTreeTestMod { data = "x1-13", attr = new JSTreeAttribute { id = "203" } }, 
      new JSTreeTestMod { data = "x1-14", attr = new JSTreeAttribute { id = "204" } }, 
     }; 
      treeItem2.data = "x2"; 
      treeItem2.IdServerUse = 20; 
      treeItem2.state = "closed"; 
      treeItem2.children = children; 
      treeItem2.attr = new JSTreeAttribute { id = "20", selected = true }; 
      JSTreeArray.Add(treeItem2); 

      JSTreeTestMod treeItem3 = new JSTreeTestMod(); 
      var children2 = 
       new JSTreeTestMod[] 
     { 
      new JSTreeTestMod { data = "x2-11", attr = new JSTreeAttribute { id = "301" } }, 
      new JSTreeTestMod { data = "x2-12", attr = new JSTreeAttribute { id = "302" }, children= new JSTreeTestMod[]{new JSTreeTestMod{data = "x2-21", attr = new JSTreeAttribute { id = "3011" }}} }, 
      new JSTreeTestMod { data = "x2-13", attr = new JSTreeAttribute { id = "303" } }, 
      new JSTreeTestMod { data = "x2-14", attr = new JSTreeAttribute { id = "304" } }, 
     }; 
      treeItem3.data = "x3"; 
      treeItem3.state = "closed"; 
      treeItem3.IdServerUse = 30; 
      treeItem3.children = children2; 
      treeItem3.attr = new JSTreeAttribute { id = "30", selected = true }; 
      JSTreeArray.Add(treeItem3); 
      return JSTreeArray; 
     }

有誰在MVC4使用jstree經驗？

來源

2013-04-10 user2254686

可能遲到了，但我已經創建了一個MVC HTML幫助程序，它可以幫助您使用最新的JStree插件設置一棵樹，您可以在這裏找到它。

https://jstreemvcwrapper.codeplex.com/

使用更簡單：

@(Html.JSTreeView(Model.TreeNodes) 
.ContrainerID("TreeContainer") 
.Children(n => n.Childern) 
.ItemID(n=>n.NodeID.ToString()) 
.ItemType(n=>n.NodeType.ToString()) 
.IsSelected(n=> n.NodeID == 1) 
.OnNodeSelect("onTreeFolderSelected") 
.Plugins("wholerow", "types") 
.CoreConfig(new 
{ 
     expand_selected_onload = true, 
     multiple = false 
}) 
.TypesConfig(new 
{ 
     Root = new { icon = "../Content/jsTree/Root.png" }, 
     Folder = new { icon = "../Content/jsTree/Folder.png" }, 
     File = new { icon = "../Content/jsTree/File.png" }, 
     @default = new { icon = "../Content/jsTree/Folder.png" } 
}) 
.ItemTemplate(@<text> <a href="#" >@item.NodeName</a> </text>))

您不必以創建JSTree特定模型。和IEnumrable將使用工作作爲源..只是具體的子女屬性：

.Children(n => n.Childern)

方法，其餘的將被做..

仍處於早期測試..但會幫助你跳開始你的項目..

來源

2014-07-22 11:47:50 Mortalus

JSTree從視圖調用MVC4中的控制器

回答

相關問題