Blazor Layout = null
Question
Please, I need a way to master Blazor multi-layered layouts, but for now, I desperately need to know how to null layouts so that I can add everything from `
<html>
to
</html>
`
myself on the @page directly.
Why do I want to do this?
in MVC I can make the ViewModel inherit from the _layout ViewModel so that I can dynamically add user images, name, properties... in the navigation and side-nav, even hide some nav options. like in the picture below.
2 answers
solution1
1 ACCPTED 2021-05-21 03:33:02
Looks like you want to custom your MainLayout?
You can just clear it, open MainLayout.razor (where the _Layout lies) and only add @Body in it:
@inherits LayoutComponentBase
@Body
From your example, seems you just want to custom your NavMenu ?
It's the same,open NavMenu.razor and just modify the navs.
And for extension, if you want to different types of Layout, you can use NavigationManager to
check the parameter in your url and it will use the related Layout, like:
@inherits LayoutComponentBase
@inject NavigationManager _navManager
@if (_navManager.Uri.Contains("CustomLayout1"))
{
@Body
}
else
{
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>
}
So if the page is @page "/CustomLayout1/counter" Then it will use your null MainLayout in this demo.
solution2
1 2021-05-22 16:12:50
I think you want multiple layouts.
The base file (_Host.cshtml for blazor server side or index.html for WASM), needs to be as empty as possible to only have and
For _Host.cshtml, you probably need to do something like:
@page "/"
@namespace YOURNAMESPACE.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<html>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</html>
For index.html, something like:
You can read more here: https://docs.microsoft.com/en-us/aspnet/core/blazor/layouts?view=aspnetcore-5.0
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.