Javascript 引导树视图不显示树_Javascript_C#_Jquery_Asp.net Mvc_Treeview

Javascript 引导树视图不显示树

javascript c# jquery asp.net-mvc

Javascript 引导树视图不显示树,javascript,c#,jquery,asp.net-mvc,treeview,Javascript,C#,Jquery,Asp.net Mvc,Treeview,我被困在试图踢出引导树视图。这方面我是新手。我认为我做的每件事都是对的，但这对我来说不起作用我想我已经尽了我所能去理解这个问题谢谢你的帮助下面的代码取自另一个问题，但它不起作用在ASP.NET中： private static List<RoleViewModel> roles = new List<RoleViewModel>(); public static RoleViewModel ChildrenOf(RoleViewModel rol

我被困在试图踢出引导树视图。这方面我是新手。我认为我做的每件事都是对的，但这对我来说不起作用

我想我已经尽了我所能去理解这个问题

谢谢你的帮助

下面的代码取自另一个问题，但它不起作用

在ASP.NET中：

private static List<RoleViewModel> roles = new List<RoleViewModel>();
        public static RoleViewModel ChildrenOf(RoleViewModel rol)
        {

            foreach (RoleViewModel child in roles.Where(x => x.ParentId == rol.Id))
            {
                rol.ChildRoles.Add(ChildrenOf(child));
            }

            return rol;
        }

        public ActionResult GetProgresoGlobalTreeData()
        {
            roles = new List<RoleViewModel>
            {
                new RoleViewModel { Id = 1, ParentId = null, text = "ED" },
                new RoleViewModel { Id = 2, ParentId = 1, text = "CPD" },
                new RoleViewModel { Id = 3, ParentId = 2 ,text = "Center Manager" },
                new RoleViewModel { Id = 4 , ParentId = 3, text = "Manager" },
                new RoleViewModel { Id = 5 , ParentId = 4, text = "Tech Head" },
                new RoleViewModel { Id = 6 , ParentId = 5, text = "Individual" }
            };

            RoleViewModel role = new RoleViewModel();
            role = ChildrenOf(roles[0]);
            var json = JsonConvert.SerializeObject(new[] { role });
            JsonResult ret = Json(json, JsonRequestBehavior.AllowGet);
            return ret;

        }

Html:

在布局中，我拥有使其工作所需的一切

    <head>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="~/Content/font-awesome.min.css">

        <link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet">

        <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
        <link href="~/Content/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap-select.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap-treeview.min.css" rel="stylesheet" />


    </head>

    <body>
     <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>

        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
        <script src="~/Scripts/notify.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/modernizr-2.8.3.js"></script>
        <script src="~/Scripts/pdfobject.js"></script>
        <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
        <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
        <script src="~/Scripts/jquery-ui-timepicker-addon.min.js"></script>
        <script src="~/Scripts/bootstrap-select.min.js"></script>
        <script src="~/Scripts/moment.min.js"></script>
        <script src="~/Scripts/datetime-moment.js"></script>
        <script src="~/Scripts/bootstrap-treeview.min.js"></script>
    </body>
    </html>

@RenderSection("scripts", required: false)

这是调用GetProgResolGlobalTreeData后浏览器显示json返回的数据：

[{\text\：\ED\，\nodes\：[{\text\：\CPD\，\nodes\：[{\text\：\Center Manager\，\nodes\：[{\text\：\Manager\，\nodes\：[{\text\：\Tech Head\，\nodes\：[{\text\：\Individual\，\nodes\：[]}]}]}]}]

我忘记上课了，我用的是Newtonsoft.Json：

public class RoleViewModel
    {

        public RoleViewModel()
        {
            this.ChildRoles = new List<RoleViewModel>();
        }

        public string text { get; set; }

        //public string icon { get { return "glyphicon glyphicon-user"; } }
        [JsonIgnore]
        public int Id { get; set; }
        [JsonIgnore]
        public int? ParentId { get; set; }

        [JsonProperty("nodes")]
        public List<RoleViewModel> ChildRoles { get; set; }
    }

不需要序列化对象，请删除以下内容：

var json = JsonConvert.SerializeObject(new[] { role });

改为这样做：

return Json(new[] { role }, JsonRequestBehavior.AllowGet);

编辑：我忘了提到，您不需要解析JS中的返回，只需返回从控制器接收的Json对象

function getTree() {
    var tree = null;
    $.getJSON('@Url.Action("GetProgresoGlobalTreeData")', function (result) {
        tree = result
    });

    return tree;
}

谢谢大家的想法。解决方案是将js更改为：

 $(document).ready(function () {

            $.getJSON('@Url.Action("GetProgresoGlobalTreeData")', function (result) {

                $('#tree').treeview({ data: result });

            });

        });

而且它有效

谢谢

您是否收到任何控制台错误？你的树应该在什么地方都没有出现？到底发生了什么？除了不起作用之外，其他一些东西会很有用。为什么在文本和节点周围有双引号？这个示例没有。而且，您的json看起来是以一个表示节点的数组开始的，而发布的示例是以一个表示树的根的对象开始的。我猜这是你的问题。我不是控制台错误格雷格。只是树没有显示。我用硬数据和它的工作做了这个例子。我要做的是从数据库中获取数据。好我先用列表。而且不起作用。谢谢，Json返回更好，但不起作用。我正在编辑这个问题：我忘了放这个类。我正在使用Newtonsoft.Json，我需要转换：var Json=JsonConvert.SerializeObjectnew[]{role}；getTree函数正在返回null。。。为什么？

 $(document).ready(function () {

            $.getJSON('@Url.Action("GetProgresoGlobalTreeData")', function (result) {

                $('#tree').treeview({ data: result });

            });

        });