部分视图上的 MVC jsTree 3 ajax 刷新使树成为普通的 UL LI 项目

Question

我正在尝试使用 ajax load 方法重新加载 jsTree，调用 Action-controller 方法来加载局部视图。最初在页面加载时，jstree 呈现良好但在 ajax 调用更新后使其成为普通的 ul li 项目。

我正在使用 HTML 数据源（UL LI 项目）。

Index.cshtml:

@model List<TreeViewJSDemo.Models.ModelViews.EmployeeNoRootModel>
@{
    ViewBag.Title = "About Page";
}

<link href="~/Content/jsTree/docs.css" rel="stylesheet" />
<link href="~/Content/jsTree/themes/default/style.css" rel="stylesheet" />


<div class="row">
    <div class="col-md-8">

        <button id="refreshTree" class="btn btn-sm">Reload</button><br /><br />

        <div id="dv-tree-wrapper">
            @{ Html.RenderPartial("_TreePartial", Model); }
        </div>
    </div>
    <div class="col-md-4" id="dv-node-details">
        @{ Html.RenderPartial("_NodeDetailPartial", model: TempData["FirstNode"]); }
    </div>
</div>


@section Scripts
{
    <script src="~/Scripts/jsTree3/jstree.js"></script>
    <script type="text/javascript">
        $(function () {
            LoadTargetTree();

            /***********  refresh tree  *********** */
            $('#refreshTree').on('click', function (event) {
                //$('#dv-tree-wrapper').load('@Url.Action("RefreshTree", "Home")');
                $('#divtree').jstree('destroy').empty();
                $('#dv-tree-wrapper').load('@Url.Action("RefreshTree", "Home")');
                LoadTargetTree();
                $('#divtree').jstree('refresh');
            });
        });

        function LoadTargetTree() {
            $('#divtree')
                .jstree({
                    core: { check_callback: true }
                });
        }

    </script>
}

_TreePartial.cshtml:

@model List<TreeViewJSDemo.Models.ModelViews.EmployeeNoRootModel>

<div id="divtree">
    @foreach (var item in Model)
    {
        <ul id="tree-@item.Id">
            <li id="node-@item.Id">
                <a href="#">@item.Name</a>
                @Html.Partial("_ChildrensPartialNoRoot", item.EmployeeList)
            </li>
        </ul>
    }
</div>

Answer 1

根据 Stephen 的反馈，更改代码以在成功回调中调用 LoadTargetTree() 以解决此问题。

Code Changed:
 $('#dv-tree-wrapper').load('@Url.Action("RefreshTree", "Home")', function () { LoadTargetTree();});

部分视图上的 MVC jsTree 3 ajax 刷新使树成为普通的 UL LI 项目

MVC jsTree 3 on partial view ajax Refresh makes tree plain UL LI items

asp.net

asp.net-mvc

jstree