created nested list in MVC3 - asp.net-mvc-3

Question

I want to create menu using <ul> and <li> tags. Im working in MVC3 + Razor. And I stored menu in database like this
MenuId Name ParentMenuId OrderBy
1 Item1 Null 1
2 Item2 Null 2
3 Item2.1 2 1
4 Item2.1.1 3 1
5 Item2.1.2 3 2
The HTML output should be
<ul>
<li>Item1</li>`
<li>Item2</li>`
<ul>
<li>Item2.1</li>
<ul>
<li>Item2.1.1</li>
<li>Item2.1.2</li>
</ul>
</ul>
</ul>
Can anyone please help me how can I generated menu from this. I tried searching on internet, but not able to find something which I can use.
I see this article (Recursion in an ASP.NET MVC view) where one reply is to create HTMLHelperExtension.
But not able to find out in my case how to use.

Answer 1

you can try something like this :
#helper CreateCategory(int? nid)
{
var childs = context.Categories.Where(c=>c.parentid == nid).OrderBy(C => C.order);
int childsCount = childs.Count();
if (childsCount == 0)
return;
<ul>
#foreach (Category child in childs)
{
<li>
#child.Title
CreateCategory(child.Id);
</li>
}
</ul>
}
you most call this helper so :
CreateCategory(null);
hope this could help.

Answer 2

You should use DisplayTemplate
Here is an example:
<!-- Your view -->
#if (Model.Items != null)
{
<ul>
foreach (var item in Model.Items)
{
#Html.DisplayFor(m => item)
}
</ul>
}
<!-- Your DisplayTemplate control -->
<li>
#Model.Name
</li>
#if (Model.Items != null) {
<ul>
foreach (var item in Model.Items)
{
#Html.DisplayFor(m => item)
}
</ul>
}
So you will recurcively call DisplayTemplate from DisplayTemplate to render nested Items