【解決方法】navbar 付きの Asp.net メニュー

親愛なる、私は asp.new メニューでブートストラップメニュースタイルを使用したいのですが、私の試みはすべてうまくいきません。

使いたいメニューは

HTML

<pre>   <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="Default.aspx">web name </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="aboutus.aspx">aboutus</a>
            </li>
           
            <li class="nav-item">
              <a class="nav-link" href="contact.html">contact</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Portfolio
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
                <a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Blog
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                <a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
                <a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
                <a class="dropdown-item" href="blog-post.html">Blog Post</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Other Pages
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                <a class="dropdown-item" href="full-width.html">Full Width Page</a>
                <a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
                <a class="dropdown-item" href="faq.html">FAQ</a>
                <a class="dropdown-item" href="404.html">404</a>
                <a class="dropdown-item" href="pricing.html">Pricing Table</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

私のASPメニューは

ASP.NET

<pre>  <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" />

<asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="List" DataSourceID="SiteMapDataSource2">
 </asp:Menu>

私が試したこと：

私がしようとしていること

ASP.NET

<pre>
                        <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" />


        <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="Default3.aspx">صندوق الزمالة </a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">

                    
                    <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="List" DataSourceID="SiteMapDataSource2"
                        IncludeStyleBlock="false" StaticMenuStyle-CssClass="" DynamicMenuStyle-CssClass="">

                        <StaticSelectedStyle CssClass="nav-item nav-link" />

                        <StaticHoverStyle CssClass="nav-item nav-link"  />
                 

                    </asp:Menu>
                      
                </div>
            </div>
        </nav>

解決策 1

やあ、

Matias Lopez が述べたように、Bootstrap 3.3.7 (js および css) と JQuery に必要なすべての参照があると仮定します。次のコード例が参考になるかもしれません。

これは 3 つの項目を持つメニューを示しており、最後の項目はサブメニューです。この特定のケースでは、LinkButtons が使用されましたが、目的が単純なナビゲーションである場合は、HTML を使用して、 href=”https://www.codeproject.com/Questions/1259568/…”. このような場合、リンクタグ ID も必要ない場合があります。

//Markup (content page .aspx)
<div id="MnuCliente" runat="server" class ="collapse navbar-collapse" >
	<ul class="nav navbar-nav">
        	<li><asp:LinkButton id="Mnu00" runat="server" Text="Datos Cliente" OnClick="Link_Click" /></li>
                <li><asp:LinkButton id="Mnu01" runat="server" Text="Operaciones" OnClick="Link_Click" /></li>
                <li class="dropdown-submenu">
                	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentosclass="caret"></a>
                        <ul class="dropdown-menu">
                            <li><asp:LinkButton id="Mnu02" runat="server" Text="Vigentes" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu03" runat="server" Text="Morosos" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu04" runat="server" Text="Cancelados" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu05" runat="server" Text="Prorrogados" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu06" runat="server" Text="Protestados" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu07" runat="server" Text="Excedentes" OnClick="Link_Click" /></li>   
                        </ul>
		</li>
	</ul>
</div>


//Rendered HTML (href="https://www.codeproject.com/Questions/1259568/..." have been removed for brevity)
<div id="MnuClient" class="collapse navbar-collapse">

	<ul class="nav navbar-nav">
                    
		<li><a id="Mnu00" href="...">Datos Cliente</a></li>

                <li><a id="Mnu01" href="...">Operaciones</a></li>
                    
		<li class="dropdown-submenu">
                        
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">Documents^__b class="caret"></a>

			<ul class="dropdown-menu">

				<li><a id="Mnu02" href="...">Vigentes</a></li>
				<li><a id="Mnu03" href="...">Morosos</a></li>
				<li><a id="Mnu04" href="...">Cancelados</a></li>
				<li><a id="Mnu05" href="...">Prorrogados</a></li>
				<li><a id="Mnu06" href="...">Protestados</a></li>
				<li><a id="Mnu07" href="...">Excedentes</a></li>
			</ul>

                </li>

	</ul>
</div>

乾杯！