Làm thế nào để hiển thị <asp:Menu> như bootstrap navbar

Question

Tôi đang phát triển một ứng dụng ASP.Net và tôi đã có một Bootstrap navbar thiết lập như sau:

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> 

Bây giờ tôi muốn chuyển đổi điều này vào việc sử dụng sơ đồ trang web và giữ bố cục Bootstrap. Vì vậy, tôi có đoạn mã sau sitemap và trang chủ Cập nhật:

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> 

chức năng sitemap của tôi nhưng cách bố trí của tôi navbar là hoàn toàn bị phá vỡ không w. Làm thế nào tôi có thể giải quyết vấn đề này?

Tôi muốn triển khai chuẩn Bootstrap navbar với sơ đồ trang web.

Answer 1

Tôi không cần danh sách thả xuống nữa và tìm thấy giải pháp. Nó có thể được cải thiện để phục vụ cho thả xuống mặc dù.

Tôi đã phải sử dụng <asp:Repeater>. Như thế này:

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

Vui vì cuối cùng tôi đã có được một thứ phù hợp. Phần tốt nhất là bạn không cần phải thay đổi CSS để phục vụ cho nó.

Answer 2

Tôi đã sử dụng Bootstrap 3.x cùng với trình đơn ASP trong một thời gian dài, hoạt động tốt. Chỉ cần cập nhật lên Bootstrap 4.x và cần cập nhật menu, các bước sau sẽ hoạt động với tôi:

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