कैसे प्रदर्शित करने के लिए <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 है लेआउट: तो मैं निम्नलिखित साइटमैप कोड और अद्यतन मास्टर पृष्ठ है पूरी तरह टूटा हुआ नहीं डब्ल्यू। मैं यह मुश्किल कैसे सुलझाऊँ?

मैं साइटमैप के साथ मानक बूटस्ट्रैप 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" /> 

खुशी है कि अंततः कुछ ऐसा काम करता है जो काम करता है। सबसे अच्छा हिस्सा यह है कि आपको सीएसएस को इसके लिए पूरा करने की आवश्यकता नहीं है।

Answer 2

मैंने बूटस्ट्रैप 3.x का उपयोग लंबे समय से एएसपी मेनू के साथ किया है, ठीक काम करता है। बस 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>