Pembantu Tag Komponen di ASP.NET Core

Pembantu Tag Komponen merender Razor komponen di Razor halaman Halaman atau tampilan MVC.

Prasyarat

Ikuti panduan di bagian Menggunakan komponen yang tidak dapat dirutekan di halaman atau tampilan dari artikel Mengintegrasikan komponen Inti Razor ASP.NET ke dalam aplikasi inti ASP.NET.

Pembantu Tag Komponen

Untuk merender komponen dari halaman atau tampilan, gunakan Pembantu Tag Komponen (<component> tag).

RenderMode mengonfigurasi apakah komponen:

• Di-prerender ke dalam halaman.
• Dirender sebagai HTML statis di halaman atau jika menyertakan informasi yang Blazor diperlukan untuk bootstrap aplikasi dari agen pengguna.

Blazor WebAssembly mode render aplikasi ditampilkan dalam tabel berikut.

Mode Render	Deskripsi
WebAssembly	Merender penanda untuk Blazor WebAssembly aplikasi untuk digunakan guna menyertakan komponen interaktif saat dimuat di browser. Komponen tidak dirender sebelumnya. Opsi ini memudahkan untuk merender komponen yang berbeda Blazor WebAssembly di halaman yang berbeda.
WebAssemblyPrerendered	Merender komponen ke dalam HTML statis dan menyertakan penanda untuk Blazor WebAssembly aplikasi untuk digunakan nanti untuk membuat komponen interaktif saat dimuat di browser.

Mode render diperlihatkan dalam tabel berikut.

Mode Render	Deskripsi
ServerPrerendered	Merender komponen menjadi HTML statis dan menyertakan penanda untuk aplikasi sisi Blazor server. Saat agen pengguna dimulai, penanda ini digunakan untuk mem-bootstrap Blazor aplikasi.
Server	Merender penanda untuk aplikasi sisi Blazor server. Output dari komponen tidak disertakan. Saat agen pengguna dimulai, penanda ini digunakan untuk mem-bootstrap Blazor aplikasi.
Static	Merender komponen menjadi HTML statis.

Karakteristik tambahan meliputi:

• Beberapa Bantuan Tag Komponen yang merender beberapa Razor komponen diizinkan.
• Komponen tidak dapat dirender secara dinamis setelah aplikasi dimulai.
• Meskipun halaman dan tampilan dapat menggunakan komponen, sebaliknya tidak benar. Komponen tidak dapat menggunakan fitur tampilan dan khusus halaman, seperti tampilan dan bagian parsial. Untuk menggunakan logika dari tampilan parsial dalam komponen, perhitungkan logika tampilan parsial ke dalam komponen.
• Merender komponen server dari halaman HTML statis tidak didukung.

Pembantu Tag Komponen berikut merender EmbeddedCounter komponen dalam halaman atau tampilan di aplikasi sisi Blazor server dengan ServerPrerendered:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components

...

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

Contoh sebelumnya mengasumsikan bahwa EmbeddedCounter komponen berada di folder aplikasi Components . Tempat penampung {APP ASSEMBLY} adalah nama rakitan aplikasi (misalnya, @using BlazorSample.Components).

Pembantu Tag Komponen juga dapat meneruskan parameter ke komponen. Pertimbangkan komponen berikut ColorfulCheckbox yang mengatur warna dan ukuran label kotak centang.

Components/ColorfulCheckbox.razor:

<label style="font-size:@(Size)px;color:@Color">
    <input @bind="Value"
           id="survey" 
           name="blazor" 
           type="checkbox" />
    Enjoying Blazor?
</label>

@code {
    [Parameter]
    public bool Value { get; set; }

    [Parameter]
    public int Size { get; set; } = 8;

    [Parameter]
    public string? Color { get; set; }

    protected override void OnInitialized()
    {
        Size += 10;
    }
}

Parameter Size komponen (int) dan Color (string) dapat diatur oleh Pembantu Tag Komponen:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components

...

<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered" 
    param-Size="14" param-Color="@("blue")" />

Contoh sebelumnya mengasumsikan bahwa ColorfulCheckbox komponen berada di Components folder . Tempat penampung {APP ASSEMBLY} adalah nama rakitan aplikasi (misalnya, @using BlazorSample.Components).

HTML berikut dirender di halaman atau tampilan:

<label style="font-size:24px;color:blue">
    <input id="survey" name="blazor" type="checkbox">
    Enjoying Blazor?
</label>

Meneruskan string yang dikutip memerlukan ekspresi eksplisitRazor, seperti yang ditunjukkan dalam param-Color contoh sebelumnya. Perilaku Razor penguraian untuk string nilai jenis tidak berlaku untuk param-* atribut karena atribut adalah object jenis.

Semua jenis parameter didukung, kecuali:

• Parameter generik.
• Parameter yang tidak dapat diserialisasikan.
• Warisan dalam parameter koleksi.
• Parameter yang jenisnya didefinisikan di luar Blazor WebAssembly aplikasi atau dalam rakitan yang dimuat dengan malas.
• Untuk menerima RenderFragment delegasi untuk konten anak (misalnya, param-ChildContent="..."). Untuk skenario ini, sebaiknya buat Razor komponen (.razor) yang mereferensikan komponen yang ingin Anda render dengan konten anak yang ingin Anda lewati lalu panggil Razor komponen dari halaman atau lihat dengan Pembantu Tag Komponen.

Jenis parameter harus ON dapat diserialisasikan JS, yang biasanya berarti bahwa jenis harus memiliki konstruktor default dan properti yang dapat diatur. Misalnya, Anda dapat menentukan nilai untuk Size dan Color dalam contoh sebelumnya karena jenis dan Color adalah jenis Size primitif (int dan string), yang didukung oleh JSserializer ON.

Dalam contoh berikut, objek kelas diteruskan ke komponen:

MyClass.cs:

public class MyClass
{
    public MyClass()
    {
    }

    public int MyInt { get; set; } = 999;
    public string MyString { get; set; } = "Initial value";
}

Kelas harus memiliki konstruktor tanpa parameter publik.

Components/ParameterComponent.razor:

<h2>ParameterComponent</h2>

<p>Int: @MyObject?.MyInt</p>
<p>String: @MyObject?.MyString</p>

@code
{
    [Parameter]
    public MyClass? MyObject { get; set; }
}

Pages/MyPage.cshtml:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}
@using {APP ASSEMBLY}.Components

...

@{
    var myObject = new MyClass();
    myObject.MyInt = 7;
    myObject.MyString = "Set by MyPage";
}

<component type="typeof(ParameterComponent)" render-mode="ServerPrerendered" 
    param-MyObject="@myObject" />

Contoh sebelumnya mengasumsikan bahwa ParameterComponent komponen berada di folder aplikasi Components . Tempat penampung {APP ASSEMBLY} adalah nama rakitan aplikasi (misalnya, @using BlazorSample dan @using BlazorSample.Components). MyClass berada di namespace aplikasi.

Sumber Daya Tambahan:

• Pertahankan Pembantu Tag Status Komponen di ASP.NET Core
• Prarender komponen ASP.NET Core Razor
• ComponentTagHelper
• Menandai Pembantu di ASP.NET Core
• komponen ASP.NET Core Razor