如何顯示<asp:Menu>自舉導航欄

Question

我開發一個ASP.Net應用程序，我有一個引導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> 

現在我想轉換這到使用一個站點地圖並且保持引導佈局。所以，我有以下的網站地圖代碼和更新的母版頁：

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是佈局徹底打破了沒有W上。我該如何解決這個問題？

我想用站點地圖來實現標準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菜單很長一段時間，工作正常。剛剛更新了自舉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>