I'm trying to implement a dropdown menu inside the navigation bar which should show up on user click and disappear on clicking anywhere outside on the ecommerce app I'm making, but the dropdown function is not working as intended.
_layout.cshtml
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-controller="Movies" asp-action="Index">eMovies</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i> Movies</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="badge-info bi-gear"></i> Management
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"><i class="bi bi-camera-reels"></i> Cinemas</a>
<a class="dropdown-item" asp-controller="Producers" asp-action="Index"><i class="bi bi-headset"></i> Producers</a>
<a class="dropdown-item" asp-controller="Actors" asp-action="Index"><i class="bi bi-person-square"></i> Actors</a>
</div>
</li>
</ul>
<!-- etc -->
</div>
</div>
</nav>
</header>
Here's my github repository for the project for reference, to get to code above go from eMovies/Views/Shared/_layout.cshtml
https://github.com/johnvillasenor/ecommerce-aspnet-mvc-app
Help is much appreciated :)
Have to reference bootsrap correctly and make sure you're using the latest version of bootsrap css and js.
Latest compiled CSS and javascript(boostrap 5.2 should work as well):
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
Related
I have used Bootstrap 4.6 successfully and wanted to move to Bootstrap 5. I am trying and testing very basic functionality, keeping packages managed through NuGet.
The problem I am experiencing is that I do not get intellisense for some of the BS 5 collapse attributes. However, if I copy directly from the Bootstrap examples it seems to work as expected. It's almost like I'm missing a file reference of something, but nothing that breaks the functionality - only the intellisense.
For simplicity and testing, this is what I have done:
Create ASP.NET MVC 5 project in Visual Studio 2019 (framework 4.7.2)
Used NuGet package manager to update Bootstrap, jQuery to latest versions. BS=5.1.3, jq=3.6.0
Modified BundleConfig.cs accordingly:
//bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"))
bundles.Add(new Bundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"))
Replaced the relevant part of the <body> section from _Layout.cshtml (from default) to the following (copied from https://getbootstrap.com/docs/5.1/components/navbar/):
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</div>
Ran the project. The navbar seems to work just as the example from bootstrap. However, note the 6th line containing data-bs-toggle="collapse" and data-bs-target="#navbarSupportedContent". If I re-create the code manually, intellisense does not recognize data-bs-toggle or data-bs-toggle or data-bs.
What am I missing?
In Visual Studio, I create a new ASP.Net Core Web App
then I add a dropdown menu (as per Bootstrap documentation)
https://getbootstrap.com/docs/5.1/components/navbar/
the header porton of the html code looks like this:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">WebApplication1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
but the dropdown doesn't work. When I click it, no dropdown appears:
https://i.stack.imgur.com/szrE4.png
Be sure your Bootstrap version is v5.1, you can add the following css and js file to your project _Layout.cshtml:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
For Bootstrap v4.x, you need change your code to:
<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>
In Bootstrap 5.1, for dropdown,
✅ data-bs-toggle="dropdown"
❌data-toggle="dropdown"
In Bootstrap 4.0, for dropdown,
✅ data-toggle="dropdown"
❌data-bs-toggle="dropdown"
I have a Razor Pages app with the following markup in my _Layout.cshtml file.
<li class="nav-item dropdown">
<a class="nav-link text-dark dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reports
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-area="Reports" asp-page="/Invoice/Index">Invoices</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" asp-area="Reports" asp-page="/ProfitabilityByCustomer/Index">Profitability by Customer</a>
<a class="dropdown-item" asp-area="Reports" asp-page="/ProfitabilityByLocation/Index">Profitability by Location</a>
<a class="dropdown-item" asp-area="Reports" asp-page="/CostAudit/Index">Cost Audit</a>
<a class="dropdown-item" asp-area="Reports" asp-page="/ChangeLogs/Index">Change Logs</a>
</div>
</li>
Notice the last link (to /ChangeLogs/Index). This page has a page route (#page "{id?}").
When I manually navigate to /Reports/ChangeLogs/61, the markup above renders as:
<li class="nav-item dropdown">
<a class="nav-link text-dark dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reports
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/Reports/Invoice">Invoices</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/Reports/ProfitabilityByCustomer">Profitability by Customer</a>
<a class="dropdown-item" href="/Reports/ProfitabilityByLocation">Profitability by Location</a>
<a class="dropdown-item" href="/Reports/CostAudit">Cost Audit</a>
<a class="dropdown-item" href="/Reports/ChangeLogs/61">Change Logs</a>
</div>
</li>
Somehow, the fact that the current page is /Reports/ChangeLogs/61, is causing the link in the menu to render with this route value!
I can't explain this. And I need to stop it from happening.
Routes will inherit values from the current page if they have not been specified.
So specify a blank value;
<a class="dropdown-item" asp-area="Reports" asp-page="/ChangeLogs/Index" asp-route-id="">Change Logs</a>
Inside of my Views/Shared/_Layout.cshtml, the following navbar is in the <body>:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Client" asp-action="ClientList">Client List</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Import">Import</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Processing">Processing</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="PostProcessing">Post Processing</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
As you can see I have 4 views: ClientList, Import, Processing and PostProcessing. Inside each of those views I have buttons to navigate to the next or previous view (it's a sequential process for the most part) and as such the controller actions take in the Client's ID.
When I'm in, say, the PostProcessing view and attempt to view the Import view by clicking the navbar item, I get an exception because no ID is passed.
As a fallback I was considering just taking the top navbar out of the layout and making it a Partial View or View Component and rendering that on every page but as that seems counter-intuitive while having a layout, I'm wondering if there's a way to be able to just use my existing _Layout and also use the ID of the current view to be sent when I click the link.
You will have to explicitly pass the id parameter to your anchor tag may be using ViewBag or TempData.
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Import" asp-route-id="#ViewBag.Id">Import</a>
More on ViewBag and TempData.
Your _NavbarPartial view should be as follows where each action link tag helper contain a asp-route-id="#Model" attribute.
#model int // <-- Must contain this
<a class="navbar-brand" asp-area="" asp-controller="Client" asp-action="ClientList" asp-route-id="#Model">Client List</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Import" asp-route-id="#Model">Import</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Processing" asp-route-id="#Model">Processing</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="PostProcessing" asp-route-id="#Model">Post Processing</a>
</li>
</ul>
</div>
Then in the _Layout should be as follows:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<partial name="_NavbarPartial" model="1" /> // <-- Pass your id value as model
</div>
</nav>
</header>
I'm using bootstrap for toogle down menu bar. The code is:
<div class="row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
but it is not working properly. I'm facing the issue that whatever I'm displaying in these fields:
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"></a></li>
It is not visible.
The items for the displaying are visible when I paste your code in my project. I think the problem is on your js. Try to add all the js for proper working of dropdown list.