ASP.NET Çekirdek Blazor bölümleri

Bu makalede, bir Razor bileşendeki içeriğin alt Razor bileşenden nasıl denetlenecekleri açıklanmaktadır.

Blazor Bölüm

Bir Razor bileşendeki içeriği alt Razor bileşenden denetlemek için, Blazor aşağıdaki yerleşik bileşenleri kullanarak bölümleri destekler:

• SectionOutlet: Bileşenler tarafından SectionContent sağlanan içeriği eşleşen SectionName veya SectionId bağımsız değişkenlerle işler. İki veya daha fazla SectionOutlet bileşen aynı SectionName veya SectionIdöğesine sahip olamaz.

• SectionContent: veya ile eşleşen SectionIdSectionName bileşenlere SectionOutlet olarak RenderFragment içerik sağlar. Birden çok SectionContent bileşenin veya SectionIdaynı SectionName olması durumunda eşleşen SectionOutlet bileşen, işlenen son SectionContentöğesinin içeriğini işler.

Bölümler hem düzenlerde hem de iç içe üst-alt bileşenlerde kullanılabilir.

geçirilen SectionName bağımsız değişken herhangi bir büyük/küçük harf türünü kullanabildiğinden, belgelerde HTML öğesi kimlikleri için yaygın bir büyük/küçük harf seçimi olan kebap büyük/küçük harf kullanımı (örneğin, top-bar) benimsenmiştir. SectionId statik object bir alan alır ve C# alan adları için her zaman Pascal büyük/küçük harf kullanılması önerilir (örneğin, TopbarSection).

Aşağıdaki örnekte, uygulamanın ana düzen bileşeni, uygulamanın bileşeni için Counter bir artım sayacı düğmesi uygular.

Bölümlerin ad alanı dosyada _Imports.razor yoksa ekleyin:

@using Microsoft.AspNetCore.Components.Sections

() bileşenine MainLayoutMainLayout.razorbir SectionOutlet bileşen yerleştirin ve bölümün SectionName adını belirtmek için parametresine bir dize geçirin. Aşağıdaki örnekte bölüm adı top-barkullanılır:

<SectionOutlet SectionName="top-bar" />

() bileşeninde CounterCounter.razorbir SectionContent bileşen oluşturun ve eşleşen dizeyi (top-bar) parametresine SectionName geçirin:

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

bileşenine Counter adresinden MainLayout/countererişildiğinde bileşen, bileşenin yerleştirildiği SectionOutlet bileşenden Counter artım sayısı düğmesini işler. Başka bir bileşene erişildiğinde, artım sayısı düğmesi işlenmez.

Adlandırılmış bir bölüm kullanmak yerine, bölümü tanımlamak için parametresiyle SectionId bir statik object geçirebilirsiniz. Aşağıdaki örnek, uygulamanın ana düzeninde uygulamanın Counter bileşeni için bir artım sayacı düğmesi de uygular.

Diğer SectionContent bileşenlerin yanlışlıkla adıyla SectionOutleteşleşmesini istemiyorsanız, bölümü tanımlamak için bir nesne SectionId parametresi geçirin. Bu, bir Razor sınıf kitaplığı (RCL) tasarlarken yararlı olabilir. RCL'deki bir SectionOutlet ile nesne başvurusu SectionId kullandığında ve tüketici eşleşen SectionId bir nesneye sahip bir SectionContent bileşen yerleştirdiğinde, RCL tüketicileri diğer SectionContent bileşenleri uyguladığında ada göre yanlışlıkla eşleşme mümkün olmaz.

Aşağıdaki örnek, bölüm adı yerine nesne başvurusu kullanarak uygulamanın Counter ana düzeninde uygulamanın bileşeni için bir artım sayacı düğmesi de uygular.

TopbarSection Bir bloktaki @code bileşene MainLayout statik object ekleyin:

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

Bileşenin işaretlemesinde MainLayout bir SectionOutlet bileşen yerleştirin ve bölümünü belirtmek için SectionId parametresine geçinTopbarSection:Razor

<SectionOutlet SectionId="TopbarSection" />

SectionContent Uygulamanın Counter bileşenine artım sayısı düğmesini işleyen bir bileşen ekleyin. Bileşenin MainLayoutTopbarSection bölümünü statik object olarak SectionId kullanın (MainLayout.TopbarSection ).

Counter.razor içinde:

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

Bileşene Counter erişildiğinde bileşen, MainLayout bileşenin yerleştirildiği SectionOutlet artım sayısı düğmesini işler.

Not

SectionOutletve SectionContent bileşenleri yalnızca veya SectionNameayarlayabilir, ikisini birden ayarlayabilirSectionId.

Diğer Blazor özelliklerle bölüm etkileşimi

Bir bölüm aşağıdaki yollarla diğer Blazor özelliklerle etkileşim kurar:

• Basamaklı değerler , içeriğin bileşen tarafından tanımlandığı bölüm içeriğine SectionContent akar.
• İşlenmeyen özel durumlar, bir SectionContent bileşenin çevresinde tanımlanan hata sınırları tarafından işlenir.
• Akış Razor işleme için yapılandırılmış bir bileşen, bir SectionContent bileşen tarafından sağlanan bölüm içeriğini de akış işlemeyi kullanacak şekilde yapılandırıyor.