![]() I am working in ASP.Net Core 3.1, so I use to serialize the data. Here's my code that loads the data into a List. First, the model that holds each node's data: public class JsTreeModel I found I didn't need TreeCollections at all. Update: I was able to load and display a hierarchical tree on my web page with very little code, using jsTree. If you want to pre-load your data into a tree structure first, like I am doing with TreeCollections, then perhaps populating a structure will work, but it will still need help with javascript if you want to interactively show/hide branches on the tree. There are two good lazy-load implementations of JSTree on SO here: Lazy-loading TreeView with JsTree in Asp.Net MVCĭepending on the size and depth of your tree, if you can pull your data dynamically as the user navigates the tree, this might be the best solution. I think we will have to use at least some javascript. You mention JsTree, and I think that is a viable option, but it's not html-only as you specified. Now to display the data on a web page, I don't think Microsoft has any tools to help us. You might want to look at that for your tree data structure. I have implemented that and can successfully build one or multiple hierarchical trees from my data. I have also looked at Telerik and Syncfusion, but am trying to avoid paying for a solution.įirst, for the data structure, I did find a NuGet package called TreeCollections written by David West here: You are right, there is a TreeView for ASP.NET Core, but it's for Windows Forms and not web pages: In your Razor HTML-view, the base for the TreeView control is a simple tag, with an data-url attribute pointing at the method it should call to get data: Īnd finally some javascript/jquery to initialize the TreeView and add some handling, this code loads the treeview, sets the icons I would like to have (from font-awesome) and adds a click-handler which just writes out the selected node name to the console.Tony, I have been searching for the same thing also. Return Json(list, JsonRequestBehavior.AllowGet) Var items = Directory.GetFileSystemEntries(node) List.Add(new Node(Path.GetFileName(item), item, Directory.Exists(item))) Var items = Directory.GetFileSystemEntries("D:/") ![]() If it’s a folder I’m passing “true” to the load_on_demand property of the jqTree javascript model: public ActionResult Nodes(string node) This is some simple test-code using the local computer folder structure on the D-drive just to try it out. ![]() My action is called /Home/Nodes and takes and optional “node” parameter which holds the id of the treeview-node being “expanded”. Then create a controller method in HomeController.cs which will be called on-demand/lazily by the TreeView control in your HTML-view. Public Node(string label, string id, bool loadOnDemand = true) Then open up your /App_Start/BundlesConfig.cs file and add the files to your bundles, something like this:īundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(īundles.Add(new StyleBundle("~/Content/css").Include(Īdd this viewmodel to hold the treeview node data: public class Node The package is not available on Nuget at the moment though, but it’s easy enough to download and set up manually.ĭownload and unzip the code from Github, copy the files jqtree.css and jqtree-circle.png to your /Content folder, and copy the file to your /Scripts folder. The code is available on and the author mbraak (Marco Braak) is very active in the “issues” section answering questions from users. I’ve been looking for a lightweight TreeView library to use with ASP.NET MVC, and I think I’ve found my “weapon of choice” – jqTree.
0 Comments
Leave a Reply. |