Komponen ASP.NET Core Razor yang dirender secara dinamis

Oleh Dave Brock

Gunakan komponen bawaan DynamicComponent untuk merender komponen berdasarkan jenis.

Komponen dinamis

berguna DynamicComponent untuk merender komponen tanpa melakukan iterasi melalui jenis yang mungkin atau menggunakan logika kondisional. Misalnya, DynamicComponent dapat merender komponen berdasarkan pilihan pengguna dari daftar dropdown.

Dalam contoh berikut:

• componentType menentukan jenis.
• parameters menentukan parameter komponen untuk diteruskan ke componentType komponen.

<DynamicComponent Type="componentType" Parameters="parameters" />

@code {
    private Type componentType = ...;
    private IDictionary<string, object> parameters = ...;
}

Untuk informasi selengkapnya tentang meneruskan nilai parameter, lihat bagian Parameter pass nanti di artikel ini.

Contoh

Dalam contoh berikut, Razor komponen merender komponen berdasarkan pilihan pengguna dari daftar dropdown empat nilai yang mungkin.

Pilihan operator spaceflight pengguna	Komponen bersama Razor untuk dirender
Lab® Roket	RocketLab.razor
SpaceX®	SpaceX.razor
ULA®	UnitedLaunchAlliance.razor
Virgin Galactic®	VirginGalactic.razor

RocketLab.razor:

<h2>Rocket Lab®</h2>

<p>
    Rocket Lab is a registered trademark of 
    <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>

SpaceX.razor:

<h2>SpaceX®</h2>

<p>
    SpaceX is a registered trademark of 
    <a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>

UnitedLaunchAlliance.razor:

<h2>United Launch Alliance®</h2>

<p>
    United Launch Alliance and ULA are registered trademarks of
    <a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>

VirginGalactic.razor:

<h2>Virgin Galactic®</h2>

<p>
    Virgin Galactic is a registered trademark of 
    <a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>

DynamicComponent1.razor:

@page "/dynamic-component-1"

<PageTitle>Dynamic Component 1</PageTitle>

<h1>Dynamic Component Example 1</h1>

<p>
    <label>
        Select your transport:
        <select @onchange="OnDropdownChange">
            <option value="">Select a value</option>
            @foreach (var entry in components.Keys)
            {
                <option value="@entry">@entry</option>
            }
        </select>
    </label>
</p>

@if (selectedType is not null)
{
    <div class="border border-primary my-1 p-1">
        <DynamicComponent Type="selectedType" />
    </div>
}

@code {
    private readonly Dictionary<string, Type> components = new()
    {
        ["Rocket Lab"] = typeof(RocketLab),
        ["SpaceX"] = typeof(SpaceX),
        ["ULA"] = typeof(UnitedLaunchAlliance),
        ["Virgin Galactic"] = typeof(VirginGalactic)
    };
    private Type? selectedType;

    private void OnDropdownChange(ChangeEventArgs e)
    {
        if ((e.Value is string dropdownValue) && 
            !String.IsNullOrWhiteSpace(dropdownValue))
        {
            selectedType = components[dropdownValue];
        }
        else
        {
            selectedType = null;
        }
    }
}

Dalam contoh sebelumnya:

• Digunakan Dictionary<TKey,TValue> untuk mengelola komponen yang akan ditampilkan.
• Nama berfungsi sebagai kunci kamus dan disediakan sebagai opsi pilihan.
• Jenis komponen disimpan sebagai nilai kamus menggunakan typeof operator.

Meneruskan parameter

Jika komponen yang dirender secara dinamis memiliki parameter komponen, teruskan ke DynamicComponent dalam sebagai IDictionary<string, object>. string adalah nama parameter, dan object adalah nilai parameter.

Contoh berikut mengonfigurasi objek metadata komponen (ComponentMetadata) untuk menyediakan nilai parameter ke komponen yang dirender secara dinamis berdasarkan nama jenis. Contohnya hanyalah salah satu dari beberapa pendekatan yang dapat Anda adopsi. Data parameter juga dapat disediakan dari API web, database, atau metode. Satu-satunya persyaratan adalah bahwa pendekatan mengembalikan IDictionary<string, object>.

ComponentMetadata.cs:

namespace BlazorSample;

public class ComponentMetadata
{
    public required Type Type { get; init; }
    public required string Name { get; init; }
    public Dictionary<string, object> Parameters { get; } = [];
}

Komponen berikut RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor) telah diperbarui dari contoh sebelumnya untuk menyertakan parameter komponen bernama WindowSeat untuk menentukan apakah penumpang lebih suka kursi jendela pada penerbangan mereka:

RocketLabWithWindowSeat.razor:

<h2>Rocket Lab®</h2>

<p>
    User selected a window seat: @WindowSeat
</p>

<p>
    Rocket Lab is a trademark of 
    <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>

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

Dalam contoh berikut:

• RocketLabWithWindowSeat Hanya parameter komponen untuk kursi jendela (WindowSeat) yang menerima nilai kotak Window Seat centang.
• Nama komponen digunakan sebagai kunci kamus menggunakan nameof operator, yang mengembalikan nama komponen sebagai string konstanta.
• Komponen yang dirender secara dinamis adalah komponen bersama:
  • Diperlihatkan di bagian artikel ini: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • Komponen yang diperlihatkan di bagian Contoh sebelumnya dalam artikel ini:
    • SpaceXAku akan menemuinya.SpaceX.razor
    • UnitedLaunchAllianceAku akan menemuinya.UnitedLaunchAlliance.razor
    • VirginGalacticAku akan menemuinya.VirginGalactic.razor

DynamicComponent2.razor:

@page "/dynamic-component-2"

<PageTitle>Dynamic Component 2</PageTitle>

<h1>Dynamic Component Example 2</h1>

<p>
    <label>
        <input type="checkbox" @bind="windowSeat" 
            @bind:after="HandleWindowSeatChanged" />
        Window Seat (Rocket Lab only)
    </label>
</p>

<p>
    <label>
        Select your transport:
        <select @onchange="OnDropdownChange">
            <option value="">Select a value</option>
            @foreach (var c in components)
            {
                <option value="@c.Key">@c.Value.Name</option>
            }
        </select>
    </label>
</p>

@if (selectedComponent is not null)
{
    <div class="border border-primary my-1 p-1">
        <DynamicComponent Type="selectedComponent.Type"
            Parameters="selectedComponent.Parameters" />
    </div>
}

@code {
    private Dictionary<string, ComponentMetadata> components =
        new()
        {
            [nameof(RocketLabWithWindowSeat)] = new ComponentMetadata()
            {
                Type = typeof(RocketLabWithWindowSeat),
                Name = "Rocket Lab with Window Seat",
                Parameters = { [nameof(RocketLabWithWindowSeat.WindowSeat)] = false }
            },
            [nameof(VirginGalactic)] = new ComponentMetadata()
            {
                Type = typeof(VirginGalactic),
                Name = "Virgin Galactic"
            },
            [nameof(UnitedLaunchAlliance)] = new ComponentMetadata()
            {
                Type = typeof(UnitedLaunchAlliance),
                Name = "ULA"
            },
            [nameof(SpaceX)] = new ComponentMetadata()
            {
                Type = typeof(SpaceX),
                Name = "SpaceX"
            }
        };
    private ComponentMetadata? selectedComponent;
    private bool windowSeat;

    private void HandleWindowSeatChanged()
    {
        components[nameof(RocketLabWithWindowSeat)]
            .Parameters[nameof(RocketLabWithWindowSeat.WindowSeat)] = windowSeat;
    }

    private void OnDropdownChange(ChangeEventArgs e)
    {
        if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
        {
            selectedComponent = components[dropdownValue];
        }
        else
        {
            selectedComponent = null;
        }
    }
}

Panggilan balik peristiwa (EventCallback)

Panggilan balik peristiwa (EventCallback) dapat diteruskan ke DynamicComponent dalam kamus parameternya.

ComponentMetadata.cs:

namespace BlazorSample;

public class ComponentMetadata
{
    public required Type Type { get; init; }
    public required string Name { get; init; }
    public Dictionary<string, object> Parameters { get; } = [];
}

Terapkan parameter panggilan balik peristiwa (EventCallback) dalam setiap komponen yang dirender secara dinamis.

RocketLab2.razor:

<h2>Rocket Lab®</h2>

<p>
    Rocket Lab is a registered trademark of
    <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>

<button @onclick="OnClickCallback">
    Trigger a Parent component method
</button>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

SpaceX2.razor:

<h2>SpaceX®</h2>

<p>
    SpaceX is a registered trademark of
    <a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>

<button @onclick="OnClickCallback">
    Trigger a Parent component method
</button>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

UnitedLaunchAlliance2.razor:

<h2>United Launch Alliance®</h2>

<p>
    United Launch Alliance and ULA are registered trademarks of
    <a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>

<button @onclick="OnClickCallback">
    Trigger a Parent component method
</button>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

VirginGalactic2.razor:

<h2>Virgin Galactic®</h2>

<p>
    Virgin Galactic is a registered trademark of
    <a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>

<button @onclick="OnClickCallback">
    Trigger a Parent component method
</button>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

Dalam contoh komponen induk berikut, ShowDTMessage metode menetapkan string dengan waktu saat ini ke message, dan nilai message dirender.

Komponen induk meneruskan metode panggilan balik, ShowDTMessage dalam kamus parameter:

• Kuncinya string adalah nama metode panggilan balik, OnClickCallback.
• Nilai object dibuat oleh EventCallbackFactory.Create untuk metode panggilan balik induk, ShowDTMessage. Perhatikan bahwa this kata kunci tidak didukung di inisialisasi bidang C#, sehingga properti C# digunakan untuk kamus parameter.

DynamicComponent3.razor:

@page "/dynamic-component-3"

<PageTitle>Dynamic Component 3</PageTitle>

<h1>Dynamic Component Example 3</h1>

<p>
    <label>
        Select your transport:
        <select @onchange="OnDropdownChange">
            <option value="">Select a value</option>
            @foreach (var c in Components)
            {
                <option value="@c.Key">@c.Value.Name</option>
            }
        </select>
    </label>
</p>

@if (selectedComponent is not null)
{
    <div class="border border-primary my-1 p-1">
        <DynamicComponent Type="selectedComponent.Type"
            Parameters="selectedComponent.Parameters" />
    </div>
}

<p>
    @message
</p>

@code {
    private ComponentMetadata? selectedComponent;
    private string? message;

    private Dictionary<string, ComponentMetadata> Components =>
        new()
        {
            [nameof(RocketLab2)] = new ComponentMetadata()
            {
                Type = typeof(RocketLab2),
                Name = "Rocket Lab",
                Parameters = { [nameof(RocketLab2.OnClickCallback)] =
                    EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
            },
            [nameof(VirginGalactic2)] = new ComponentMetadata()
            {
                Type = typeof(VirginGalactic2),
                Name = "Virgin Galactic",
                Parameters = { [nameof(VirginGalactic2.OnClickCallback)] =
                    EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
            },
            [nameof(UnitedLaunchAlliance2)] = new ComponentMetadata()
            {
                Type = typeof(UnitedLaunchAlliance2),
                Name = "ULA",
                Parameters = { [nameof(UnitedLaunchAlliance2.OnClickCallback)] =
                    EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
            },
            [nameof(SpaceX2)] = new ComponentMetadata()
            {
                Type = typeof(SpaceX2),
                Name = "SpaceX",
                Parameters = { [nameof(SpaceX2.OnClickCallback)] =
                    EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
            }
        };

    private void OnDropdownChange(ChangeEventArgs e)
    {
        if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
        {
            selectedComponent = Components[dropdownValue];
        }
        else
        {
            selectedComponent = null;
        }
    }

    private void ShowDTMessage(MouseEventArgs e) =>
        message = $"The current DT is: {DateTime.Now}.";
}

Hindari parameter catch-all

Hindari penggunaan parameter catch-all. Jika parameter catch-all digunakan, setiap parameter eksplisit aktif DynamicComponent secara efektif adalah kata khusus yang tidak dapat Anda teruskan ke anak dinamis. Setiap parameter baru yang diteruskan DynamicComponent adalah perubahan yang melanggar, karena mereka mulai membayangi parameter komponen anak yang kebetulan memiliki nama yang sama. Tidak mungkin pemanggil selalu tahu sekumpulan nama parameter tetap untuk diteruskan ke semua kemungkinan anak dinamis.

Mengakses instans komponen yang dibuat secara dinamis

Instance Gunakan properti untuk mengakses instans komponen yang dibuat secara dinamis.

Buat antarmuka untuk menjelaskan instans komponen yang dibuat secara dinamis dengan metode dan properti apa pun yang perlu Anda akses dari komponen induk saat komponen dimuat secara dinamis. Contoh berikut menentukan Log metode untuk implementasi dalam komponen.

Interfaces/ILoggable.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Interfaces;

public interface ILoggable : IComponent
{
    public void Log();
}

Setiap definisi komponen mengimplementasikan antarmuka. Contoh berikut adalah komponen Rocket Lab® yang dimodifikasi dari bagian Contoh yang mencatat string melalui metodenya Log .

RocketLab3.razor:

@using BlazorSample.Interfaces
@implements ILoggable
@inject ILogger<RocketLab3> Logger
    
<h2>Rocket Lab®</h2>

<p>
    Rocket Lab is a registered trademark of 
    <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>

@code {
    public void Log() => Logger.LogInformation("Woot! I logged this call!");
}

Tiga komponen bersama yang tersisa (VirginGalactic3, , UnitedLaunchAlliance3SpaceX3) menerima perlakuan serupa:

• Arahan berikut ditambahkan ke komponen, di mana {COMPONENT TYPE} tempat penampung adalah jenis komponen:

  @using BlazorSample.Interfaces
  @implements ILoggable
  @inject ILogger<{COMPONENT TYPE}> Logger
  

• Setiap komponen mengimplementasikan Log metode . Kategori log yang ditulis oleh pencatat mencakup nama yang sepenuhnya memenuhi syarat dari jenis komponen ketika LogInformation dipanggil:

  @code {
      public void Log()
      {
          Logger.LogInformation("Woot! I logged this call!");
      }
  }
  

Komponen induk mentransmisikan instans komponen yang dimuat secara dinamis sebagai ILoggable untuk mengakses anggota antarmuka. Dalam contoh berikut, metode komponen Log yang dimuat dipanggil saat tombol dipilih di UI:

...
@using BlazorSample.Interfaces

...

<DynamicComponent Type="..." @ref="dc" />

...

<button @onclick="LogFromLoadedComponent">Log from loaded component</button>

@code {
    private DynamicComponent? dc;

    ...

    private void LogFromLoadedComponent() => (dc?.Instance as ILoggable)?.Log();
}

Untuk demonstrasi yang berfungsi dari contoh sebelumnya, lihat DynamicComponent4 komponen di Blazor aplikasi sampel.

Merek Dagang

Rocket Lab adalah merek dagang terdaftar dari Rocket Lab USA Inc. SpaceX adalah merek dagang terdaftar dari Space Exploration Technologies Corp. United Launch Alliance dan ULA adalah merek dagang terdaftar dari United Launch Alliance, LLC. Virgin Galactic adalah merek dagang terdaftar dari Galactic Enterprises, LLC.

Sumber Daya Tambahan:

• penanganan peristiwa ASP.NET Core Blazor
• DynamicComponent