如何在通过Ajax.ActionLink调用的动态加载的ASP.NET MVC局部视图上初始化jsTree

Question

我想创建一个使用jsTree（ http://www.jstree.com ）的ASP.NET MVC 5应用程序。 我正在使用ASP.NET AJAX在运行时动态加载页面。 在哪里可以在动态加载的局部视图上初始化jsTree？

当我启动Web应用程序时，一切正常。 我看到这样的树：

在此处输入图片说明

但是现在我单击“更改树视图”，并通过Ajax.ActionLink加载了部分视图。 现在，该树将不会呈现为TreeView，而只会呈现为普通列表：

在此处输入图片说明

您可以像这样初始化树：

$('#treeView').jstree();

如何为动态加载的局部视图初始化TreeView？ 我尝试了动作链接的OnComplete回调函数，但是没有用。

TreeTest \\ Controllers \\ HomeController.cs：

using System.Web.Mvc;

namespace TreeTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public PartialViewResult ChangeTreeView()
        {
            return PartialView();
        }
    }
 }

TreeTest \\ Views \\ Shared_Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link rel="stylesheet" href="/Content/vakata-jstree-a0767ce/dist/themes/default/style.min.css" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                </ul>
                <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery",
                    "~/bundles/jqueryajax")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/scripts")
    @RenderSection("scripts", required: false)
    <script src="/Content/vakata-jstree-a0767ce/dist/jstree.min.js"></script>
</body>
</html>

TreeTest \\ Views \\ Home \\ Index.cshtml：

@{
     ViewBag.Title = "Home Page";
}

<div id="treeView">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>
            Item 4
            <ul>
                 <li>Item 4.1</li>
            </ul>
        </li>
    </ul>
</div>

@Ajax.ActionLink("Change Tree View", "ChangeTreeView", new RouteValueDictionary(), new AjaxOptions { UpdateTargetId = "treeView", OnComplete = "TreeViewChangeOnComplete" })

TreeTest \\ Views \\ Home \\ ChangeTreeView.cshtml：

<ul>
    <li>New Item 1</li>
    <li>New Item 2</li>
    <li>New Item 3</li>
    <li>
        New Item 4
        <ul>
            <li>New Item 4.1</li>
        </ul>
    </li>
</ul>

TreeTest \\ Scripts \\ JavaScript.js：

$(document).ready(function () {
    $('#treeView').jstree();
});

function TreeViewChangeOnComplete() {
    $('#treeView').jstree();
}

Answer 1

我不熟悉.NET的工作方式，但是我猜想它只是将指定元素的HTML内容与从AJAX调用中加载的内容交换。

由于实例已在节点（ #treeView ）上创建，因此第二个jstree调用不执行任何操作（实际上，它只是检索已存在的实例）。

我正在猜测并且尚未测试，但请尝试一下：

function TreeViewChangeOnComplete() {
    $('#treeView').jstree(true).destroy(true);
    $('#treeView').jstree();
}

如何在通过Ajax.ActionLink调用的动态加载的ASP.NET MVC局部视图上初始化jsTree

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-05-12 14:03:17

如何在通过Ajax.ActionLink调用的动态加载的ASP.NET MVC局部视图上初始化jsTree

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-05-12 14:03:17

解决方案1
2 已采纳 2015-05-12 14:03:17