布局

Blazor 布局 ASP.NET Core

作者： Rainer Stropek和Luke Latham

某些应用元素（例如菜单、版权消息和公司徽标）通常是应用整体布局的一部分，并由应用中的每个组件使用。 将这些元素的代码复制到应用程序的所有组件中不是一种有效的方法—每次元素需要更新时，必须更新每个组件。 此类复制很难维护，并且可能会在一段时间后导致内容不一致。 布局解决了此问题。

从技术上讲，布局只是另一个组件。 布局在 Razor 模板或代码中C#定义，可以使用数据绑定、依赖关系注入和其他组件方案。

若要将组件转换为布局，请执行以下操作：

  • 继承自 LayoutComponentBase，该属性定义布局内呈现内容的 Body 属性。
  • 使用 Razor 语法 @Body 来指定布局标记中呈现内容的位置。

下面的代码示例显示了布局组件MainLayout的 Razor 模板。 布局会继承 LayoutComponentBase，并在导航栏和页脚之间设置 @Body：

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who&trade; Episode Database</h1>
</header>

<nav>
    <a href="masterlist">Master Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

在基于一个 Blazor 应用程序模板的应用程序中，MainLayout 组件（MainLayout）位于应用程序的共享文件夹中。

默认布局

在应用的app.config文件中的 Router 组件中指定默认的应用布局。 以下 Router 组件由默认 Blazor 模板提供，用于将默认布局设置为 MainLayout 组件：

<Router AppAssembly="typeof(Startup).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

若要为 NotFound 内容提供默认布局，请为 NotFound 内容指定 LayoutView：

<Router AppAssembly="typeof(Startup).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

有关 Router 组件的详细信息，请参阅 ASP.NET Core Blazor 路由。

在路由器中将布局指定为默认布局是一项有用的做法，因为它可以基于每个组件或每个文件夹进行重写。 首选使用路由器设置应用的默认布局，因为这是最常见的方法。

在组件中指定布局

使用 Razor 指令 @layout 将布局应用于组件。 编译器将 @layout 转换为 LayoutAttribute，它将应用于组件类。

以下 MasterList 组件的内容会插入到 MasterLayout 中 @Body的位置：

@layout MasterLayout
@page "/masterlist"

<h1>Master Episode List</h1>

直接在组件中指定布局会重写从 _Imports导入的路由器或 @layout 指令中设置的默认布局。

集中式布局选择

应用的每个文件夹可以选择性地包含名为 _Imports的模板文件。 编译器将导入文件中指定的指令包含在同一文件夹中的所有 Razor 模板中，并以递归方式包含在其所有子文件夹中。 因此，包含 @layout MyCoolLayout 的 _Imports razor文件可确保文件夹中的所有组件都使用 MyCoolLayout。 无需将 @layout MyCoolLayout 重复添加到文件夹和子文件夹中的所有razor文件中。 @using 指令也以相同的方式应用于组件。

以下 _Imports文件导入：

  • MyCoolLayout 列中的一个值匹配。
  • 同一文件夹和所有子文件夹中的所有 Razor 组件。
  • BlazorApp1.Data 命名空间。
@layout MyCoolLayout
@using Microsoft.AspNetCore.Components
@using BlazorApp1.Data

_Imports razor文件类似于razor 视图和页面的 _ViewImports cshtml 文件，但专门应用于 razor 组件文件。

在 _Imports中指定布局会重写指定为路由器默认布局的布局。

嵌套布局

应用可由嵌套布局组成。 组件可以引用另一个布局。 例如，使用嵌套布局创建多层菜单结构。

下面的示例演示如何使用嵌套的布局。 EpisodesComponent文件是要显示的组件。 组件引用 MasterListLayout：

@layout MasterListLayout
@page "/masterlist/episodes"

<h1>Episodes</h1>

MasterListLayout文件提供 MasterListLayout。 布局引用在呈现时 MasterLayout的另一个布局。 EpisodesComponent 呈现 @Body 出现的位置：

@layout MasterLayout
@inherits LayoutComponentBase

<nav>
    <!-- Menu structure of master list -->
    ...
</nav>

@Body

最后， MasterLayout中的 MasterLayout 包含顶级布局元素，如标头、主菜单和脚注。 在显示 @Body 的情况下，将呈现与 EpisodesComponent MasterListLayout：

@inherits LayoutComponentBase

<header>...</header>
<nav>...</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

使用集成组件共享 Razor Pages 布局

当可路由组件集成到 Razor Pages 的应用时，应用的共享布局可用于组件。 有关详细信息，请参阅 将 ASP.NET Core Razor 组件集成到 Razor Pages 和 MVC 应用。

其他资源

目录
布局