ASP.NET Secções principais Blazor

Este artigo explica como controlar o conteúdo em um Razor componente de um componente filho Razor .

Blazor secções

Para controlar o conteúdo de um Razor componente a partir de um componente filho Razor , Blazor suporta seções usando os seguintes componentes internos:

• SectionOutlet: Renderiza o conteúdo fornecido por SectionContent componentes com correspondência SectionName ou SectionId argumentos. Dois ou mais SectionOutlet componentes não podem ter o mesmo SectionName ou SectionId.

• SectionContent: Fornece conteúdo como um RenderFragment para SectionOutlet componentes com uma correspondência SectionName ou SectionId. Se vários SectionContent componentes tiverem o mesmo SectionName ou SectionId, o componente correspondente SectionOutlet renderizará o conteúdo da última renderização SectionContent.

As seções podem ser usadas em layouts e entre componentes pai-filho aninhados.

Embora o argumento passado para SectionName possa usar qualquer tipo de invólucro, a documentação adota invólucro de kebab (por exemplo, top-bar), que é uma opção de invólucro comum para IDs de elementos HTML. SectionId recebe um campo estático object e sempre recomendamos a caixa Pascal para nomes de campo C# (por exemplo, TopbarSection).

No exemplo a seguir, o componente principal de layout do aplicativo implementa um botão para incrementar o contador do componente Counter do aplicativo.

Se o namespace das seções não estiver no _Imports.razor arquivo, adicione-o:

@using Microsoft.AspNetCore.Components.Sections

MainLayout No componente (MainLayout.razor), coloque um SectionOutlet componente e passe uma cadeia de caracteres para o SectionName parâmetro para indicar o nome da seção. O exemplo a seguir usa o nome top-barda seção :

<SectionOutlet SectionName="top-bar" />

Counter No componente (Counter.razor), crie um SectionContent componente e passe a cadeia de caracteres correspondente (top-bar) para seu SectionName parâmetro:

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

Quando o componente Counter é acedido em /counter, o componente MainLayout renderiza o botão de incremento da contagem do componente Counter, onde o componente SectionOutlet é colocado. Quando qualquer outro componente é acessado, o botão de contagem de incrementos não é renderizado.

Em vez de usar uma seção nomeada, pode passar um elemento estático object com o parâmetro SectionId para identificar a seção. O exemplo a seguir também implementa um botão de incremento de contador para o componente Counter no layout principal do aplicativo.

Se você não quiser que outros SectionContent componentes correspondam acidentalmente ao nome de um SectionOutlet, passe um parâmetro de objeto SectionId para identificar a seção. Isso pode ser útil ao projetar uma biblioteca deRazor classes (RCL). Quando um SectionOutlet na RCL utiliza uma referência de objeto com SectionId e o consumidor coloca um componente SectionContent com um objeto correspondente SectionId, uma correspondência acidental pelo nome não é possível quando os consumidores da RCL implementam outros componentes SectionContent.

O exemplo a seguir também implementa um botão contador de incrementos para o componente do Counter aplicativo no layout principal do aplicativo, usando uma referência de objeto em vez de um nome de seção.

Adicione uma TopbarSection estática object ao MainLayout componente num @code bloco:

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

Na marcação do componente MainLayout, coloque o componente Razor e passe SectionOutlet para o parâmetro TopbarSection para indicar a seção.

<SectionOutlet SectionId="TopbarSection" />

Adicione um SectionContent componente ao componente do Counter aplicativo que renderiza um botão de contagem de incrementos. Use a MainLayout seção estática TopbarSection do object componente como o SectionId (MainLayout.TopbarSection).

Em Counter.razor:

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

Quando o componente Counter é acessado, o componente MainLayout renderiza o botão de incremento de contagem no local onde o componente SectionOutlet é colocado.

RenderFragment Regras de cache e comportamento de renderização de seção

Quando o conteúdo de um SectionContent's RenderFragment muda, que é uma instância diferente do componente onde ele é renderizado, Blazor destrói completamente e recria a seção em vez de tentar atualizar o conteúdo da seção. Ao contrário da renderização normal, o conteúdo da seção pode vir de instâncias diferentes, e não faz sentido tentar processar conteúdo de dois componentes separados, o que pode levar a resultados inesperados. Para obter uma explicação detalhada sobre esse comportamento, consulte Inicialização de componente inconsistente com Blazor SectionOutlet/SectionContent e CascadingValue (dotnet/aspnetcore #58316).

Interação da seção com outros Blazor recursos

Uma secção interage com outras Blazor funcionalidades das seguintes maneiras:

• Os valores em cascata fluem para o conteúdo da seção a partir do local onde o conteúdo é definido pelo componente.
• As exceções não tratadas são tratadas por limites de erro definidos em torno de um SectionContent componente.
• Um componente Razor configurado para renderização de streaming também configura o conteúdo da seção, que é fornecido por um componente SectionContent, para utilizar a renderização de streaming.
• Uma seção que contém componentes interativos é renderizada estaticamente (não funcional) em um componente de layout em um Blazor Web App que adota renderização por página/componente. Para obter mais informações, consulte os layouts do ASP.NET Core Blazor.