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/[email protected]/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
