Asp.net menu with navbar

Question

1.00/5 (1 vote)

See more:

Dear all, I want to use bootstrap menu style in asp.new menu but all my try not work.

the menu i want to use is

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>

and my asp menu is

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>

What I have tried:

that what i try

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>

Posted 10-Sep-18 1:32am

Member 13336451

Updated 20-Sep-18 11:10am

Add a Solution

Comments

ZurdoDev 10-Sep-18 8:05am

And what is the question?

Matias Lopez 10-Sep-18 9:39am

We assume that you include the .css and .js needed to include BootStrap, and your code is supported in this used version, no?

Member 13336451 11-Sep-18 7:20am

that all what i have,

Matias Lopez 11-Sep-18 13:20pm

Bootstrap | W3Schools
And the online call:


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Member 13336451 12-Sep-18 11:33am

still this didn't work with me

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

alexvw · Answer 1 · 2018-09-20T11:11:00

Hi there,

Assuming you do have all required references for Bootstrap 3.3.7 (js and css), as well as JQuery, just like Matias Lopez mentioned; the following code example may offer some help.

It depicts a menu with three items, where the last one is a sub-menu. For this particular case, LinkButtons were used, but if your intent is plain navigation, then you can use the HTML, and just complete the href="...". Link tags Ids may also be unnecessary in such case.

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

Cheers!