Я застрял, пытаясь выкинуть дерево начальной загрузки (https://github.com/jonmiles/bootstrap-treeview). Я новичок в этом.
Я думаю, что все делаю правильно, но у меня это не работает.
Я думаю, что поставил все, что мне нужно, чтобы понять проблему.
Спасибо за помощь.
У меня следующий код взят из другого вопроса, но он не работает.
В 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:
@{
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)
Это данные, которые отображаются в браузере (возвращается json) после вызова GetProgresoGlobalTreeData ():
"[{\" текст \ ": \" ED \ "\ "узлы \": [{\ "текст \": \ "CPD \", \ "узлы \": [{\" текст \ ":\"Центр
Менеджер \ "\ "узлы \": [{\ "текст \": \ "Менеджер \", \ "узлы \": [{\ "текст \": \" Технология
Глава \ "\ "узлы \": [{\ "текст \": \ "Individual \", \ "узлы \": []}]}]}]}]}]}]"
Я забыл класс, я использую 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; }
}