在 mvc 布局页面中显示动态菜单

Question

我想在 mvc 布局页面中显示动态菜单。 在我的数据库表中有 menuid 和 parentid ，我想显示嵌套菜单。 如果有人有解决方案，请帮助我，如果有任何其他方法可以举个例子。 这是我的数据库
Database Table Structure 这是我的控制器代码

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

这是我的模型

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; }
}

这是我的看法

<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>

                        }
                    }
                }

我想要的这种类型的输出 output image

Answer 1

您需要一个 递归 方法，即使您有第 N 个子菜单也可以运行

1) 树状视图侧边栏菜单

在您的 razor 视图中添加以下方法 (_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>
    }
}

并在同一剃须刀（_Layout.cshtml）中使用以下代码调用此方法

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

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

        </div>
    }
}

和action方法一样。

Home 控制器中的Index 下方操作方法将位于RouteConfig.cs 中的Default 路由中。

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

对于这个例子，我使用了类似的测试数据

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" },
    };
}

输出：