Dynamic Treeview in ASP.NET MVC from database

: 18262

Last Updated : 15/12/2022

Posted By :- Vinnu

In this article, we will create dynamic treeview in asp.net mvc from database data, which will help you link parent node with the child node and sub-child node easily. We will create a dynamic tree view menu fetched from the database, using ASP.NET MVC 5, C#, Razor and SQL Server 2012 with the help of JStree jquery plugin.

Step 1: Create a project in your Visual Studio(2017 in my example), by opening Visual Studio and clicking "File"-> "New"-> "Project"

dynamic-treeview-in-aspnet-mvc-from-database-step-by-step-min

Select MVC template to generate basic home controller and other details

Step 2: Now, for example ,I have this table in my database, which we need to show in Treeview, with the following table rows

database-table-treeview-min

as you can see above we have four columns on the table, where Pid is Main parent Id, you can create this table in your database with the following script

USE [TreeviewMVC]
GO
/****** Object:  Table [dbo].[Categories]    Script Date: 12/31/2017 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Categories](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[Name] [varchar](100) NULL,
	[Description] [varchar](100) NULL,
	[Pid] [int] NULL,
 CONSTRAINT [PK_Categories] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[Categories] ON 

INSERT [dbo].[Categories] ([ID], [Name], [Description], [Pid]) VALUES (1, N'Java', N'Java', NULL)
INSERT [dbo].[Categories] ([ID], [Name], [Description], [Pid]) VALUES (2, N'JSP', N'JSP', 1)
INSERT [dbo].[Categories] ([ID], [Name], [Description], [Pid]) VALUES (3, N'ASP.NET', N'ASP.NET', NULL)
INSERT [dbo].[Categories] ([ID], [Name], [Description], [Pid]) VALUES (4, N'ASP.NET MVC', N'ASP.NET MVC', 3)
INSERT [dbo].[Categories] ([ID], [Name], [Description], [Pid]) VALUES (5, N'Web-Forms', N'Web-Forms', 3)
INSERT [dbo].[Categories] ([ID], [Name], [Description], [Pid]) VALUES (6, N'Razor Syntax', N'Razor Syntax', 4)
SET IDENTITY_INSERT [dbo].[Categories] OFF
/****** Object:  Index [IX_Pid]    Script Date: 12/31/2017 6:39:22 PM ******/
CREATE NONCLUSTERED INDEX [IX_Pid] ON [dbo].[Categories]
(
	[Pid] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, SORT_IN_TEMPDB = OFF, DROP_EXISTING = OFF, ONLINE = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
GO
ALTER TABLE [dbo].[Categories]  WITH CHECK ADD  CONSTRAINT [FK_dbo.Categories_dbo.Categories_Pid] FOREIGN KEY([Pid])
REFERENCES [dbo].[Categories] ([ID])
GO
ALTER TABLE [dbo].[Categories] CHECK CONSTRAINT [FK_dbo.Categories_dbo.Categories_Pid]
GO

Step 3: Now link project with database using ADO.NET and Entity framework, right click on Models folder in Visual Studio , Select "Add" -> "ADO.NET Entity Model"/ "New Item"->"Data(Left pane) & ADO.NET Entity Model(right pane)" -> Name it and click "Add"

Select "Ef designer from database" -> Click "Next"-> "New Connection" -> Conenct to your database by entering credentials of your database and selecting database

After entering connecting to database and clicking "OK", Select "Yes, include the sensitive data in the connection string", click "Next", Select Ef version "Entity Framework 6.0", Click "Next", check "Tables" and click "Finish"

Step 4: Now let's create a custom HTML helper class to render treeview in Razor, Add new class in "Models" folder and name it as "TreeViewHelper", and use the code below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Web;
using System.Web.Mvc;
using System.Web.UI;
using System.Web.WebPages;

namespace TreeviewMVC.Models
{
    public static class TreeViewHelper
    {
        /// <summary>  
        /// Create an HTML tree from a recursive collection of items  
        /// </summary>  
        public static TreeView<T> TreeView<T>(this HtmlHelper html, IEnumerable<T> items)
        {
            return new TreeView<T>(html, items);
        }
    }

    /// <summary>  
    /// Create an HTML tree from a resursive collection of items  
    /// </summary>  
    public class TreeView<T> : IHtmlString
    {
        private readonly HtmlHelper _html;
        private readonly IEnumerable<T> _items = Enumerable.Empty<T>();
        private Func<T, string> _displayProperty = item => item.ToString();
        private Func<T, IEnumerable<T>> _childrenProperty;
        private string _emptyContent = "No children";
        private IDictionary<string, object> _htmlAttributes = new Dictionary<string, object>();
        private IDictionary<string, object> _childHtmlAttributes = new Dictionary<string, object>();
        private Func<T, HelperResult> _itemTemplate;

        public TreeView(HtmlHelper html, IEnumerable<T> items)
        {
            if (html == null) throw new ArgumentNullException("html");
            _html = html;
            _items = items;
            // The ItemTemplate will default to rendering the DisplayProperty  
            _itemTemplate = item => new HelperResult(writer => writer.Write(_displayProperty(item)));
        }

        /// <summary>  
        /// The property which will display the text rendered for each item  
        /// </summary>  
        public TreeView<T> ItemText(Func<T, string> selector)
        {
            if (selector == null) throw new ArgumentNullException("selector");
            _displayProperty = selector;
            return this;
        }


        /// <summary>  
        /// The template used to render each item in the tree view  
        /// </summary>  
        public TreeView<T> ItemTemplate(Func<T, HelperResult> itemTemplate)
        {
            if (itemTemplate == null) throw new ArgumentNullException("itemTemplate");
            _itemTemplate = itemTemplate;
            return this;
        }


        /// <summary>  
        /// The property which returns the children items  
        /// </summary>  
        public TreeView<T> Children(Func<T, IEnumerable<T>> selector)
        {
            //  if (selector == null) //throw new ArgumentNullException("selector");  
            _childrenProperty = selector;
            return this;
        }

        /// <summary>  
        /// Content displayed if the list is empty  
        /// </summary>  
        public TreeView<T> EmptyContent(string emptyContent)
        {
            if (emptyContent == null) throw new ArgumentNullException("emptyContent");
            _emptyContent = emptyContent;
            return this;
        }

        /// <summary>  
        /// HTML attributes appended to the root ul node  
        /// </summary>  
        public TreeView<T> HtmlAttributes(object htmlAttributes)
        {
            HtmlAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
            return this;
        }

        /// <summary>  
        /// HTML attributes appended to the root ul node  
        /// </summary>  
        public TreeView<T> HtmlAttributes(IDictionary<string, object> htmlAttributes)
        {
            if (htmlAttributes == null) throw new ArgumentNullException("htmlAttributes");
            _htmlAttributes = htmlAttributes;
            return this;
        }

        /// <summary>  
        /// HTML attributes appended to the children items  
        /// </summary>  
        public TreeView<T> ChildrenHtmlAttributes(object htmlAttributes)
        {
            ChildrenHtmlAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
            return this;
        }

        /// <summary>  
        /// HTML attributes appended to the children items  
        /// </summary>  
        public TreeView<T> ChildrenHtmlAttributes(IDictionary<string, object> htmlAttributes)
        {
            if (htmlAttributes == null) throw new ArgumentNullException("htmlAttributes");
            _childHtmlAttributes = htmlAttributes;
            return this;
        }

        public string ToHtmlString()
        {
            return ToString();
        }

        public void Render()
        {
            var writer = _html.ViewContext.Writer;
            using (var textWriter = new HtmlTextWriter(writer))
            {
                textWriter.Write(ToString());
            }
        }

        private void ValidateSettings()
        {
            if (_childrenProperty == null)
            {
                return;
            }
        }


        public override string ToString()
        {
            ValidateSettings();
            var listItems = new List<T>();
            if (_items != null)
            {
                listItems = _items.ToList();
            }


            var ul = new TagBuilder("ul");
            ul.MergeAttributes(_htmlAttributes);
            var li = new TagBuilder("li")
            {
                InnerHtml = _emptyContent
            };
            li.MergeAttribute("id", "-1");

            if (listItems.Count > 0)
            {
                var innerUl = new TagBuilder("ul");
                innerUl.MergeAttributes(_childHtmlAttributes);

                foreach (var item in listItems)
                {
                    BuildNestedTag(innerUl, item, _childrenProperty);
                }
                li.InnerHtml += innerUl.ToString();
            }
            ul.InnerHtml += li.ToString();

            return ul.ToString();
        }

        private void AppendChildren(TagBuilder parentTag, T parentItem, Func<T, IEnumerable<T>> childrenProperty)
        {
            //  
            if (childrenProperty == null)
            {
                return;
            }
            var children = childrenProperty(parentItem).ToList();
            if (!children.Any())
            {
                return;
            }

            var innerUl = new TagBuilder("ul");
            innerUl.MergeAttributes(_childHtmlAttributes);

            foreach (var item in children)
            {
                BuildNestedTag(innerUl, item, childrenProperty);
            }

            parentTag.InnerHtml += innerUl.ToString();
        }

        private void BuildNestedTag(TagBuilder parentTag, T parentItem, Func<T, IEnumerable<T>> childrenProperty)
        {
            var li = GetLi(parentItem);
            parentTag.InnerHtml += li.ToString(TagRenderMode.StartTag);
            AppendChildren(li, parentItem, childrenProperty);
            parentTag.InnerHtml += li.InnerHtml + li.ToString(TagRenderMode.EndTag);
        }

        private TagBuilder GetLi(T item)
        {
            var li = new TagBuilder("li")
            {
                InnerHtml = _itemTemplate(item).ToHtmlString()
            };
            Type myType = item.GetType();
            IList<PropertyInfo> props = new List<PropertyInfo>(myType.GetProperties());
            foreach (PropertyInfo prop in props)
            {
                if (prop.Name.ToLower() == "id")
                    li.MergeAttribute("id", prop.GetValue(item, null).ToString());
                // Do something with propValue  
                if (prop.Name.ToLower() == "sortorder")
                    li.MergeAttribute("priority", prop.GetValue(item, null).ToString());
            }
            return li;
        }
    }
}

the above helps us to create recursive <ul><li> HTML code based on Pid .

Step 5: Now we need to add jstree in our project which will help us convert ul/li html into tree view, so from the top menu, click on Tools -> NuGet Package Manager -> Manage NuGet packages for solution.

Choose "Browse" tab, then type jsTree,

Then, hit on Install button to download JSTree and include it in your project.

Step 6: Now, let's add the below code in your HomeController to get data from database

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TreeviewMVC.Models;


namespace TreeviewMVC.Controllers
{
    public class HomeController : Controller
    {
        TreeviewMVCEntities context = new TreeviewMVCEntities();
        public ActionResult Index()
        {
           
            return View(context.Categories.Where(x => !x.Pid.HasValue).ToList());
        }

       
    }
}

last step go to the Index view and add the required html code to render tree view using jqTree and HTMLhelper which we created earlier

@model IEnumerable<TreeviewMVC.Models.Category>
@using System.Web.UI.WebControls
@using TreeviewMVC.Models;

<h2>TreeView</h2>
<link href="~/Content/jsTree/themes/default/style.min.css" rel="stylesheet" />
<div class="form-body">
    <div id="jstree">
        @(Html.TreeView(Model)
                              .EmptyContent("root")
                              .Children(m => m.Categories1)
                              .HtmlAttributes(new { id = "tree" })
                          .ChildrenHtmlAttributes(new { @class = "subItem" })
                              .ItemText(m => m.Name)
                              .ItemTemplate(
            @<text>
                <a href="@item.Description" desc="@item.Description">@item.Name</a>
            </text>)
        )
    </div>
</div>
@section scripts
    {
    <script src="~/Scripts/jsTree3/jstree.min.js"></script>
    <script>

            $(function () {
                var selectedData;
                $('#jstree').jstree({
                    "core": {
                        "multiple": true,
                        "check_callback": false,
                        'themes': {
                            "responsive": true,
                            'variant': 'larg',
                            'stripes': false,
                            'dots': false
                        }
                    },
                    "types": {
                        "default": {
                            "icon": "fa fa-folder icon-state-warning icon-lg"
                        },
                        "file": {
                            "icon": "fa fa-file icon-state-warning icon-lg"
                        }
                    },
                    "plugins": ["dnd", "state", "types", "sort", "checkbox"]
                });
            });
    </script>
}

After completing the above steps run your prjoect and output will be as below

That's we have now created dynamic Treeview in MVC using jqTree and Custom HTML helper.

Buy us a coffee

Become a Patron Q Follow our Quora space

Comment

Comment's

Revathi

Hi,

Very nice article.I tried this code.I have one error while running.Please help me.How to solve this.

The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[NSPIRA_IMS.TBL_ACCESSRIGHTS]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[NSPIRA_IMS.Models.Category]'.

4/6/2018 9:52:33 AM
Edited at :- 4/7/2018 6:58:54 AM

Add Comment

Vinnu

Hello, Thanks

As stated in your issue you are passing data of type "System.Collections.Generic.List`1[NSPIRA_IMS.TBL_ACCESSRIGHTS]" in the view but you need to pass data of type "System.Collections.Generic.IEnumerable`1[NSPIRA_IMS.Models.Category]"

Check your Controller C# code, you are passing the wrong model type, here is the similar question link

https://qawithexperts.com/questions/100/the-model-item-passed-into-the-dictionary-is-of-type-systemc

Check all the comments/answers carefully in the above link, similar issue was solved here.

You just need to pass correct List of Model(NSPIRA_IMS.Models.Category) from C# Controller to the view.

4/7/2018 6:56:36 AM

Revathi

Hi Vinnu sir,

Thank you.Now its working.But it doesn't show checkbox with tree view.I have attached the image for output.How to show check box in tree view.I think script is not working in this page.How to solve this.Please help me.

root

4/9/2018 6:35:51 AM
Edited at :- 4/9/2018 6:36:28 AM

Add Comment

Vinnu

Hello Revathi

Good to know, it worked for you, please check chrome/firefox console to see if there is any javascript/jQuery related error, also please check if you have included the CSS properly or not, you can download source code of the above article, it includes database scripts, execute it in SQL server 2012 or above, change projects EF database connection string accordingly, build and run it in browser.

4/9/2018 7:36:50 AM

Add Comment

Revathi

Hi Sir,

Thank you for your help.

How to add, Edit and delete node dynamically in this tree view and into the database ?. Please help me.

4/23/2018 11:02:50 AM

Add Comment

jaya

Added an answer to your question https://qawithexperts.com/questions/281/how-to-add-edit-delete-data-into-database-using-treeview-wit

Take a look, hope it helps.

4/23/2018 12:03:06 PM

Revathi

Hi Sir,

Now Child is not displayed.Only it shows parent id.In the previous day.It shows all parent and child.Please help me.

I modified table column name as Id,HierarchyName,PerentId.

4/30/2018 11:10:23 AM
Edited at :- 4/30/2018 11:11:34 AM

Add Comment

vikas_jk

If you have modified tables, adjust C# code accordingly, as you have modified tables, relationship between child/parent may have got changed, and it is not according to your to the current C# code.

You are free to create new question but it's quite basic, you need to modify C# code according to new database table.

5/1/2018 8:04:34 AM

Vinnu

Try to change C# as explained by Vikas, Look which columns you have removed or changed in database table and accordingly select parent/child in C# code

5/2/2018 8:42:20 AM

allord

Hi Sir

Thank you for your help

it's working find for me,

my question how to pass node to the controller

regards

12/16/2018 8:17:54 AM

Add Comment

vikas_jk

You can divide the process into two parts

Get the node ID on click using JSTree API
Send data (id) to controller to using jQuery Ajax

You can get ID from JSTree using the following function

$('#tree').on("select_node.jstree", 
   function (e, data) { alert("node_id: " + data.node.id);
 });

https://www.jstree.com/api/#/?q=.jstree%20Event

Check this fiddle http://jsfiddle.net/y7ar9/4/

You can add nodes then click on "open panel" button and click on Node to get its ID.

12/21/2018 11:55:42 AM

parimatch

Thanks, for detailed article.

11/24/2020 12:14:33 PM

Add Comment

Frank

Hi,

I am interested if you have ported this code to core 3.1.

thank you,

Frank

11/26/2020 12:29:55 AM

Add Comment

oshabani

Hi ,

greate sample , i have only one problem , how cloud i remove the Root element , i already have my own roots from database but the sample consist to add its "Root"

Regards,

11/30/2020 10:14:46 AM

Add Comment

vikas_jk

See this line in Razor view code ".EmptyContent("root")"

 @(Html.TreeView(Model)
                              .EmptyContent("root")  <--this one update it -->
                              .Children(m => m.Categories1)
                              .HtmlAttributes(new { id = "tree" })
                          .ChildrenHtmlAttributes(new { @class = "subItem" })
                              .ItemText(m => m.Name)
                              .ItemTemplate(
            @<text>
                <a href="@item.Description" desc="@item.Description">@item.Name</a>
            </text>)

Update it according to your need, you can fetch element from database as root element in string format and show it here, thanks

12/10/2020 12:09:44 PM

Login or Register to comment

5618

Transfer e-mails from one exchange server to another using EWS Api in C# .NET

18674

Create XML sitemap dynamically in ASP.NET MVC C#

14098

Sending SMS using Twilio API in ASP.NET MVC

18863

jQuery File Upload with progress bar in ASP.NET MVC

10865

Download multiple files as ZIP archive in ASP.NET MVC (DotNetZip example)

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly

Dynamic Treeview in ASP.NET MVC from database

Comment's

Revathi

Vinnu

Revathi

Vinnu

Revathi

jaya

Revathi

vikas_jk

Vinnu

allord

vikas_jk

parimatch

Frank

oshabani

vikas_jk

Related Articles

Subscribe Now

Related Questions