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

Posted 2023-02-19

【中文标题】JSTree在MVC4中从视图调用到控制器

【英文标题】：JSTree call from view to controller in 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 JSTreeTestModdata = "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 的经验吗？

【参考方案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)

方法，其余的将完成..

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