CODEWITHSUNDEEP
javascriptc#jqueryasp.net-mvcjstree
Alexander
Alexander

Reputation: 1061

How can I initialize jsTree on a dynamically loaded ASP.NET MVC Partial View that is called via an Ajax.ActionLink

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?

When I start the web application everything is ok. I see the tree like this:

enter image description here

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:

enter image description here

You can initialize the tree like this:

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

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:

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();
}

Upvotes: 0

Views: 2714

Answers (1)

vakata
vakata

Reputation: 3886

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.

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();
}

Upvotes: 2

Related Questions