Using jsTree with ASP.NET MVC

When I wanted to use a pure JavaScript treeview control for a recent ASP.NET MVC5 project, I looked around and found jsTree; it’s a popular and rich solution, so I decided to try it. I ran into a few customization hurdles, so here are my lessons learned.

Note that this is for jsTree 1.0; at the time of writing, 3.0 has not been released.

Step 1: The HTML in the view. Pretty simple…

<div id="FileTree"></div>

Step 2: Loading the tree dynamically from the MVC controller using jQuery.

<script type="text/javascript"> 
        // Begin JSTree: courtesy Ivan Bozhanov: http://www.jstree.com: 

        $('#FileTree').jstree({ 
            "json_data": { 
                "ajax": { 
                    "url": "/Home/GetTreeData", 
                    "type": "POST", 
                    "dataType": "json", 
                    "contentType": "application/json charset=utf-8" 
                } 
            }, 
            "themes": { 
                "theme": "default", 
                "dots": false, 
                "icons": true, 
                "url": "/jstree/themes/default/style.css" 
            },

            "contextmenu": { 
                "items": { 
                    "create": false, 
                    "rename": false, 
                    "remove": false, 
                    "ccp": false, 
                } 
            },

            "plugins": ["themes", "json_data", "dnd", "contextmenu", "ui", "crrm"] 
        })

</script>

Step 3: Server-side code to populate the tree. This code is based on desalbres’s Simple FileManager with jsTree. (The model code is below.)

// Begin JSTree (Controller code courtesy desalbres: http://www.codeproject.com/Articles/176166/Simple-FileManager-width-MVC-3-and-jsTree)
        [HttpPost]
        public ActionResult GetTreeData()
        {
            if (AlreadyPopulated == false)
            {
                JsTreeModel rootNode = new JsTreeModel();
                rootNode.attr = new JsTreeAttribute();
                rootNode.data = "Root";
                string rootPath = Request.MapPath(dataPath);
                rootNode.attr.id = rootPath;
                PopulateTree(rootPath, rootNode);
                AlreadyPopulated = true;
                return Json(rootNode);
            }
            else
            {
                return null;
            }
        }

        /// <summary>
        /// Populate a TreeView with directories, subdirectories, and files
        /// </summary>
        /// <param name="dir">The path of the directory</param>
        /// <param name="node">The "master" node, to populate</param>
        public void PopulateTree(string dir, JsTreeModel node)
        {
            if (node.children == null)
            {
                node.children = new List<JsTreeModel>();
            }
            // get the information of the directory
            DirectoryInfo directory = new DirectoryInfo(dir);
            // loop through each subdirectory
            foreach (DirectoryInfo d in directory.GetDirectories())
            {
                // create a new node
                JsTreeModel t = new JsTreeModel();
                t.attr = new JsTreeAttribute();
                t.attr.id = d.FullName;
                t.data = d.Name.ToString();
                // populate the new node recursively
                PopulateTree(d.FullName, t);
                node.children.Add(t); // add the node to the "master" node
            }
            // loop through each file in the directory, and add these as nodes
            foreach (FileInfo f in directory.GetFiles("*.htm"))
            {
                // create a new node
                JsTreeModel t = new JsTreeModel();
                t.attr = new JsTreeAttribute();
                t.attr.id = f.FullName;
                t.data = f.Name.ToString();
                // add it to the "master"
                node.children.Add(t);
            }
        }

        // Don't load the jsTree treeview again if it has already been populated.
        // Note: this causes a bug where the tree won't repaint on browser refresh
        public bool AlreadyPopulated
        {
            get
            {
                return (Session["AlreadyPopulated"] == null ? false : (bool)Session["AlreadyPopulated"]); 
            }
            set
            {
                Session["AlreadyPopulated"] = (bool)value;
            }

        }
        // End JSTree

First I had to resolve the issue that a browser refresh would repaint the whole treeview. It’s possible that I simply missed this when I cherry picked code from the FileManager codeproject example.

public ActionResult Test(string returnUrl)
{
    ViewBag.ReturnUrl = returnUrl;
    Session["AlreadyPopulated"] = false;
    return View();
}

Next, I had to customize jsTree the way I wanted it to behave. Getting the tree to start collapsed (closed) instead of expanded (open) was the first order of business. The jsTree API took care of the problem.

$('#FileTree').bind("loaded.jstree", function (event, data) { 
       $(this).jstree("close_all"); 
    })

Next, I wanted the leaf nodes to use a different background image than the folder nodes. This required changing the server-side code to actually write the leaves (files) as leaf nodes and then add the right CSS to style the jstree-leaf class.

namespace FileEditor.Models 
{ 
    public class JsTreeModel 
    { 
        public string data; 
        public JsTreeAttribute attr; 
        // this was "open" but changing it to “leaf” adds “jstree-leaf” to the class   
        public string state = "leaf";         
        public List<JsTreeModel> children; 
    }

    public class JsTreeAttribute 
    { 
        public string id; 
    } 
}

And then styling the leaf nodes with a different background image than the folders.

<style type="text/css"> 
        #FileTree .jstree-leaf > a > ins { 
            background: url("/jstree/themes/default/d.gif"); 
            background-position: -2px -19px !important; 
        } 
</style>

Finally, I wanted to disable the right-click context menu options since I’m not using them. (This code appears in the code above.)

"contextmenu": {
           "items": {
               "create": false,
               "rename": false,
               "remove": false,
               "ccp": false,
           }
       },