I create a nested layout in blazer.
blazor route to one of the navigation menus, and there is another menu in it.
When I click the navigation menu, it is routed to a specific page,
There is another menu on the routed page.
Clicking that menu loads the newly routed page in the nested layout.
However, clicking the topmost menu again loads the top route into the innermost layout.
Here is my code.
MainLayout.razor:
#inherits LayoutComponentBase
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
About
</div>
<div class="content px-4">
#Body
</div>
</div>
NavMenu.razor:
<li class="nav-item px-3">
<NavLink class="nav-link" href="sub">
<span class="oi oi-list-rich" aria-hidden="true"></span> Sub
</NavLink>
</li>
SubMenu.razor:
#page "/sub"
#layout MainLayout
#inherits LayoutComponentBase
<h3>SubLayout</h3>
<div style="width:20%">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="/sub/mypage" Match="NavLinkMatch.All">
<span class="oi oi-account-login" aria-hidden="true"></span> go to sub of sub
</NavLink>
</li>
</ul>
</div>
<div style="width: 40%; height:40%; border:solid red">
#Body
</div>
Mypage.razor:
#page "/sub/mypage"
#layout SubLayout
<div >
<h3>This is Mypage</h3>
</div>
This is the execution result:
Why is the page in the top navigation menu loaded into the sublayout?
Is there any way to prevent this?
Without seeing your SubLayout you are specifying in Mypage.razor I think the issue is that your trying to use a routable component as a layout. I basically just separated these.
SubMenu.razor
#page "/sub"
<SubLayout />
SubLayout.razor
Note the nesting by specifying #layout MainLayout
#layout MainLayout
#inherits LayoutComponentBase
<h3>SubLayout</h3>
<div style="width:20%">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="/sub/mypage" Match="NavLinkMatch.All">
<span class="oi oi-account-login" aria-hidden="true"></span> go to sub of sub
</NavLink>
</li>
</ul>
</div>
<div style="width: 40%; height:40%; border:solid red">
#Body
</div>
Docs are here
Related
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>
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"
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav **mr-auto**">
<li class="nav-item active">
<a class="nav-link" href="homepage.aspx">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Terms</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton4" runat="server">View Books</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton1" runat="server">User Login</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton2" runat="server">Sign Up</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton3" runat="server">Logout</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton7" runat="server">Hello user</asp:LinkButton>
</li>
</ul>
</div>
See the navigation there is some margin left between the logo and the buttons
I imported this code form bootstrap but the first is not totally aligning left but the second is rightly aligned to the right hand sidesee I have inspected this but it looks fine to me
According to the documentation of Flex of Bootstrap 4:
Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
To enable this behavior you need to add one of the below d-flex classes to the container element, which in your case is the root div element:
<div class="collapse navbar-collapse d-flex" id="navbarSupportedContent">
Valid options are:
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
I have a menu on my layoutpage (MVC) that is on the left side of the page. To the right I have a container that holds the bodypage.
When the sidemenu expands the body expands too. I want the menu to expand but not the body.
How can I rectify this?
<div id="divLeftMenu">
<ul class="nav nav-pills nav-stacked" id="stacked-menu">
<li>
<a class="nav-container" data-toggle="collapse" data-parent="#stacked-menu" href="#education"><i class="fa fa-graduation-cap"></i>Utbildning<div class="caret-container"><i class="fa fa-caret-down"></i></div></a>
<ul class="nav nav-pills nav-stacked collapse" id="education">
<li data-toggle="collapse" data-parent="#education" href="#education1">
<a class="nav-sub-container">Participants</a>
</li>
</ul>
</div>
<div class="container body-content" id=divBodyContent>
</div>
I want #divLeftMenu to expand but #divBodyContent should not expand.