bagian ASP.NET Core Blazor

Artikel ini menjelaskan cara mengontrol konten dalam Razor komponen dari komponen anak Razor .

Blazor Bagian

Untuk mengontrol konten dalam Razor komponen dari komponen anak Razor , Blazor mendukung bagian menggunakan komponen bawaan berikut:

• SectionOutlet: Merender konten yang disediakan oleh SectionContent komponen dengan pencocokan SectionName atau SectionId argumen. Dua komponen atau lebih SectionOutlet tidak dapat memiliki yang sama SectionName atau SectionId.

• SectionContent: Menyediakan konten sebagai RenderFragment untuk SectionOutlet komponen dengan pencocokan SectionName atau SectionId. Jika beberapa SectionContent komponen memiliki komponen yang sama SectionName atau SectionId, komponen yang SectionOutlet cocok merender konten yang terakhir dirender SectionContent.

Bagian dapat digunakan dalam tata letak dan di seluruh komponen induk-turunan berlapis.

Meskipun argumen yang diteruskan untuk SectionName dapat menggunakan semua jenis casing, dokumentasi mengadopsi casing kebab (misalnya, top-bar), yang merupakan pilihan casing umum untuk ID elemen HTML. SectionId menerima bidang statis object , dan kami selalu merekomendasikan casing Pascal untuk nama bidang C# (misalnya, TopbarSection).

Dalam contoh berikut, komponen tata letak utama aplikasi mengimplementasikan tombol penghitung kenaikan untuk komponen aplikasi Counter .

Jika namespace layanan untuk bagian tidak ada dalam _Imports.razor file, tambahkan:

@using Microsoft.AspNetCore.Components.Sections

MainLayout Di komponen (MainLayout.razor), tempatkan SectionOutlet komponen dan teruskan string ke SectionName parameter untuk menunjukkan nama bagian. Contoh berikut menggunakan nama top-barbagian :

<SectionOutlet SectionName="top-bar" />

Counter Dalam komponen (Counter.razor), buat SectionContent komponen dan teruskan string yang cocok (top-bar) ke parameternyaSectionName:

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

Counter Ketika komponen diakses di /counter, MainLayout komponen merender tombol jumlah kenaikan dari Counter komponen tempat SectionOutlet komponen ditempatkan. Ketika komponen lain diakses, tombol jumlah kenaikan tidak dirender.

Alih-alih menggunakan bagian bernama, Anda dapat meneruskan statis object dengan SectionId parameter untuk mengidentifikasi bagian . Contoh berikut juga mengimplementasikan tombol penghitung kenaikan untuk komponen aplikasi Counter di tata letak utama aplikasi.

Jika Anda tidak ingin komponen lain SectionContent secara tidak sengaja mencocokkan nama SectionOutlet, teruskan parameter objek SectionId untuk mengidentifikasi bagian tersebut. Ini dapat berguna saat merancang Razor pustaka kelas (RCL). SectionOutlet Ketika di RCL menggunakan referensi objek dengan SectionId dan konsumen menempatkan SectionContent komponen dengan objek yang cocok, kecocokan SectionId yang tidak disengaja berdasarkan nama tidak dimungkinkan ketika konsumen RCL mengimplementasikan komponen lainSectionContent.

Contoh berikut juga mengimplementasikan tombol penghitung kenaikan untuk komponen aplikasi Counter di tata letak utama aplikasi, menggunakan referensi objek alih-alih nama bagian.

TopbarSection Tambahkan statis object ke MainLayout komponen dalam @code blok:

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

MainLayout Dalam markup komponenRazor, tempatkan SectionOutlet komponen dan teruskan TopbarSection ke SectionId parameter untuk menunjukkan bagian :

<SectionOutlet SectionId="TopbarSection" />

SectionContent Tambahkan komponen ke komponen aplikasi Counter yang merender tombol jumlah kenaikan. Gunakan bagian MainLayout komponen TopbarSection statis object sebagai SectionId (MainLayout.TopbarSection).

Di Counter.razor:

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

Counter Ketika komponen diakses, MainLayout komponen merender tombol jumlah kenaikan tempat SectionOutlet komponen ditempatkan.

Catatan

SectionOutlet dan SectionContent komponen hanya dapat mengatur atau SectionIdSectionName, bukan keduanya.

Interaksi bagian dengan fitur lain Blazor

Bagian berinteraksi dengan fitur lain Blazor dengan cara berikut:

• Nilai berskala mengalir ke konten bagian dari mana konten didefinisikan oleh SectionContent komponen.
• Pengecualian yang tidak tertangani ditangani oleh batas kesalahan yang SectionContent ditentukan di sekitar komponen.
• Komponen yang Razor dikonfigurasi untuk penyajian streaming juga mengonfigurasi konten bagian yang SectionContent disediakan oleh komponen untuk menggunakan penyajian streaming.