Sdílet prostřednictvím

oddíly ASP.NET Core Blazor

  • Článek

Tento článek vysvětluje, jak řídit obsah komponenty Razor z podřízené Razor komponenty.

Blazor Oddíly

Pokud chcete řídit obsah komponenty Razor z podřízené Razor komponenty, Blazor podporuje oddíly pomocí následujících předdefinovaných komponent:

Oddíly lze použít v rozloženích i ve vnořených komponentách nadřazeného-podřízeného objektu.

I když argument předaný SectionName může používat jakýkoli typ pouzdra, dokumentace přijímá kebab casing (například top-bar), což je běžná volba pro ID elementů HTML. SectionId obdrží statické object pole a pro názvy polí jazyka C# vždy doporučujeme písmena Pascal (například TopbarSection).

V následujícím příkladu implementuje hlavní komponenta rozložení aplikace tlačítko čítače přírůstku pro komponentu Counter aplikace.

Pokud obor názvů pro oddíly není v _Imports.razor souboru, přidejte ho:

@using Microsoft.AspNetCore.Components.Sections

V komponentě MainLayout (MainLayout.razor), umístěte komponentu SectionOutlet a předejte do parametru SectionName řetězec, který označuje název oddílu. Následující příklad používá název top-baroddílu:

<SectionOutlet SectionName="top-bar" />

V komponentě Counter (Counter.razor), vytvořte komponentu SectionContent a předejte odpovídající řetězec (top-bar) jeho SectionName parametru:

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

Counter Při přístupu MainLayout /counterke komponentě vykreslí komponenta tlačítko pro zvýšení počtu z Counter komponenty, kde je komponenta SectionOutlet umístěna. Při přístupu k jakékoli jiné komponentě se tlačítko pro zvýšení počtu nevykreslí.

Místo použití pojmenovaného oddílu SectionId můžete předat statický object s parametrem k identifikaci oddílu. Následující příklad také implementuje tlačítko čítače přírůstku pro komponentu aplikace Counter v hlavním rozložení aplikace.

Pokud nechcete, aby se jiné SectionContent komponenty omylem shodovaly s názvem objektu SectionOutlet, předejte parametr objektu SectionId k identifikaci oddílu. To může být užitečné při návrhu Razor knihovny tříd (RCL). SectionOutlet Když v seznamu RCL použije odkaz na objekt s objektem SectionId a příjemce umístí komponentu SectionContent s odpovídajícím SectionId objektem, není náhodná shoda podle názvu možná, když příjemci seznamu RCL implementují další SectionContent komponenty.

Následující příklad také implementuje tlačítko čítače přírůstku pro komponentu aplikace v hlavním rozložení aplikace Counter pomocí odkazu na objekt místo názvu oddílu.

Přidejte statickou TopbarSection object komponentu MainLayout @code do bloku:

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

MainLayout V kódu komponenty Razor umístěte komponentu SectionOutlet a předejte TopbarSection parametruSectionId, který označuje oddíl:

<SectionOutlet SectionId="TopbarSection" />

Přidejte komponentu SectionContent do komponenty aplikace Counter , která vykreslí tlačítko pro zvýšení počtu. Jako (MainLayout.TopbarSection) použijte statickou SectionId object část komponentyTopbarSection.MainLayout

V Counter.razor:

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

Counter Při přístupu MainLayout ke komponentě se vykreslí tlačítko pro zvýšení počtu, ve kterém je komponenta SectionOutlet umístěná.

Poznámka:

SectionOutlet a SectionContent komponenty mohou nastavit pouze jednu SectionId nebo SectionName, nikoli obě.

Interakce oddílů s dalšími Blazor funkcemi

Oddíl komunikuje s dalšími Blazor funkcemi následujícími způsoby: