Blazor 布局 = null

Question

請，我需要一種方法來掌握 Blazor 多層布局，但現在，我迫切需要知道如何 null 布局，以便我可以添加所有內容

<html>

至

</html>

`

我自己直接在@page上。

我為什么要這樣做？

在 MVC 中，我可以使 ViewModel 從 _layout ViewModel 繼承，以便我可以在導航和側導航中動態添加用戶圖像、名稱、屬性...，甚至隱藏一些導航選項。 如下圖所示。

Answer 1

看起來您想自定義 MainLayout？

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

@inherits LayoutComponentBase

@Body

從您的示例中，您似乎只想自定義NavMenu ？

一樣，打開NavMenu.razor ，修改navs即可。

而對於擴展，如果你想要不同類型的 Layout，你可以使用 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"那么它將在此演示中使用您的 null 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 布局 = 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