разделы 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 При доступе /counterMainLayoutк компоненту компонент отображает кнопку счетчика добавок из 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, который отрисовывает кнопку счетчика добавок. Используйте статический MainLayoutTopbarSection раздел компонента object в качестве SectionId (MainLayout.TopbarSection).

В Counter.razor:

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

Counter При доступе MainLayout к компоненту компонент отображает кнопку счетчика добавок, в которой SectionOutlet размещается компонент.

RenderFragment правила кэширования и поведение визуализации разделов

SectionContent RenderFragment При изменении содержимого, который отличается от экземпляра, отличного от компонента, в котором он отрисовывается, Blazor полностью уничтожает и повторно создает раздел, а не пытается обновить содержимое раздела. В отличие от обычной отрисовки содержимое раздела может поступать из разных экземпляров, и не имеет смысла пытаться обрабатывать содержимое из двух отдельных компонентов, что может привести к непредвиденным результатам. Подробное описание этого поведения см. в разделе Blazor.

Взаимодействие раздела с другими Blazor функциями

Раздел взаимодействует с другими Blazor функциями следующими способами:

• Каскадные значения будут передаваться в содержимое раздела, из которого содержимое определяется компонентом SectionContent .
• Необработанные исключения обрабатываются границами ошибок, определенными вокруг SectionContent компонента.
• Компонент Razor , настроенный для потоковой отрисовки , также настраивает содержимое раздела, предоставленное компонентом SectionContent для использования потоковой отрисовки.
• Секция, содержащая интерактивные компоненты, отображается статически (без функциональности) в компоненте макета Blazor Web App, который принимает отрисовку каждой страницы/компонента. Для получения дополнительной информации см. макеты ASP.NET CoreBlazor.