разделы ASP.NET Core Blazor

В этой статье объясняется, как управлять содержимым компонента из Razor дочернего Razor компонента.

Blazor Разделы

Чтобы управлять содержимым компонента из Razor дочернего Razor компонента, Blazor поддерживает разделы с помощью следующих встроенных компонентов:

• SectionOutlet: отрисовывает содержимое, предоставляемое SectionContent компонентами с сопоставлением SectionName или SectionId аргументами. Два или более SectionOutlet компонентов не могут иметь одинаковые SectionName или SectionIdболее.

• SectionContent: предоставляет содержимое в качестве RenderFragmentSectionOutlet компонентов с соответствующим SectionName или SectionId. Если несколько SectionContent компонентов имеют одинаковый SectionName или SectionIdсоответствующий SectionOutlet компонент отрисовывает содержимое последнего отрисовки SectionContent.

Разделы можно использовать как в макетах, так и в вложенных дочерних компонентах.

Несмотря на то что аргумент, переданный для SectionName использования любого типа регистра, документация принимает регистр кебаб (например, top-bar), что является общим вариантом регистра для идентификаторов ЭЛЕМЕНТОВ HTML. SectionId получает статическое object поле, и мы всегда рекомендуем регистр Pascal для имен полей C# (например, 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 При доступе MainLayout/counterк компоненту компонент отображает кнопку счетчика добавок из Counter компонента, на котором SectionOutlet размещается компонент. При доступе к любому другому компоненту кнопка добавочного числа не отображается.

Вместо использования именованного раздела можно передать статический object параметр для SectionId идентификации раздела. В следующем примере также реализована кнопка счетчика добавок для компонента приложения Counter в основном макете приложения.

Если вы не хотите, чтобы другие SectionContent компоненты случайно соответствовали имени SectionOutletобъекта, передайте параметр объекта SectionId для идентификации раздела. Это может быть полезно при проектировании Razor библиотеки классов (RCL). SectionOutlet Если в RCL используется ссылка на объект и SectionId потребитель помещает SectionContent компонент с соответствующим SectionId объектом, случайное совпадение по имени невозможно, если потребители RCL реализуют другие SectionContent компоненты.

В следующем примере также реализована кнопка счетчика добавок для компонента приложения Counter в главном макете приложения, используя ссылку на объект вместо имени раздела.

Добавьте статический TopbarSectionobject компонент MainLayout в @code блок:

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

В разметке MainLayout компонента Razor поместите SectionOutlet компонент и передайте TopbarSection параметру SectionId , чтобы указать раздел:

<SectionOutlet SectionId="TopbarSection" />

SectionContent Добавьте компонент в компонент приложенияCounter, который отрисовывает кнопку счетчика добавок. Используйте статический MainLayoutobject раздел компонента TopbarSection в качестве 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 функциями следующими способами:

• Каскадные значения будут передаваться в содержимое раздела, из которого содержимое определяется компонентом SectionContent .
• Необработанные исключения обрабатываются границами ошибок, определенными вокруг SectionContent компонента.
• Компонент Razor , настроенный для потоковой отрисовки , также настраивает содержимое раздела, предоставленное компонентом SectionContent для использования потоковой отрисовки.