Question

我正在尝试在MVC4项目中创建动态JSTree。然而，对于Json来说，我是一个完全的初学者。我试图从我的_layout.cshtml中调用ajax json，这里是代码：

    <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的经验？

Answer 1

可能晚了但我已经创建了一个MVC HTML Helper，它可以帮助你使用最新的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将作为一个来源..使用以下特定的childern属性：

.Children(n => n.Childern)

方法，其余的将完成..

它还处于早期测试阶段..但会帮助你跳过你的项目..

从视图到MVC4中的控制器的JSTree调用

1 个答案: