JSTree在MVC4中从视图调用到控制器答案

【问题标题】：JSTree call from view to controller in MVC4JSTree在MVC4中从视图调用到控制器
【发布时间】：2013-04-02 09:04:09
【问题描述】：

我正在尝试在我的 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 的经验吗？

【问题讨论】：

标签： c# ajax asp.net-mvc jstree

【解决方案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 将作为源工作.. 只需使用以下方式指定子属性：

.Children(n => n.Childern)

方法，其余的将完成..

它仍处于早期测试阶段..但会帮助您快速启动您的项目..

【讨论】：