1

I am new to MVC. I have been trying to resolve the issue now for 2 days non-stop (yes 48 hours) on my own before reaching out for help. But for some reason I cannot get the scripts for my bootstrap project to work. I have tried everything I can possibly try so any help is appreciated. I am using Bootstrap v4.60 and have jqueryv3.6 in my VS2019 project.

My Partial Bundle

   bundles.Add(new Bundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));
    bundles.Add(new Bundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.bundle.js"));  /*This comes bundled with popper */

My Partial Layout

    <head>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
    </head>


    <div class="container">
        @RenderBody()
    </div>
.
.
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/popper")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

The dropdown in my navbar does not work and I am quite certain I've done everything I have been told to do

Navbar dropdown toggle

        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </li>

What am I missing?

Rayman Bacchus
  • 15
  • 3
  • Why did you type `data-bs-toggle` instead of `data-toggle` ? – Andy Ray May 13 '21 at 18:35
  • 2
    You should be looking at your rendered HTML and see if it's missing or has the incorrect script tags. "Doesn't work" is not descriptive enough for others to be able to help. JS errors? Network errors loading JS? – Ruan Mendes May 13 '21 at 18:35
  • You're including both jQuery and Bootstrap twice. You need to remove the Scripts.Render from your ``. – Tieson T. May 13 '21 at 19:04
  • @Juan - I don't think the JS are loading. I have updated the class to data-toggle and removed the script rendering from head and basically the dropdown just do just show the other items or it does not drop down. – Rayman Bacchus May 13 '21 at 19:24
  • It works now. It looked like it was data-bs-toggle as Andy said. I just copied the original script from the bootswatch pages and they use data-bs-toggle. – Rayman Bacchus May 13 '21 at 19:45

0 Answers0