0

I'm trying to learn Bootstrap 4 Navbar and getting it to work with a ASP.NET Webform using framework 4.7.2 (Visual Studio 2013). I copied code from Bootstraps own website and place it in the master Page. In the < HEAD > I have:

        <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link type="text/css" rel="stylesheet" href="../../CSS/bootstrap.min.css" />
    <script type="text/javascript" src="../../JavaScript/jquery-3.3.1.min.js" ></script>
    <script type="text/javascript" src="../../JavaScript/bootstrap.min.js" ></script>
    <script type="text/javascript" src="../../JavaScript/bootstrap.bundle.min.js" ></script>
    <script type="text/javascript" src="../../JavaScript/popper.min.js"></script>

and in the < BODY > I have:

<form id="form1" runat="server">

        <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <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">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
        </div>        

        <asp:ContentPlaceHolder ID="body_content" runat="server" ></asp:ContentPlaceHolder>
    </form>

The page renders fine as per the Bootstrap example but the dropdown doesn't do anything. Yet, if I create a .HTML page and paste the exact same code, it works fine. So i'm wondering why this code wouldn't work in a WebForm?

I'm using the later Bootstrap.JS (4.1.3), Latest jQuery (3.1.1) and the latest popper.js.

Thanks.

CreationSL
  • 55
  • 1
  • 11
  • what is expected for the dropdown response? – c0dem0nkey Mar 07 '19 at 03:03
  • Just for the dropdown to work. When I click on "Dropdown" or the down arrow next to it, it doesn't do anything. based on the code I should see a menu popup. – CreationSL Mar 07 '19 at 03:07
  • i think you have the same question as this https://stackoverflow.com/questions/17959419/bootswatch-dropdown-in-masterpage-not-working – c0dem0nkey Mar 07 '19 at 03:22
  • What does the file `bootstrap.bundle.min.js` contain? Does it already have bootstrap? Sometimes, when bootstrap is included twice, the dropdown opens and closes immediately, which can be detected in `developer tools` in browser. If this is the case, you will need to remove one bootstrap js file and it should work fine. – Rhythm Ruparelia Mar 07 '19 at 05:55
  • I noticed that one has to click the drop down main menu text twice to show the drop down in an aspx page. Is this the problem? – Sunil Mar 07 '19 at 05:59
  • @CreationSL, I have just posted an answer after trying out your scenario on my end. The code that I gave works as expected. – Sunil Mar 07 '19 at 06:08

1 Answers1

1

I found that the following worked i.e just by single click on the text Dropdown, the menu opens. Using your code, it opened but by clicking the text twice.

I used the following code to test this scenario. Note that bootstrap.bundle.min.js inlcudes popper.js as well as bootstrap.min.js, so there is no need to include these JavaScript files. This may be why its not working as expected.

You can take a look at following documentation for specifics about bootstrap.bundle.min.js: Bootstrap Bundle JavaScript Includes what

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>BootStrap Navbar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha256-fzFFyH01cBVPYzl16KT40wqjhgPtq6FFUB6ckN2+GGw=" crossorigin="anonymous"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <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">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </form>
</body>
</html>
Sunil
  • 20,653
  • 28
  • 112
  • 197