在MVC布局页面中显示动态菜单 [英] Display dynamic menu in mvc layout page

问题描述

我想在mvc布局页面中显示动态菜单.在我的数据库表中有想要显示嵌套菜单的menuid和parentid.如果有人有解决方案，请帮助我，如果有其他方法可以举个例子.这是我的数据库

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

解决方案

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:

这篇关于在MVC布局页面中显示动态菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！