Blazor Layout = null

user_9337608 0
Viewed 1849

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.

An AdminLTE menu

blazor asp.net-core razor c#
2 Answers

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.

user_139260720

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

user_53055670
Related