Secciones Blazor de ASP.NET Core

Este artículo explica cómo controlar el contenido de un componente Razor de un componente secundario Razor.

Secciones Blazor

Para controlar el contenido de un componente Razor desde un componente secundario Razor, Blazor admite secciones con los siguientes componentes integrados:

• SectionOutlet: representa el contenido proporcionado por los componentes SectionContent con argumentos coincidentes SectionName o SectionId. Dos o más componentes SectionOutlet no pueden tener el mismo SectionName o SectionId.

• SectionContent: proporciona contenido como RenderFragment para los componentes SectionOutlet con un SectionName o SectionId coincidente. Si varios componentes SectionContent tienen el mismo SectionName o SectionId, el componente coincidente SectionOutlet representa el contenido del último SectionContent representado.

Las secciones se pueden usar tanto en diseños como en componentes primarios-secundarios anidados.

Aunque el argumento pasado a SectionName puede usar cualquier tipo de formato en cuanto a mayúsculas y minúsculas, la documentación adopta el formato kebab (por ejemplo, top-bar), que es una opción común de mayúsculas y minúsculas para los identificadores de elemento HTML. SectionId recibe un campo object estático, y siempre recomendamos usar mayúsculas y minúsculas Pascal para los nombres de campo de C# (por ejemplo, TopbarSection).

En el ejemplo siguiente, el componente de diseño principal de la aplicación implementa un botón de contador de incremento para el componente Counter de la aplicación.

Si el espacio de nombres de las secciones no está en el archivo _Imports.razor, agréguelo:

@using Microsoft.AspNetCore.Components.Sections

En el componente MainLayout (MainLayout.razor), coloque un componente SectionOutlet y pase una cadena al parámetro SectionName para indicar el nombre de la sección. En el ejemplo siguiente se usa el nombre de sección top-bar:

<SectionOutlet SectionName="top-bar" />

En el componente Counter (Counter.razor), cree un componente SectionContent y pase la cadena coincidente (top-bar) a su parámetro SectionName:

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

Cuando se accede al componente Counter en /counter, el componente MainLayout representa el botón de recuento de incrementos del componente Counter donde se coloca el componente SectionOutlet. Cuando se accede a cualquier otro componente, el botón de recuento de incrementos no se representa.

En lugar de usar una sección con nombre, puede pasar un object estático con el parámetro SectionId para identificar la sección. En el ejemplo siguiente también se implementa un botón de contador de incremento para el componente Counter de la aplicación en el diseño principal de la aplicación.

Si no desea que otros componentes SectionContent coincidan accidentalmente con el nombre de SectionOutlet, pase un parámetro de objeto SectionId para identificar la sección. Esto puede ser útil al diseñar una biblioteca de clases Razor (RCL). Cuando un SectionOutlet en la RCL usa una referencia de objeto con SectionId y el consumidor coloca un componente SectionContent con un objeto SectionId coincidente, no es posible una coincidencia accidental por nombre cuando los consumidores de la RCL implementan otros componentes SectionContent.

En el ejemplo siguiente también se implementa un botón de contador de incremento para el componente Counter de la aplicación en el diseño principal de la aplicación, mediante una referencia de objeto en lugar de un nombre de sección.

Agregue un elemento object estático de tipo TopbarSection al componente MainLayout en un bloque @code:

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

En el marcado Razor del componente MainLayout, coloque un componente SectionOutlet y pase TopbarSection al parámetro SectionId para indicar la sección:

<SectionOutlet SectionId="TopbarSection" />

Agregue un componente SectionContent al componente Counter de la aplicación que representa un botón de recuento de incremento. Use el elemento object estático de la sección TopbarSection del componente MainLayout como SectionId (MainLayout.TopbarSection).

En Counter.razor:

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

Cuando se accede al componente Counter, el componente MainLayout representa el botón de recuento de incrementos del componente donde se coloca el componente SectionOutlet.

Nota:

Los componentes SectionOutlet y SectionContent solo pueden establecer SectionId o SectionName, no ambos.

Interacción de secciones con otras características de Blazor

Una sección interactúa con otras características de Blazor de las siguientes maneras:

• Los valores en cascada fluyen al contenido de sección desde donde el componente SectionContent define el contenido.
• Las excepciones no controladas se controlan mediante límites de error definidos en torno a un componente SectionContent.
• Un componente Razor configurado para la representación de streaming también configura el contenido de sección proporcionado por un componente SectionContent para usar la representación de streaming.