MvcSiteMapProvider - 增强的 bootstrap 下拉菜单

MvcSiteMapProvider - Enhanced bootstrap dropdown menu

我正在尝试构建这样的菜单:

作为参考,我正在使用这个库 https://github.com/behigh/bootstrap_dropdowns_enhancement

@Html.MvcSiteMap().Menu("BootstrapMenuHelperModel")

@model MenuHelperModel

<nav class="navbar" role="navigation">
    <div class="container-fluid menu-container">
        <div class="collapse navbar-collapse">
            <div class="navbar-header">
                <span class="navbar-brand">FAR BACKOFFICE</span>
            </div>
            <ul class="nav nav-pills">
                @foreach (var node in Model.Nodes)
                {
                    if (node.Descendants.Any())
                    {
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">@node.Title <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                @foreach (var descendant in node.Descendants)
                                {
                                    if (descendant.Descendants.Any())
                                    {
                                        <li role="presentation" class="dropdown-submenu">
                                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">@descendant.Title</a>
                                            <ul class="dropdown-menu">
                                                @foreach (var descendant2 in descendant.Descendants)
                                                {
                                                    <li role="presentation">@Html.ActionLink(descendant2.Title, descendant2.Action, descendant2.Controller)</li>
                                                }
                                            </ul>
                                        </li>
                                    }
                                    else
                                    {
                                        <li role="presentation">@Html.ActionLink(descendant.Title, descendant.Action, descendant.Controller)</li>
                                    }
                                }
                            </ul>
                        </li>
                    }
                    else
                    {
                        <li role="presentation">@Html.ActionLink(node.Title, node.Action, node.Controller)</li>
                    }
                }                
            </ul>
        </div>
    </div>
</nav>

我的控制器

[MvcSiteMapNode(Title = "Assembleia", ParentKey = "Home", Key = "Assembleia", Clickable = false, Attributes = @"{ ""visibility"": ""SiteMapPathHelper,MenuHelper,!*"" }")]
    public class AssembleiaController : Controller { }

    [Route("Assembleia/Comunicado")]
    [MvcSiteMapNode(Title = "Comunicado", ParentKey = "Assembleia", Key = "AssembleiaComunicado", Clickable = false, Attributes = @"{ ""visibility"": ""SiteMapPathHelper,MenuHelper,!*"" }")]
    public class AssembleiaComunicadoController : AssembleiaController
    {        
        [Route("Assembleia/Comunicado/Enviar")]
        [MvcSiteMapNode(Title = "Enviar", ParentKey = "AssembleiaComunicado", Key = "AssembleiaComunicadoEnviar", Attributes = @"{ ""visibility"": ""SiteMapPathHelper,MenuHelper,!*"" }")]
        public ActionResult Enviar()
        {
            return View();
        }

        [HttpGet]
        [Route("Assembleia/Comunicado/Consultar")]
        [MvcSiteMapNode(Title = "Consultar", ParentKey = "AssembleiaComunicado", Key = "AssembleiaComunicadoConsultar", Attributes = @"{ ""visibility"": ""SiteMapPathHelper,MenuHelper,!*"" }")]
        public ActionResult Consultar()
        {
            return View();
        }
    }

因此,我出现了一种奇怪且无法理解的行为

怎么了?

也在 GitHub

上询问

node.Descendants 应该是 node.Children

在此处了解 Descendants 和 Children 的区别,CSS Child vs Descendant selectors(不要介意 post 关于 CSS 的蜂鸣,这是一个通用模式)