Bootstrap Dropdowns not Working with ASP.NET MVC
I'm still new to web development, but I'm making my final school project using ASP.NET MVC (not Core).
I'm not sure if it's ASP.NET MVC 5 but it is likely that it is.
Main Issue
Whenever I add a dropdown element like this:
<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
When I press the dropdown button, nothing happens, the dropdown items don't show up...
I have tried adding the <script> links to the _Layout.cshtml manually but it doesn't work...
Here is the _Layout.cshtml file:
@using Microsoft.AspNet.Identity
@using Cooking_Service.Models
@using Cooking_Service.DAL
@{
var ctx = new ApplicationDbContext();
var ctxC = new CookingContext();
ApplicationUser user = ctx.Users.Find(User.Identity.GetUserId());
User userI = ctxC.Users.Find(User.Identity.GetUserId());
}
<!DOCTYPE html>
<html lang="pt-pt" data-bs-theme="dark">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Cooking</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-black" id="navbar">
<div class="container">
@Html.ActionLink("Cooking", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="Alternar a navegação" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li>@Html.ActionLink("Início", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>
@if (user != null)
{
<li>@Html.ActionLink("Receitas", "Index", "Recipes", new { area = "" }, new { @class = "nav-link" })</li>
}
else
{
<li title="Entre com a sua conta para aceder">
<a href="#" class="nav-link disabled">
Receitas
</a>
</li>
}
<li class="nav-link disabled txt-light-grey">•</li>
<li>@Html.ActionLink("Sobre", "About", "Home", new { area = "" }, new { @class = "nav-link" })</li>
<li>@Html.ActionLink("Contato", "Contact", "Home", new { area = "" }, new { @class = "nav-link" })</li>
<li>@Html.ActionLink("Ajuda", "Contact", "Home", new { area = "" }, new { @class = "nav-link" })</li>
@if (user != null)
{
if (userI.Type == TypeUser.Admin)
{
<!-- Little sperator icon to separate the admin button from the rest of the navbar -->
<li class="nav-link disabled">•</li>
<li>@Html.ActionLink("Administrate", "Index", "Admin", new { area = "" }, new { @class = "nav-link" })</li>
}
}
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</nav>
<contents>
<div class="container">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Cooking Service - ASP.NET</p>
</footer>
</div>
</contents>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
I tried to add the scripts and css links to the _Layout expecting the dropdowns to show up
I tried asking ChatGPT and Copilot what could be wrong, they don't know.
I tried to update the bootstrap NuGet package to a older version and still nothing.
I tried to add those links and scripts to the actual files where the dropdowns are but nothing seems to be working.
I checked this Question from someone else and tested it, but I couldn't get it to work.
Bootstrap Dropdown not Working with ASP.NET
EDIT
I checked the Inspect feature on Edge and when I press the dropdown button, this message appears:
dropdown.js:241
Uncaught TypeError: Popper__namespace.createPopper is not a function
at Dropdown._createPopper (dropdown.js:241:27)
at Dropdown.show (dropdown.js:139:10)
at Dropdown.toggle (dropdown.js:121:49)
at HTMLButtonElement.<anonymous> (dropdown.js:446:38)
at HTMLDocument.handler (event-handler.js:118:19)
_createPopper @ dropdown.js:241
show @ dropdown.js:139
toggle @ dropdown.js:121
(anonymous) @ dropdown.js:446
handler @ event-handler.js:118
I found a solution:
ASP.NET puts this on the bottom of the _Layout.cshtml by default:
@Scripts.Render("~/bundles/bootstrap")
Yet that doesn't work, so what I did was, I manually imported the bootstrap bundle like so:
<script src="~/Scripts/bootstrap.bundle.js"></script>
Discarding what it had by default I solved my issue. Here is a picture:
