Dropdown menu of Bootstrap on Asp.net site works only on the main page, what to do to fix it?

Asked

Viewed 811 times

2

The menu dropdown apparently it works on the main page, but when I’m on another page and I’m going to use it it doesn’t work! I already checked if the HTML code is generating with jQuery and I saw nothing strange. What to do?

<body>
   <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
       <div class="container">
           <div class="navbar-header">

               <a class="navbar-brand" href="#">sis</a>
           </div>
           <div class="collapse navbar-collapse">
               <ul class="nav navbar-nav">

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cadastros<b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            <li><a href="PessoasFisica/frmConPessoaFisica.aspx">Consulta de Pessoa Fisica</a></li>
                </ul>
           </div>
        </div>
    </nav>   
    <script src="Scripts/jquery-2.1.4.js"></script>
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script>

</body>
asp.net twitter-bootstrap bootstrap-3

  • There are some errors in your code, some tags are missing, and the bootstrap.min.css. And you don’t have to put the bootstrap.js and the bootstrap.min.js (only the .min.js is enough, the same thing with jQuery). This menu is supposed to be three levels? Menu type>registration>physical person query (3 levels) or the menu appears next to it, and the physical person query is within Registration (2 levels)? Take a look at whether this is more or less what you need: http://jsfiddle.net/chirayu45/yxkut/16/

  • There is no level. As for bootstrap.min.css it is in the Masterpage header. The problem is that when I am for example in the Query form, Dropdownmenu does not work. The URL looks like this: http://localhost:1078/Personal#

  • I think the @dHEKU response will do the trick. Look at the example he posted on Bootply, and if that solves your problem, don’t forget to accept his answer (this is how we thank you here ;)).

  • My bootstrap only works on the first page, so it’s no use if I put my code on http://www.bootply.com/Y60uWy24UY, as it will only show the bootstrap working normally. My problem is in the ASP.NET URL that is not changing when I am on another page.

1 answer

2

You don’t need to put the jquery of activation of the dropdown unless you want to use some event in conjunction with the click or anything else - only with formatting can you get it to work. Also remove the js unnecessary external:

http://www.bootply.com/Y60uWy24UY

 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
       <div class="container">
           <div class="navbar-header">
            <a class="navbar-brand" href="#">sis</a>
           </div>
          <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Cadastro <span class="caret"></span></a>
          <ul class="dropdown-menu">
             <li><a href="PessoasFisica/frmConPessoaFisica.aspx">Consulta de Pessoa Fisica</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
           </div>
        </div>
    </nav> 
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>

  • My bootstrap only works on the first page, so it’s no use if I put my code on http://www.bootply.com/Y60uWy24UY, as it will only show the bootstrap working normally. My problem is in the ASP.NET URL that is not changing when I am on another page.

  • So it is a problem in the structure of your MVC, check if the jquery plugin of bootstrap is being loaded on all pages.

  • My project is Webforms, it might make a difference. I’ve used it in MVC and it worked perfectly.

Browser other questions tagged asp.net twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.