How can do Treeview in mvc 4?

Question

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

Chetan Ranpariya · 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

Chetan Ranpariya · Answer

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 A · Answer

Thanks Chetan

Abhilash J A · Answer

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

Chetan Ranpariya · Answer

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

Abhilash J A · Answer

Hello Bikesh, I have already tried that, but error occurred a href = "@i.NavURL" > @i . MenuName a > where click on this. Because my CompletePathName url is not look like this /Home/Index

Bikesh Srivastava · Answer

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

Abhilash J A · Answer

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 Tree h2 > 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.Name a > @if (item.Employees.Count > 0) { @Html.Partial("Children", item) } li > } ul > } But, after run the application show this error. Please help me.

Abhilash J A · Answer

Hello Brijesh Rathor, Thank you... 'feeling inspiring' . I will try...

Brijesh Rathor · Answer

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 } } } if (stateregions.StateDetails.IsSelected != true) { @stateregions.StateDetails.Value @foreach (var region in stateregions.Regions) { if (region.IsSelected) { @region.Value } else { @region.Value } } } } do like this pass the models as like format hear i passed state region , region is related to states hope it will help u. just do it . i already implement this. so u start .if any issue come then ask me i will solve no problem Thnaks Brijesh

Abhilash J A · Answer

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

Brijesh Rathor · Answer

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

Chetan Ranpariya · Answer

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

How can do Treeview in mvc 4?

Answers (13)