如何在通过Ajax.ActionLink调用的动态加载的ASP.NET MVC局部视图上初始化jsTree [英] How can I initialize jsTree on a dynamically loaded ASP.NET MVC Partial View that is called via an Ajax.ActionLink
问题描述
我想创建一个使用jsTree的ASP.NET MVC 5应用程序( http://www.jstree.com ).我正在使用ASP.NET AJAX在运行时动态加载页面.在哪里可以在动态加载的局部视图上初始化jsTree?
I want to create an ASP.NET MVC 5 application that uses jsTree (http://www.jstree.com). I am using ASP.NET AJAX to dynamically load a page during runtime. Where can I initialize jsTree on the dynamically loaded partial view?
当我启动Web应用程序时，一切正常.我看到这样的树:
When I start the web application everything is ok. I see the tree like this:
但是现在我单击更改树视图"，并通过Ajax.ActionLink加载了部分视图.现在，该树将不会呈现为TreeView，而只会呈现为普通列表:
But now I click on 'Change Tree View' and a partial view is loaded via an Ajax.ActionLink. Now the tree will not be rendered as a TreeView but only as a normal list:
您可以像这样初始化树:
You can initialize the tree like this:
$('#treeView').jstree();
如何为动态加载的局部视图初始化TreeView?我尝试了Action Link的OnComplete回调函数，但这没用.
How can I initialize the TreeView for the partial view that is dynamically loaded? I tried the OnComplete callback function of the Action Link but that did not work.
TreeTest \ Controllers \ HomeController.cs:
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:
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>© @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:
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:
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:
TreeTest\Scripts\JavaScript.js:
$(document).ready(function () {
$('#treeView').jstree();
});
function TreeViewChangeOnComplete() {
$('#treeView').jstree();
}
推荐答案
.NET我不熟悉.NET的工作方式，但我猜它只是将指定元素的HTML内容与从AJAX调用中加载的内容交换了一下.
I am not familiar with the way .NET works, but my guess is it simply swaps the HTML contents of the specified element with the one loaded from the AJAX call.
由于实例已经在节点(#treeView)上创建，因此第二个jstree调用不执行任何操作(实际上，它只是检索已存在的实例).
Since the instance is already created on the node (#treeView), the second jstree call does nothing (actually it simply retrieves the already existing instance).
我正在猜测并且尚未测试，但请尝试一下:
I am guessing and have not tested this, but give it a try:
function TreeViewChangeOnComplete() {
$('#treeView').jstree(true).destroy(true);
$('#treeView').jstree();
}
这篇关于如何在通过Ajax.ActionLink调用的动态加载的ASP.NET MVC局部视图上初始化jsTree的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
