sekcje ASP.NET Core Blazor

W tym artykule wyjaśniono, jak kontrolować zawartość składnika Razor ze składnika podrzędnego Razor .

Blazor Sekcje

Aby kontrolować zawartość składnika Razor ze składnika podrzędnego Razor , Blazor obsługuje sekcje przy użyciu następujących wbudowanych składników:

• SectionOutlet: Renderuje zawartość dostarczaną przez SectionContent składniki z dopasowaniem SectionName lub SectionId argumentami. Co najmniej SectionOutlet dwa składniki nie mogą mieć tego samego SectionName lub SectionId.

• SectionContent: udostępnia zawartość jako RenderFragmentSectionOutlet składników z pasującym SectionName elementem lub SectionId. Jeśli kilka SectionContent składników ma ten sam SectionName składnik lub SectionId, zgodny SectionOutlet składnik renderuje zawartość ostatniego renderowanego SectionContentelementu .

Sekcje mogą być używane zarówno w układach, jak i w zagnieżdżonych składnikach nadrzędny-podrzędnych.

Mimo że przekazany argument SectionName może używać dowolnego typu obudowy, dokumentacja przyjmuje obudowy kebab (na przykład top-bar), co jest typowym wyborem wielkości liter dla identyfikatorów elementów HTML. SectionId otrzymuje pole statyczne object i zawsze zalecamy zastosowanie wielkości liter w języku Pascal dla nazw pól języka C# (na przykład TopbarSection).

W poniższym przykładzie główny składnik układu aplikacji implementuje przycisk licznika przyrostowego dla składnika aplikacji Counter .

Jeśli przestrzeń nazw sekcji nie znajduje się w _Imports.razor pliku, dodaj ją:

@using Microsoft.AspNetCore.Components.Sections

W składniku MainLayout (MainLayout.razor) umieść SectionOutlet składnik i przekaż ciąg do parametru SectionName , aby wskazać nazwę sekcji. W poniższym przykładzie użyto nazwy top-barsekcji :

<SectionOutlet SectionName="top-bar" />

W składniku Counter (Counter.razor) utwórz SectionContent składnik i przekaż pasujący ciąg (top-bar) do jego SectionName parametru:

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

Counter Gdy składnik jest dostępny w /counterlokalizacji , MainLayout składnik renderuje przycisk liczby przyrostów ze Counter składnika, w SectionOutlet którym znajduje się składnik. Po korzystaniu z innego składnika przycisk liczby przyrostów nie jest renderowany.

Zamiast używać nazwanej sekcji, możesz przekazać statyczny object parametr z parametrem SectionId , aby zidentyfikować sekcję. Poniższy przykład implementuje również przycisk licznika przyrostowego dla składnika aplikacji w układzie głównym aplikacji Counter .

Jeśli nie chcesz, aby inne SectionContent składniki przypadkowo odpowiadały SectionOutletnazwie obiektu , przekaż parametr obiektu SectionId , aby zidentyfikować sekcję. Może to być przydatne podczas projektowania Razor biblioteki klas (RCL). Jeśli obiekt SectionOutlet na liście RCL używa odwołania do obiektu i SectionId odbiorca umieszcza SectionContent składnik z pasującym SectionId obiektem, przypadkowe dopasowanie według nazwy nie jest możliwe, gdy odbiorcy listy RCL implementują inne SectionContent składniki.

Poniższy przykład implementuje również przycisk licznika przyrostowego dla składnika aplikacji w układzie głównym aplikacji Counter przy użyciu odwołania do obiektu zamiast nazwy sekcji.

Dodaj statyczny object element TopbarSection do MainLayout składnika w @code bloku:

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

MainLayout W adiustacji składnika Razor umieść SectionOutlet składnik i przekaż TopbarSection do parametru SectionId , aby wskazać sekcję:

<SectionOutlet SectionId="TopbarSection" />

SectionContent Dodaj składnik do składnika aplikacjiCounter, który renderuje przycisk liczby przyrostowej. MainLayout Użyj sekcji składnika statycznej TopbarSectionobject jako SectionId (MainLayout.TopbarSection).

W pliku Counter.razor:

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

Counter Po korzystaniu z składnika składnik renderuje przycisk liczby przyrostów, MainLayout w którym SectionOutlet znajduje się składnik.

Uwaga

SectionOutlet składniki i SectionContent mogą ustawiać tylko elementy SectionId lub SectionName, a nie oba.

Interakcja sekcji z innymi Blazor funkcjami

Sekcja współdziała z innymi Blazor funkcjami w następujący sposób:

• Kaskadowe wartości przepływają do zawartości sekcji, z której zawartość jest definiowana SectionContent przez składnik.
• Nieobsługiwane wyjątki są obsługiwane przez granice błędów zdefiniowane wokół SectionContent składnika.
• Składnik Razor skonfigurowany do renderowania przesyłania strumieniowego konfiguruje również zawartość sekcji dostarczaną SectionContent przez składnik do korzystania z renderowania przesyłania strumieniowego.