How can do Treeview in mvc 4?

Hi,

How can I create treeview in mvc4 project. The table structure is shown below.

Hi Abhilash,

Thanks for sharing the code.

The problem is the place you put your Children partial view.

If you want user @Html.Partial then the partial view must at the same place where other views of that controller are added. In your case you should create partial view "Children.cshtml" under views -> Home folder. as displayed in below image.

I hope this will solve your problem.

Please do some ground search and try to solve the problem before just posting it on the forum. This will save time.

Thanks and regards,

Chetan Ranpariya

Hello,

Please find the attachment of treeview project. And the database table I have also attached by previous commend.

Thanks

HI Abhilash,

I am some how not able to find attachement of code. I see the table script but the source code I could not locate.

Can you please resend it?

Thanks and regards,

Chetan Ranpariya

Hi Abhilash,

"Partial view "Children" was not found" . This error occurs because the view "Children" could not be found in your MVC project.

The error says itself Abhilash.

Make sure that you are calling @html.Partial with correct viewname and model parameter and also make sure that partial view is under correct controller.

Can you please share the code of your MVC application? If not can you put the entire exception details?

Thanks and regards,

Chetan Ranpariya

Hello Bikesh,

I have already tried that, but error occurred <a href="@i.NavURL">@i.MenuNamea>

where click on this. Because my CompletePathName url is not look like this /Home/Index

Please refer this link

http://www.dotnetawesome.com/2014/06/how-to-create-treeview-with-database-data-mvc4-aspnet.html

Hello Brijesh,

I have used jsTree. This is sql table. I have attached script file here. PFA. I have done this task by follow this url: http://techiesweb.net/2012/09/21/asp-net-mvc3-tree-view-with-jstree.html

But error occurred as shown below.

After I have added .edmx file. then the model class,

public partial class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string SubName { get; set; }
public Nullable<int> ManagerID { get; set; }
public IList Employees { get; set; }
public Employee()
{
Employees = new List();
}
}

public class GetDetails
{
public static List GetAllUsers()
{
DMSys_DBEntities db = new DMSys_DBEntities();
return db.Employees.ToList();
}
}

Then I have created controller,

public ActionResult Index()
{
List userList = new List();
userList = GetDetails.GetAllUsers();
var president = userList.Where(x => x.ManagerID == 0).FirstOrDefault();
SetChildren(president, userList);
return View(president);
}
private void SetChildren(Employee model, List userList)
{
var childs = userList.Where(x => x.ManagerID == model.ID).ToList();
if (childs.Count > 0)
{
foreach (var child in childs)
{
//SetChildren(childs, userList);
//model.Employees.Add(childs);
userList.Add(child);
}
}
}

then, created view page

@model MvcApplication6.Models.Employee
<script src="~/Scripts/jstree.js">script>
<link href="~/style.css" rel="stylesheet" />
<h2>Organization Treeh2>
<div id="divtree">
<ul id="tree">
<li>
<a href="0" class="usr">
@Model.Name
a>
@Html.Partial("Children", Model)
li>
ul>
div>
<script type="text/javascript">
$(function () {
$('#divtree').jstree();
})
script>

I have created Partial view,

@model MvcApplication6.Models.Employee
@{
ViewBag.Title = "Children";
}
@foreach (var item in Model.Employees)
{
<ul>
@if (item != null)
{
<li>
<a href="0" class="usr">@item.Namea>
@if (item.Employees.Count > 0)
{
@Html.Partial("Children", item)
}
li>
}
ul>
}

But, after run the application show this error.

Please help me.

Hello Brijesh Rathor,

Thank you... 'feeling inspiring' . I will try...

first u include jstree js and min in your project then in view

Select All

@foreach (var stateregions in Model)

{

if (stateregions.StateDetails.IsSelected)

{

@stateregions.StateDetails.Value

@foreach (var region in stateregions.Regions)

{

if (region.IsSelected)

{

@region.Value

}

else

{

@region.Value

}

Yes, I have also see that. But this table structure is very complicated for me. How can I complete this task?

hi,

You can use jstree to do this

see this link

http://techiesweb.net/2012/09/21/asp-net-mvc3-tree-view-with-jstree.html

Thanks,

Brijesh

Hi,

There are some ready made control libaries which you can use to create TreeView in MVC.

http://www.c-sharpcorner.com/article/using-treeview-with-asp-net-mvc-4/

http://www.dotnetawesome.com/2014/06/how-to-create-treeview-with-database-data-mvc4-aspnet.html

https://mvctreeview.codeplex.com/

https://forums.asp.net/t/2028903.aspx?Create+a+tree+view+in+mvc4+razor+syntax+

Thanks and regards,

Chetan Ranpariya

13 Replies

Know the answer? Post it — somebody with the same question will find it here.

Chetan Ranpariya9y ago
Accepted answer
Hi Abhilash,

Thanks for sharing the code.
The problem is the place you put your Children partial view.

If you want user @Html.Partial then the partial view must at the same place where other views of that controller are added. In your case you should create partial view "Children.cshtml" under views -> Home folder. as displayed in below image.

I hope this will solve your problem.

Please do some ground search and try to solve the problem before just posting it on the forum. This will save time.

Thanks and regards,
Chetan Ranpariya
Abhilash J A9y ago
Thanks Chetan
Abhilash J A9y ago
Hello,

Please find the attachment of treeview project. And the database table I have also attached by previous commend.

Thanks
Chetan Ranpariya9y ago
HI Abhilash,

I am some how not able to find attachement of code. I see the table script but the source code I could not locate.

Can you please resend it?

Thanks and regards,
Chetan Ranpariya
Chetan Ranpariya9y ago
Hi Abhilash,

"Partial view "Children" was not found" . This error occurs because the view "Children" could not be found in your MVC project.

The error says itself Abhilash.

Make sure that you are calling @html.Partial with correct viewname and model parameter and also make sure that partial view is under correct controller.

Can you please share the code of your MVC application? If not can you put the entire exception details?

Thanks and regards,
Chetan Ranpariya
Abhilash J A9y ago
Hello Bikesh,

I have already tried that, but error occurred <a href="@i.NavURL">@i.MenuNamea>
where click on this. Because my CompletePathName url is not look like this /Home/Index
Bikesh Srivastava9y ago
Please refer this link
http://www.dotnetawesome.com/2014/06/how-to-create-treeview-with-database-data-mvc4-aspnet.html
Abhilash J A9y ago
Hello Brijesh,

I have used jsTree. This is sql table. I have attached script file here. PFA. I have done this task by follow this url: http://techiesweb.net/2012/09/21/asp-net-mvc3-tree-view-with-jstree.html

But error occurred as shown below.

After I have added .edmx file. then the model class,
public partial class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string SubName { get; set; }
        public Nullable<int> ManagerID { get; set; }
        public IList Employees { get; set; }
        public Employee()
        {
            Employees = new List();
        }
    }
public class GetDetails
   {
       public static List GetAllUsers()
       {
           DMSys_DBEntities db = new DMSys_DBEntities();
           return db.Employees.ToList();
       }
   }
Then I have created controller,
public ActionResult Index()
       {
           List userList = new List();
           userList = GetDetails.GetAllUsers();
           var president = userList.Where(x => x.ManagerID == 0).FirstOrDefault();
           SetChildren(president, userList);
           return View(president);
       }

       private void SetChildren(Employee model, List userList)
       {
           var childs = userList.Where(x => x.ManagerID == model.ID).ToList();
           if (childs.Count > 0)
           {
               foreach (var child in childs)
               {
                   //SetChildren(childs, userList);
                   //model.Employees.Add(childs);
                   userList.Add(child);
               }
           }
       }
then, created view page
@model MvcApplication6.Models.Employee
<script src="~/Scripts/jstree.js">script>
<link href="~/style.css" rel="stylesheet" />
<h2>Organization Treeh2>
<div id="divtree">
    <ul id="tree">
        <li>
            <a href="0" class="usr">
                @Model.Name
            a>
            @Html.Partial("Children", Model)
        li>
    ul>
div>
<script type="text/javascript">
    $(function () {
        $('#divtree').jstree();
    })
script>
I have created Partial view,
@model MvcApplication6.Models.Employee
@{
    ViewBag.Title = "Children";
}
@foreach (var item in Model.Employees)
{
    <ul>
        @if (item != null)
        {
            <li>
                <a href="0" class="usr">@item.Namea>
                @if (item.Employees.Count > 0)
                {
                    @Html.Partial("Children", item)
                }
            li>
        }
    ul>
}
But, after run the application show this error.
Please help me.
Abhilash J A9y ago
Hello Brijesh Rathor,

Thank you... 'feeling inspiring' . I will try...
Brijesh Rathor9y ago
first u include jstree js and min in your project then in view
Select All

@foreach (var stateregions in Model)
{
if (stateregions.StateDetails.IsSelected)
{

@stateregions.StateDetails.Value

@foreach (var region in stateregions.Regions)
{
if (region.IsSelected)
{

@region.Value
}
else
{

@region.Value
}
}