Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Blazor Layout = null

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

like image 950
Rikudou En Sof Avatar asked Sep 23 '26 09:09

Rikudou En Sof


1 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://learn.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.

like image 129
Jerry Cai Avatar answered Sep 26 '26 00:09

Jerry Cai