Bootstrap treeview 不显示树

Question

我一直在尝试踢出 bootstrap 树视图 (https://github.com/jonmiles/bootstrap-treeview)。我是新来的。我觉得我做的一切都对，但它对我不起作用。

我想我把我需要的一切都放在了理解这个问题上。

感谢您的帮助。

我从另一个问题中获取了以下代码，但它不起作用。

在 ASP 网络中：

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:

 @{
    Layout = "~/Views/Shared/_Layout.cshtml";

}

<div class="panel panel-primary">
        <div class="panel-heading">
            @MQWEB.Resources.Textos.InformesDeProgreso
        </div>
    </div>

    <div id="tree">

    </div>

    @section scripts
    {
        <script>
            $(document).ready(function () {

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

            });

            function getTree() {

                var tree = null;

                $.getJSON('@Url.Action("GetProgresoGlobalTreeData")', function (result) {
                  var tree = JSON.parse(result);


                });

                return tree;
            }

        </script>
    }

在布局中，我拥有让它工作所需的一切。

    <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)

这是调用 GetProgresoGlobalTreeData() 后浏览器显示（json 返回）的数据：

"[{\"text\":\"ED\",\"nodes\":[{\"text\":\"CPD\",\"nodes\":[{\"text\":\"Center Manager\",\"nodes\":[{\"text\":\"Manager\",\"nodes\":[{\"text\":\"Tech Head\",\"nodes\":[{\"text\":\"Individual\",\"nodes\":[]}]}]}]}]}]}]"

我忘记了 class，我正在使用 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; }
    }

Answer 1

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

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

改为这样做：

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

编辑：我忘了提到你不需要解析 JS 中的 return 并且只需 return 来自控制器

的 Json 对象 receveid

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

    return tree;
}

Answer 2

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

 $(document).ready(function () {

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

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

            });

        });

而且有效！

谢谢

Bootstrap treeview 不显示树

Bootstrap treeview don't show tree

javascript

c#

asp.net-mvc

treeview

jquery