I have a partial view in an MVC 4 project, which is strongly typed. It takes an IEnumerable collection of a table of a database. In that table there are IDs, Names, and ParentIDs for storing hierarchical connection between records. The view that calls the partial view is also strongly typed, it takes the whole database as the model, and passes the Categories table to the partial view, as an enumerable collection:
@Html.Partial("_TreeCategories", @Model.Categories.ToList())
And in the partial view, I want to take the root nodes first, so I can extend the whole tree in a recursive way. In the database table, all records are considered as root nodes with a ParentID == null.
So generally, my way to do this would look like:
@model IEnumerable<TreeCollections.OpenAccess.Category>
@if (Model.ToList().Count >= 0)
{
@if (Model.ToList()[0].Parent_id == null)
{
<text><ul id="navigation"></text>
}
@foreach (var node in @Model)
{
<li><a href="?@node.Id">@node.Name</a>
@foreach (var subNode in @Model.Where(s => s.Parent_id == node.Id))
{
@Html.Partial("_TreeCategories", subNode)
}
</li>
}
@if (Model.ToList()[0].Parent_id == null)
{
</ul>
}
}
So I check if the first element's ParentID of the Model is null, and if it is, then it should create a < ul> tag with the id "navigation", so the jquery plugin can recognise that it is meant to be a treeview control. Then it creates a list tag with a recursive call within. The recursively called partial view takes the children of the node as the model. And lastly if we arrived to the end of the partial view's rendering, and we are at the "root level", it should write a closing < ul> tag
There are some problems, however. First, at the end, that closing unordered list tag is wrong, VS can't find the matching start tag for that. Second, I don't know why, but at the top, I can put the starter < ul> tag in between tags, and I can't do it at the closing tag below. But I'm not sure about these < ul > tags either, I feel those are wrong too.
Please, help me, I'm stuck with this for days now.