mvc中的无限多级菜单

Question

我在 mvc 中创建了多级菜单。它有效，但我想无限计算级别。现在有 4 个级别，所以将来如果有人想在数据库中添加 5 个级别，它不会显示在我的菜单中。我需要添加另一个 foreach 循环来显示 5. 级别。那么我怎样才能让我的菜单无限级别呢？

这是我的菜单视图。

 @{       
    var myMenu = @Model;
    var navbarmenu = myMenu.Where(x => x.ParentID == null);
    var i = 0;
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class=" nav navbar-nav">
                    @foreach (var menuLevel1 in navbarmenu)
                    {
                        <li class="dropdown">
                            <a href="~/ADDS/Default.aspx" style="font-size:16px;">
                                @menuLevel1.MenuName
                                @if (menuLevel1.MenuName != "Home")
                                {
                                    <span class="caret"></span>
                                }
                            </a>
                            @{ var navbarsubmenu = myMenu.Where(x => x.ParentID == menuLevel1.MenuID);}
                            @if (navbarsubmenu.IsAny())
                            {
                                <ul class="dropdown-menu">
                                    @foreach (var menuLevel2 in navbarsubmenu)
                                    {
                                        <li class="dropdown-submenu">
                                            @if (!string.IsNullOrEmpty(menuLevel2.MenuLink))
                                            {
                                                <a href="@Url.Content(menuLevel2.MenuLink)">
                                                    @menuLevel2.MenuName
                                                </a>
                                            }
                                            else
                                            {
                                                <a href="~/ADDS/Default.aspx">
                                                    @menuLevel2.MenuName
                                                </a>
                                            }
                                            @{var navbarsubmenu2 = myMenu.Where(x => x.ParentID == menuLevel2.MenuID);}
                                            @if (navbarsubmenu2.IsAny())
                                            {
                                                <ul class="dropdown-menu">
                                                    @foreach (var menuLevel3 in navbarsubmenu2)
                                                    {
                                                        <li class="dropdown-submenu">
                                                            @if (!string.IsNullOrEmpty(menuLevel3.MenuLink))
                                                            {
                                                                <a href="@Url.Content(menuLevel3.MenuLink)">
                                                                    @menuLevel3.MenuName
                                                                </a>
                                                            }
                                                            else
                                                            {
                                                                <a href="~/ADDS/Default.aspx">
                                                                    @menuLevel3.MenuName
                                                                </a>
                                                            }
                                                            @{var navbarsubmenu3 = myMenu.Where(x => x.ParentID == menuLevel3.MenuID);}
                                                            @if (navbarsubmenu3.IsAny())
                                                            {
                                                                <ul class="dropdown-menu">
                                                                    @foreach (var menuLevel4 in navbarsubmenu3)
                                                                    {
                                                                        <li class="dropdown-submenu">
                                                                            @if (!string.IsNullOrEmpty(menuLevel4.MenuLink))
                                                                            {
                                                                                <a href="@Url.Content(menuLevel4.MenuLink)">
                                                                                    @menuLevel4.MenuName
                                                                                </a>
                                                                            }
                                                                            else
                                                                            {
                                                                                <a href="~/ADDS/Default.aspx">
                                                                                    @menuLevel4.MenuName
                                                                                </a>
                                                                            }
                                                                        </li>
                                                                    }
                                                                </ul>
                                                            }
                                                        </li>
                                                    }
                                                </ul>
                                            }
                                        </li>
                                    }
                                </ul>
                            }
                        </li>
                    }
                </ul>
            </div>
        </div>
    </nav>
}

Answer 1

您是否考虑过在您的视图中尝试使用辅助方法？使用递归还有更多类似的东西吗？

@helper GetSubMenus(IEnumerable<menutable> siteMenu, Nullable<int> parentID)
{
    foreach (var i in Model.Where(a => a.ParentID.Equals(parentID)))
    {
        var submenu = Model.Where(a => a.ParentID.Equals(i.MenuID)).Count();

        <li class="@(submenu > 0 ? "dropdown-submenu" : "dropdown")">
            <a href="@(!string.IsNullOrEmpty(i.MenuLink) ? Url.Content(i.MenuLink) : "~/default)" style="font-size:16px;">@i.MenuName</a>
            @if (submenu > 0)
            {
                <ul class="dropdown-menu">
                    @GetSubMenus(siteMenu, i.MenuID)
                    @* Recursive  Call for Populate Sub items here*@
                </ul>
            }
        </li>
    }
}

@{
    var mymenu = @Model;
    var menuParentID = mymenu.First().ParentID;
}  
@if (mymenu != null && mymenu.Count() > 0)
{
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class=" nav navbar-nav">
                    @GetSubMenus(mymenu, menuParentID)
                </ul>
            </div>
        </div>
    </nav>
} 

Answer 2

我将创建一个 MultiLevelMenu 模型，该模型将由服务层中的数据库填充，然后您可以使用部分视图。

public class MultiLevelMenu
{
   public string MenuName { get; set; }
   public MultiLevelMenu NestedMenu { get; set; }
}

然后在你的主视图中有：

@model MultiLevelMenu;

<div>@Model.MenuName</div>

@Html.Partial("_MultiLevelMenu", Model);

那么对于局部视图：

@if (Model.MultiLevelMenu != null) 
{
    <div>@Model.MenuName</div>
    @Html.Partial("_MultiLevelMenu", Model);
}