Display dynamic menu in mvc layout page

Question

i want to display dynamic menu in mvc layout page. in my database table has menuid and parentid from that i want to display nested menus. if anyone have solution please help me and if any other method for this give an example. here is my database
Database Table Structure here is my controller code

public ActionResult Index()
    {
        using (MachineShopDBEntities db = new MachineShopDBEntities())
        {
            List<MenuMaster> list = db.MenuMasters.ToList();
            ViewBag.MenuList = new SelectList(list);
        }
        return View();
    }

here is my model

public partial class MenuMaster
{
    public int MenuID { get; set; }
    public string MenuText { get; set; }
    public string Description { get; set; }
    public Nullable<int> ParentID { get; set; }
    public string ControllerName { get; set; }
    public string ActionName { get; set; }

    public bool IsChecked { get; set; }
    public List<MenuMaster> menus { get; set; }
    public IEnumerable<SelectListItem> users { get; set; }
}

here is my view

<ul class="sidebar-menu">
                @{
                    if (ViewBag.MenuList != null)
                    {
                        foreach (var items in ViewBag.MenuList.Items)
                        {
                            string action = items.ActionName;
                            string controller = items.ControllerName;
                            <li class="treeview">
                                @if (items.ParentID == items.MenuID)
                                {
                                    <ul class="treeview-menu">
                                        <li class="treeview">
                                            <a href="/@items.ControllerName/@items.ActionName">
                                                <i class="fa fa-angle-double-right"></i> <span>@items.MenuText</span>
                                                <i class="fa fa-angle-left pull-right"></i>
                                            </a>
                                        </li>
                                    </ul>
                                }

                                <a href="/@items.ControllerName/@items.ActionName">
                                    <i class="fa fa-user"></i> <span>@items.MenuText</span>
                                    <i class="fa fa-angle-left pull-right"></i>
                                </a>
                            </li>

                        }
                    }
                }

this type of output i want output image

Is above code gives any problem or error? or not work as intended? — er-sho
– er-sho, Commented Aug 16, 2018 at 11:32
no error in output but. how to display child and subchild and its subchild.? — NiharikaJagani
– NiharikaJagani, Commented Aug 16, 2018 at 11:40

er-sho · Accepted Answer · 2018-08-17 11:20:17Z

6

You need a one Recursive method that can run even if you have Nth submenus

1) Tree View Sidebar-Menu

Add below method in your razor view (_Layout.cshtml)

@helper GetTreeMenus(IEnumerable<WebApplicationMVC.Models.MenuMaster> siteMenu, Nullable<int> parentID)
{
    foreach (var i in siteMenu.Where(a => a.ParentId.Equals(parentID)))
    {
        var submenu = siteMenu.Where(a => a.ParentId.Equals(i.MenuId)).Count();

        string action = i.ActionName;
        string controller = i.ControllerName;

        <ul class="treeview-menu">
            <li class="treeview">
                <a href="/@i.ControllerName/@i.ActionName">
                    <i class="fa fa-angle-double-right"></i> <span>@i.MenuText</span>
                    <i class="fa fa-angle-left pull-right"></i>
                </a>
            </li>
            @GetTreeMenus(siteMenu, i.MenuId)
        </ul>
    }
}

And call this method with below code in same razor (_Layout.cshtml)

  @{
    if (Session["MenuList"] != null)
    {
        <div class="sidebar-menu">

            @GetTreeMenus(Session["MenuList"] as IEnumerable<WebApplicationMVC.Models.MenuMaster>, 0)

        </div>
    }
}

And action method like.

Below Index action method in Home controller will be in your Default route in RouteConfig.cs.

public ActionResult Index()
{
    using (MenuMaster db = new MenuMaster())
    {
        List<MenuMaster> list = db.MyMenus().ToList();
        Session["MenuList"] = list;
    }
    return View();
}

For this example i used test data like

public List<MenuMaster> MyMenus()
{
    return new List<MenuMaster> {
    new MenuMaster { MenuId  =1, MenuText="Home", ParentId = 0, ControllerName="Home", ActionName = "Index" },
    new MenuMaster { MenuId  =2, MenuText="Sales", ParentId = 0, ControllerName="Sales", ActionName = "Sales" },
    new MenuMaster { MenuId  =3, MenuText="Report", ParentId = 0, ControllerName="Report", ActionName = "Report" },
    new MenuMaster { MenuId  =4, MenuText="About Us", ParentId = 1, ControllerName="Home", ActionName = "Index" },
    new MenuMaster { MenuId  =5, MenuText="Company Profile", ParentId = 1, ControllerName="Home", ActionName = "Index" },
    new MenuMaster { MenuId  =6, MenuText="Add Invoice", ParentId = 2, ControllerName="Sale", ActionName = "Sale" },
    new MenuMaster { MenuId  =7, MenuText="Update Invice", ParentId = 2, ControllerName="Home", ActionName = "Index" },
    new MenuMaster { MenuId  =8, MenuText="Delete Invoice", ParentId = 2, ControllerName="Home", ActionName = "Index" },
    new MenuMaster { MenuId  =9, MenuText="Daily Report", ParentId = 3, ControllerName="Home", ActionName = "Index" },
    new MenuMaster { MenuId  =10, MenuText="Monthly Report", ParentId = 3, ControllerName="Home", ActionName = "Index" },
    new MenuMaster { MenuId  =11, MenuText="Update Invice 1", ParentId = 7, ControllerName="Home", ActionName = "Index" },
    new MenuMaster { MenuId  =12, MenuText="Update Invice 2", ParentId = 11, ControllerName="Home", ActionName = "Index" },
    };
}

Output:

edited Aug 17, 2018 at 11:20

answered Aug 16, 2018 at 13:47

er-sho

9,8212 gold badges17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

er-sho Over a year ago

@Niharika Jagani, view the answer might be it help you :) modify html and css with your need

er-sho Over a year ago

@NiharikaJagani, just replace <ul class="sidebar-menu"> with <div class="sidebar-menu"> and closing tag also from </ul> to </div> for well dom document tree, Its just suggestion, you may see in answer :)

NiharikaJagani Over a year ago

yes we just use "<li class="treeview">" instead of <ul class="treeview-menu"> and after that we add ancher tag and then after we write <ul class="treeview-menu"> <li class="treeview"> for our tree view structure and after ew put @GetTreeMenus(siteMenu, i.MenuID) method instead of after <li>... but this changes is minor for our structure ...your answer is work for me ...thank u again @ershoaib

er-sho Over a year ago

glad to hear that answer help you and you got what you want :)

NiharikaJagani Over a year ago

yes one problem is that when redirect page menu will disable because of ViewBag..but i solve that by using session

|

Collectives™ on Stack Overflow

Display dynamic menu in mvc layout page

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related