UL LI tree, on the client part - asp.net-mvc

Question

How can you build a ul LI tree based on an existing model? On the client side of the application.Nesting can be unlimited
#foreach (var item in Model)
{
<tr>
<th scope="col">#Html.DisplayFor(modelItem => item.Id) </th>
#if (item.ParentId != null)
{
<th scope="col">#Html.DisplayFor(modelItem => item.ParentTitle) </th>
}
else
{
<th scope="col">null </th>
}
<th scope="col">#Html.DisplayFor(modelItem => item.Title) </th>
<th scope="col">#Html.DisplayFor(modelItem => item.Description) </th>
<th scope="col">#Html.DisplayFor(modelItem => item.Created) </th>
</tr>
}
I saw a manual build, just tagging and getting model elements, but is it possible to automate the process somehow?
<ul>
<li>First parent
<ul>
<li>First child
<ul>
Model:
[Table("TestTable", Schema = "dbo")]
public class MyClass
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public DateTime Created { get; set; }
public string Description { get; set; }
}
public class MySecondClass
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public DateTime Created { get; set; }
public string Description { get; set; }
public string ParentTitle { get; set; }
}

Answer 1

I would have had a list of children property on your parent rather than 2 very similar classes, then you would be able to make a hierarchical structure:
public class MyClass
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public DateTime Created { get; set; }
public string Description { get; set; }
public IEnuerable<MyClass> Children { get; set; }
}
Then instead of passing a flat set of classes through as your model, you can build up your hierarchy (in the below, I assumed Model is a list of all your items):
var topLevel = Model.Where(item => !item.HasValue); // or whatever the value is when there is no parent
Then you can loop through this top level to set your children:
foreach (var item in topLevel)
{
item.Children = GetChildren(item.Id, Model);
}
And your Get Children method can be
public static IEnumerable<MyClass> GetChildren(int parentId, IEnumerable<MyClass> allItems)
{
if (parentId.HasValue)
{
var children = allItems.Where(item => item.ParentId.HasValue && item.ParentId.Value.Equals(parentId));
if (children != null && children.Any())
{
foreach (var item in children)
{
item.Children = GetChildren(item.Id, allItems);
}
return children;
}
}
return null;
}
This should help build something then you can have a partial that takes a model of IEnumerable<MyClass> and make it recursive:
#model IEnumerable<MyClass>
#foreach (MyClass item in Model)
{
<ul>
<li>
#item.Title
#if (item.Children != null && item.Children.Any())
{
#Html.Partial("NameOfThisPartial", item.Children)
}
</li>
</ul>
}
And your initial partial call will be:
#Html.Partial("NameOfThisPartial", topLevel)