How to creating a Dynamic sub-menus by sub-categories

Question

I'm setting a Menu with Sub-menu display Sub-categories, in database I created a column isSelected with Boolean data type. If only Sub-categories is isSelected == true, it will be display on main page. I'm wondering how to setting Sub-categories with isSelected == true display on Menu on the header.

IQueryable<ProductSubcategory> list = null;
            if (Id == null)
            {
                list = BikesDB.ProductSubcategories;
            }
            else
            {
                int id = Id.Value;
                list = BikesDB.ProductSubcategories.Where
                (m => m.ProductSubcategoryID == id && m.NameofBike == Name);
            }

            var bikes = list.Where(m => m.isSelected == true)
                .AsEnumerable().Select
                (p => new Bike { Id = p.ProductSubcategoryID, Name = p.NameofBike });

            var viewModel = new CategoriesIndexViewModel
            {
                NumberOfModel = bikes.Count(),
                NameofBike = bikes.Select(b=>b.Name).ToList(),
                Bikes = bikes.ToList()
            };
            return this.View(viewModel);

Now I just hard-code three sub-menus in HTML:

<li>
  <a href="@Url.Content("~/Bike/")">Home</a>
     <ul>
        <li>
           <a href="@Url.Content("~/Bike/Categories/1?name=Mountain Bikes&class=image")">Mountain Bikes</a>
        </li>
        <li>
           <a href="@Url.Content("~/Bike/Categories/2?name=Road Bikes&class=image")">Road Bikes</a>
        </li>
         <li>
           <a href="@Url.Content("~/Bike/Categories/3?name=Touring Bikes&class=image")">Touring Bikes</a>
          </li>
     </ul>

How to fix it dynamically based on Sub-categories display on main page ???

You can use dynamic properties of ViewBag. Add all the menu hirerchy in the viewbag and then implement the logic in your _layout. I dont have the code handy to show, but this is how I implemented it in one of my projects. — Nilesh, Mar 19 '14 at 07:06
@Nilesh Thanks for reading, could you show me any example for that? I really appreciate! — Trung Pham, Mar 19 '14 at 07:13
With a quick search I found this [link](http://stackoverflow.com/questions/2203320/building-an-asp-net-mvc-master-page-menu-dynamically-based-on-the-current-user). — Nilesh, Mar 19 '14 at 07:59
@Nilesh It doesn't work, will you please put your answer to solve that problem? — Trung Pham, Mar 19 '14 at 08:12

score 0 · Accepted Answer · answered Mar 19 '14 at 10:57

Check if this helps.

public abstract class BaseController : Controller
{

    protected override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        IEnumerable<MVC3Stack.Models.MenuItem> menus = BuildMenu();
        ViewBag.Menus = menus;
        //base.OnActionExecuting(filterContext);
    }

    private IEnumerable<MVC3Stack.Models.MenuItem> BuildMenu()
    {
        IEnumerable<MVC3Stack.Models.MenuItem> menus = new List<MVC3Stack.Models.MenuItem>
        {
            new MVC3Stack.Models.MenuItem{Id = 1, Level = 0, ParentId = 0, Text = "Main", Url = Url.Action("Index", "Home"), IsSelected=true, HasChildren=true },
            new MVC3Stack.Models.MenuItem { Id = 2, Level = 1, ParentId = 1, Text = "Main-SubMenu1", Url = Url.Action("Index", "Home"), IsSelected=false, HasChildren=false },
            new MVC3Stack.Models.MenuItem { Id = 3, Level = 1, ParentId = 1, Text = "Main-SubMenu2", Url = Url.Action("Index", "Home"), IsSelected=true , HasChildren=false},
            new MVC3Stack.Models.MenuItem { Id = 4, Level = 0, ParentId = 0, Text = "Second Menu", Url = Url.Action("Index", "Home") ,IsSelected=true, HasChildren=true},
            new MVC3Stack.Models.MenuItem { Id = 5, Level = 1, ParentId = 4, Text = "Second Menu-SubMenu1", Url = Url.Action("Index", "Home"),IsSelected=true, HasChildren=false }
        };
        return menus;
    }
}

Here is the _layout.cshtml

@{
  var topLevel = ((IEnumerable<MVC3Stack.Models.MenuItem>)ViewBag.Menus).Where(x => x.Level == 0);
 }
 <ul id="menu">
     @foreach (var item in topLevel)
     {
        if (item.IsSelected)
        {

        <li>
            <a href="@Url.Action("Index", "Home")">@item.Text</a>
            @if (item.HasChildren)
            {
                var level1 = ((IEnumerable<MVC3Stack.Models.MenuItem>)ViewBag.Menus).Where(x => x.Level == 1 && x.ParentId == item.Id);
                <ul>
                @foreach (var item1 in level1)
                {
                if (item1.IsSelected)
                {
                     <li>
                        <a href="@Url.Action("Home", "Index")">@item1.Text</a>
                     </li>
                 }
              }

         </ul>
      }
   </li>
    }
  }   
</ul>

This can give you some pointers on how to implemente this. Note: Number of levels will be fixed with this solution.

How to creating a Dynamic sub-menus by sub-categories

1 Answers1

Linked