Blazor 布局 = 空

Question

拜托，我需要一种方法来掌握 Blazor 多层布局，但现在，我迫切需要知道如何取消布局，以便我可以添加来自`

的所有内容

<html>

至

</html>

`

我自己直接在@page 上。

我为什么要这样做？

在 MVC 中，我可以使 ViewModel 继承自 _layout ViewModel，这样我就可以在导航和侧边导航中动态添加用户图像、名称、属性...，甚至可以隐藏一些导航选项。如下图所示。

Answer 1

您似乎想要自定义 MainLayout？

你可以清除它，打开MainLayout.razor（_Layout所在的位置）并且只在其中添加@Body :

@inherits LayoutComponentBase

@Body

从您的示例来看，您似乎只想自定义 NavMenu?

一样，打开NavMenu.razor修改navs即可

而对于扩展，如果你想要不同类型的布局，你可以使用 NavigationManager 来

检查 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>
 }

因此，如果页面是 @page "/CustomLayout1/counter" 那么它将在此演示中使用您的空 MainLayout。

Answer 2

我想你想要多个布局。

基本文件（_Host.cshtml 用于 blazor 服务器端或 index.html 用于 WASM），需要尽可能空，只有

对于 _Host.cshtml，您可能需要执行以下操作：

@page "/"
@namespace YOURNAMESPACE.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
<html>
     <component type="typeof(App)" render-mode="ServerPrerendered" />
</html>

对于 index.html，类似于：

您可以在这里阅读更多内容：https://docs.microsoft.com/en-us/aspnet/core/blazor/layouts?view=aspnetcore-5.0

Blazor 布局 = 空

Blazor Layout = null

c#

razor

asp.net-core

blazor