通过

ASP.NET Core Blazor 部分

  • 项目

本文说明了如何从 Razor 子组件控制 Razor 组件中的内容。

Blazor 部分

若要从 Razor 子组件控制 Razor 组件中的内容，Blazor 支持使用以下内置组件的各个部分：

可以在布局和嵌套父子组件中使用各部分。

尽管传递给 SectionName 的参数可以使用任何类型的大小写，但该文档采用 kebab 大小写（例如 top-bar），这是 HTML 元素 ID 的常见大小写选择。 SectionId 接收静态 object 字段，我们建议始终对 C# 字段名称使用 Pascal 大小写（例如 TopbarSection）。

在以下示例中，应用的主布局组件为应用的 Counter 组件实现增量计数器按钮。

如果节的命名空间不在 _Imports.razor 文件中，请添加它：

@using Microsoft.AspNetCore.Components.Sections

在 MainLayout 组件 (MainLayout.razor) 中，放置 SectionOutlet 组件并将字符串传递给 SectionName 参数以指示部分的名称。 以下示例使用部分名称 top-bar：

<SectionOutlet SectionName="top-bar" />

在 Counter 组件 (Counter.razor) 中创建一个 SectionContent 组件，并将匹配的字符串 (top-bar) 传递给其 SectionName 参数：

<SectionContent SectionName="top-bar">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

当在 /counter 处访问 Counter 组件时，MainLayout 组件呈现 SectionOutlet 组件所在的 Counter 组件中的增量计数按钮。 在访问任何其他组件时，不会呈现增量计数按钮。

可以使用 SectionId 参数传递静态 object 来标识部分，而不是使用已命名的部分。 以下示例还在应用的主布局中为应用的 Counter 组件实现增量计数器按钮。

如果不希望其他 SectionContent 组件意外匹配 SectionOutlet 的名称，请传递对象 SectionId 参数来标识部分。 在设计 Razor 类库 (RCL) 时，此做法非常有用。 如果 RCL 中的 SectionOutlet 将对象引用与 SectionId 一起使用，而使用者放置具有匹配的 SectionId 对象的 SectionContent 组件，则当 RCL 的使用者实现其他 SectionContent 组件时，无法按名称进行意外匹配。

以下示例还在应用的主布局中为应用的 Counter 组件实现增量计数器按钮，使用的是对象引用而不是部分名称。

将 TopbarSection 静态 object 添加到 @code 块中的 MainLayout 组件：

@code {
    internal static object TopbarSection = new();
}

在 MainLayout 组件的 Razor 标记中，放置 SectionOutlet 组件并将 TopbarSection 传递给 SectionId 参数，以指示部分：

<SectionOutlet SectionId="TopbarSection" />

将 SectionContent 组件添加到应用的 Counter 组件，该组件呈现增量计数按钮。 将 MainLayout 组件的 TopbarSection 部分静态 object 用作 SectionId (MainLayout.TopbarSection)。

在 Counter.razor中：

<SectionContent SectionId="MainLayout.TopbarSection">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

访问 Counter 组件时，MainLayout 组件将呈现 SectionOutlet 组件所在的增量计数按钮。

注意

SectionOutlet 和 SectionContent 组件只能设置 SectionId 或 SectionName，而不能同时设置两者。

与其他 Blazor 功能的分区交互

分区以下列方式与其他 Blazor 功能交互：