Create dynamic Menu constructed from database

Question

I'm working in Asp.Net MVC, and I want to populate menu from database, but I don't really have an idea how can I do it to insert sub-menus into each menu, and each of this sub-menu can have another submenu, etc.

I was is something similar like facebook comment and reply model.

First I have model of menu like:

public int MenuId { get; set; }
      public string Name { get; set; }
      public string Controller { get; set; }
      public string Action { get; set; }
      public int Order { get; set; }
      public string Icon { get; set; }
      public bool IsAdmin { get; set; } 

Sub-menu:

public int SubMenuId { get; set; }
      public int MenuId { get; set; } // Menu Fk
      public string Name { get; set; }
      public string Controller { get; set; }
      public string Action { get; set; }
      public int Order { get; set; }
      public string Icon { get; set; }
      public bool IsAdmin { get; set; } 

It's my logic correctly?, someone implement something similar? What I need to do into controller to make it works?, if someone have an example I really apreciated it. Thanks in Advance

Answer 1

The traditional way is to just have your Menu model and have a nullable ParentMenuId. If the ParentMenuId is null, your Menu is a root node. You can set your navigation properties so from each Menu node you can access .Children to get all of the nodes that point to it.

Answer 2

I believe @Dobbins has the correct idea. In the database you can have a MenuLink table:

MenuLink
- ID int IDENTITY(1,1) NOT NULL <- Primary Key
- ParentId int NULL <- Foreign Key
- OrderNumber int
- LinkUri varchar(1024) <- Can be replaced with Controller, Action 
- IconUri varchar(1024)
- Text nvarchar(256)

You can then select all menu links and their sub-links from the database.

Your Menu Object can then have a list of Menu Objects:

public class MenuLink 
{
   int Id { get; set; }
   int ParentId { get; set; }
   int OrderNumber { get; set; }
   Uri LinkUri { get; set; } 
   Uri IconUri { get; set; }
   string Text { get; set; }
   IList<MenuLink> SubMenuItems { get; set; }
}

Now you can use razor, or your JavaScript framework of choice to create the dynamic menu in code.