Logic for displaying infinite category tree in nested <ul>s from Self Join Table

Question

Hi everybody!
Please help me solve my big problem.
in my on-line shopping project i created a dynamic Category List (with Infinite Level Depth) Implemented in a Single Table in DB with Self join. the schema is like below:

Update
I want to use a JQuery plugin to make a Multi Level Menu bar. this plugin uses <ul> and <li> elements so I should transform the DB table to <ul> and <li>. the result should like this:

<ul>
  <li>Clothing 1
    <ul>
      <li>Trousers 2
        <ul>
          <li>Mens trousers 3</li>
          <li>Ladies trousers 3</li>
        </ul>
      </li> 
      <li>Jackets 2</li>
      <li>Shirts 2</li>
      <li>Shoes
        <ul>
          <li>Mens shoes 3
            <ul>
              <li>Mens formal shoes 4</li>
              <li>Mens casual shoes 4</li>
            </ul>
          </li>
          <li>Kids shoes 3</li>
          <li>Ladies shoes 3</li>
        </ul>
      </li>
    </ul>
   </li>
  <li>Cars 1
   <ul>
     <li>Small cars 2</i>
   </ul>
  </li>
</ul>

I can use a nested data control(like repeater control) but you know, with this solution i just can implement a list with non-infinite hierarchical tree structure.
please help me! any suggestion?? I googled the web but not a suitable way found. I use ASP.net 3.5 and LINQ.
what is the best way?

Answer 1

I think ASP.NET TreeView is your friend.

Take a look here too.

Also, you might want to use a dynamically created nested DataGrid or Repeater, here is an example (you can make it dynamic, so the nested (or even the parent) repeaters are genenerated programmatically.

void GenerateChildren(Menu menu)
{
    //Create DataGridRow/RepeaterRow/TreeViewNode/whatever for this menu
    menu.Children.Load();
    foreach (var child in menu.Children)
    {
        GenerateChildren(child);        
    }
}

Update See example 5 on this page. I would recommend generating the jQuery code by server, so it's easier for you to control both the menus and the jQ generated menus.

Answer 2

Use this recursive method

private string GenerateUL(IQueryable<Menu> menus)
{
    var sb = new StringBuilder();

    sb.AppendLine("<ul>");
    foreach (var menu in menus)
    {
        if (menu.Menus.Any())
        {
            sb.AppendLine("<li>" + menu.Text);
            sb.Append(GenerateUL(menu.Menus.AsQueryable()));
            sb.AppendLine("</li>");
        }
        else
            sb.AppendLine("<li>" + menu.Text + "</li>");
    }
    sb.AppendLine("</ul>");

    return sb.ToString();
}

like this

DataClasses1DataContext context = new DataClasses1DataContext();
var s = GenerateUL(context.Menus.Where(m => m.ParentID == null));
Response.Write(s);