Sdílet prostřednictvím

oddíly ASP.NET Core Blazor

  • Článek

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete v tomto článku ve verzi .NET 9.

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

Blazor sekce

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: