Blazor 布局 = 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 `请，我需要一种方法来掌握 Blazor 多层布局，但现在，我迫切需要知道如何 null 布局，以便我可以添加所有内容

<html>

to至

</html>

` `

myself on the @page directly.我自己直接在@page上。

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.在 MVC 中，我可以使 ViewModel 从 _layout ViewModel 继承，以便我可以在导航和侧导航中动态添加用户图像、名称、属性...，甚至隐藏一些导航选项。 like in the picture below.如下图所示。

Answer 1

Looks like you want to custom your MainLayout?看起来您想自定义 MainLayout？

You can just clear it, open MainLayout.razor (where the _Layout lies) and only add @Body in it:您可以清除它，打开MainLayout.razor （_Layout 所在的位置），然后只在其中添加 @Body ：

@inherits LayoutComponentBase

@Body

From your example, seems you just want to custom your NavMenu ?从您的示例中，您似乎只想自定义NavMenu ？

It's the same,open NavMenu.razor and just modify the navs.一样，打开NavMenu.razor ，修改navs即可。

And for extension, if you want to different types of Layout, you can use NavigationManager to而对于扩展，如果你想要不同类型的 Layout，你可以使用 NavigationManager 来

check the parameter in your url and it will use the related Layout, like:检查 url 中的参数，它将使用相关的布局，例如：

@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.因此，如果页面是@page "/CustomLayout1/counter"那么它将在此演示中使用您的 null MainLayout。

Answer 2

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基本文件（_Host.cshtml 用于 blazor 服务器端或 index.html 用于 WASM），需要尽可能为空，只有和

For _Host.cshtml, you probably need to do something like:对于 _Host.cshtml，您可能需要执行以下操作：

@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:对于 index.html，类似于：

You can read more here: https://docs.microsoft.com/en-us/aspnet/core/blazor/layouts?view=aspnetcore-5.0您可以在此处阅读更多信息： https://docs.microsoft.com/en-us/aspnet/core/blazor/layouts?view=aspnetcore-5.0

Blazor 布局 = null

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-05-21 03:33:02

解决方案2
1 2021-05-22 16:12:50

Blazor 布局 = null

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-05-21 03:33:02

解决方案2 1 2021-05-22 16:12:50

解决方案1
1 已采纳 2021-05-21 03:33:02

解决方案2
1 2021-05-22 16:12:50