This week I had to create a tree structure in my work, so I made a little research about it and I found this useful post that helped me to finish:
http://weblogs.asp.net/mikebosch/archive/2008/11/25/hierarchical-treeview-with-asp-net-mvc-jquery.aspx
The example above was written in MVC 2, so I made an upgrade to MVC3 using EF Code First with Razor, so I could dynamically add items by indicating the parent's ID.
Model
The model is really simple (based on the link posted above), I'm just indicating that the tree model can have a collection of itself (Group) and the relation is between the Id and the Parent_Id.public class Tree { [Key] public int Id { get; set; } public string Name { get; set; } public int? Parent_Id { get; set; } [ForeignKey("Parent_Id")] public virtual ICollection<Tree> Group { get; set; } }
Controller
I created a controller named 'Show', which will call all the items where its parent ID equals null; meaning that these items are roots of the tree structure.public ViewResult Show() { var roots = db.Tree.Where(r => r.Parent_Id == null); return View(roots); }
View
I used 2 views, one for display the roots of the structure (Show view), and the other for displaying all the child elements (TreeItem view).Show View:
@model IEnumerable<TreeView.Models.Tree> <ul> @Html.Partial("~/Views/Tree/TreeItem.cshtml") </ul>TreeItem View:
@model IEnumerable<TreeView.Models.Tree> @{ Layout = null; } @foreach(var item in Model){ <li> @item.Name @if (item.Group.Count > 0) { <ul> @{Html.RenderPartial("~/Views/Tree/TreeItem.cshtml", item.Group);} </ul> } </li> }
No comments:
Post a Comment