时间戳

首页 > 解决方案 > Blazor 布局 = null

c# - Blazor 布局 = null

问题描述

拜托，我需要一种方法来掌握 Blazor 多层布局，但现在，我迫切需要知道如何使布局为空，以便我可以添加来自 ` 的所有内容

<html>

至

</html>

`

我自己直接在@page上。

我为什么要这样做？

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

AdminLTE 菜单

标签： c#asp.net-corerazorblazor

解决方案

看起来您想自定义 MainLayout？

您可以清除它，打开MainLayout.razor（ _Layout 所在的位置），然后只在其中添加 @Body：

@inherits LayoutComponentBase

@Body

从您的示例中，您似乎只想自定义NavMenu？

同理，打开NavMenu.razor修改导航即可。

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

检查您的网址中的参数，它将使用相关的布局，例如：

@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"Then 它将在此演示中使用您的 null MainLayout。

推荐阅读