如何将 <asp:Menu> 显示为 bootstrap 导航栏

Question

我正在开发一个 ASP.Net 应用程序，我有一个 Bootstrap navbar 设置如下：

Site.Master

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <asp:HyperLink runat="server" AccessKey="1" ToolTip="Go to Home Page" NavigateUrl="~/Home">
                Home
            </asp:HyperLink>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a runat="server" href="~/Page_1">Page 1</a>
                </li>
                <li>
                    <a runat="server" href="~/Page_2">Personal Details</a>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        Page 3 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a runat="server" href="~/Page_3/Page_3A">Page 3A</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a runat="server" href="~/Page_3/Page_3B">Page 3B</a></li>
                        <li><a runat="server" href="~/Page_3/Page_3C">Page 3C</a></li>
                        <li><a runat="server" href="~/Page_3/Page_3D">Page 3D</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a runat="server" href="~/Page_3/Page_3E">Page 3E</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

现在我想将其转换为使用站点地图并保持 Bootstrap 布局。所以我有以下站点地图代码和更新的母版页：

Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode roles="*">
        <siteMapNode url="~/Page_1" title="Page 1"  description="Page 1" />
        <siteMapNode url="~/Page_2" title="Page 2"  description="Page 2" />
        <siteMapNode url="~/Page_3/Default" title="Page 3"  description="Page 3">
            <siteMapNode url="~/Page_3/Page_3A" title="Page 3A"  description="Page 3A" />
            <siteMapNode url="~/Page_3/Page_3B" title="Page 3B"  description="Page 3B" />
            <siteMapNode url="~/Page_3/Page_3C" title="Page 3C"  description="Page 3C" />
            <siteMapNode url="~/Page_3/Page_3D" title="Page 3D"  description="Page 3D" />
            <siteMapNode url="~/Page_3/Page_3E" title="Page 3E"  description="Page 3E" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

Site.Master

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <asp:HyperLink runat="server" AccessKey="1" ToolTip="Go to Home Page" NavigateUrl="~/Home">
                Home
            </asp:HyperLink>
        </div>

        <div class="navbar-collapse collapse">
            <asp:Menu ID="mnuMain" Runat="server" DataSourceID="smdsMain"
                Orientation="Horizontal" 
                StaticDisplayLevels="2" >
              </asp:Menu>

            <asp:SiteMapDataSource ID="smdsMain" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
        </div>
    </div>
</div>

我的站点地图可以正常使用，但 navbar 的布局现在完全损坏了。我该如何解决这个问题？

我想使用站点地图实施标准 Bootstrap navbar。

Answer 1

我不再需要下拉列表并找到了解决方案。不过可以对其进行改进以适应下拉菜单。

我不得不使用 <asp:Repeater>。像这样：

<ul class="nav navbar-nav">
    <asp:Repeater runat="server" ID="rptMenu" DataSourceID="smdsMain">
        <ItemTemplate>
            <li>
                <a runat="server" href='<%# Eval("Url") %>'><%# Eval("Title") %></a>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

<asp:SiteMapDataSource ID="smdsMain" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />

很高兴我终于得到了有用的东西。最好的部分是您不需要更改 CSS 来满足它。

Answer 2

我已经使用 Bootstrap 3.x 和 ASP 菜单很长时间了，效果很好。刚刚更新到 Bootstrap 4.x，需要更新菜单，以下对我有用：

        <nav class="navbar navbar-expand-md navbar-light" style="background-color: #e3f2fd;">
        <a class="navbar-brand" href="/">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <asp:Menu ID="MainMenu" runat="server" Orientation="horizontal" CssClass="navbar-nav mr-auto" StaticMenuStyle-CssClass="nav-item" StaticSelectedStyle-CssClass="nav-item" StaticSubMenuIndent="16px" DynamicMenuStyle-CssClass="nav-item dropdown-menu" RenderingMode="List" role="menu" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" >

                <LevelMenuItemStyles>
                    <asp:MenuItemStyle CssClass="dropdown-item" HorizontalPadding="15px" Height="50px" VerticalPadding="15px" />
                </LevelMenuItemStyles>
                <LevelSelectedStyles>
                    <asp:MenuItemStyle CssClass="nav-item active" Font-Underline="False" />
                </LevelSelectedStyles>
                <StaticHoverStyle Font-Underline="true" />
                <StaticSelectedStyle Font-Bold="true"   />
            <DynamicMenuItemStyle CssClass="dropdown-item" />
        </asp:Menu>
        </div>
    </nav>

如何将 <asp:Menu> 显示为 bootstrap 导航栏

How to display <asp:Menu> as bootstrap navbar

css

asp.net

sitemapprovider

navbar

twitter-bootstrap