動的にレンダリングされる ASP.NET Core Razor コンポーネント

作成者: Dave Brock

組み込みの DynamicComponent コンポーネントを使用して、型に基づいてコンポーネントをレンダリングします。

動的コンポーネント

DynamicComponent は、可能な型を反復処理したり、条件付きロジックを使用したりせずにコンポーネントをレンダリングする場合に便利です。 たとえば、DynamicComponent を使用すると、ドロップダウン リストからユーザーが選択した結果に基づいてコンポーネントをレンダリングできます。

次に例を示します。

• componentType によって、型を指定します。
• parameters によって、componentType コンポーネントに渡すコンポーネント パラメーターを指定します。

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

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

パラメーター値を渡す方法の詳細については、この記事の後の方で示す「パラメーターを渡す」セクションを参照してください。

例

次の例では、Razor コンポーネントを使用して、4 つの可能な値を示すドロップダウン リストからユーザーが選択した結果に基づいてコンポーネントをレンダリングします。

ユーザーによるスペースフライト キャリアの選択	レンダリング対象の共有 Razor コンポーネント
Rocket Lab®	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;
        }
    }
}

前の例の場合:

• Dictionary<TKey,TValue> は、表示されるコンポーネントを管理するために使用されます。
• 名前はディクショナリ キーとして機能し、選択オプションとして提供されます。
• コンポーネントの種類は、typeof 演算子を使用してディクショナリ値として格納されます。

パラメーターを渡す

動的にレンダリングされるコンポーネントにコンポーネント パラメーターがある場合は、それらを IDictionary<string, object> として DynamicComponent に渡します。 string はパラメーターの名前です。object はパラメーターの値です。

次の例では、型名に基づいて動的にレンダリングされるコンポーネントにパラメーター値を与えるように、コンポーネント メタデータ オブジェクト (ComponentMetadata) を構成します。 この例は、採用できるいくつかのアプローチの中の 1 つにすぎません。 パラメーター データは、Web API、データベース、またはメソッドからも提供することもできます。 唯一の要件は、アプローチによって 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; } = [];
}

次のコンポーネント RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor) は前の例から更新されており、WindowSeat という名前のコンポーネント パラメーターが追加され、乗客がフライトで窓側の席を優先するかどうかを指定します。

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; }
}

次の例では

• 窓側の席 (WindowSeat) の RocketLabWithWindowSeat コンポーネント パラメーターだけで Window Seat チェック ボックスの値を受け取ります。
• コンポーネント名を定数文字列として返す nameof 演算子を使用して、コンポーネント名をディクショナリ キーとして使用しています。
• 動的にレンダリングされるコンポーネントは、共有コンポーネントです。
  • この記事のセクションに示されている: RocketLabWithWindowSeat (RocketLabWithWindowSeat.razor)
  • この記事の前の方の「例」セクションに示されているコンポーネント:
    • SpaceX (SpaceX.razor)
    • UnitedLaunchAlliance (UnitedLaunchAlliance.razor)
    • VirginGalactic (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;
        }
    }
}

イベント コールバック (EventCallback)

イベント コールバック (EventCallback) は、DynamicComponent にそのパラメーター ディクショナリで渡すことができます。

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; } = [];
}

動的にレンダリングされる各コンポーネント内にイベント コールバック パラメーター (EventCallback) を実装します。

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; }
}

次の親コンポーネントの例では、ShowDTMessage メソッドにより現在の時刻を含む文字列を message に割り当て、message の値がレンダリングされます。

親コンポーネントは、パラメーター ディクショナリでコールバック メソッド ShowDTMessage を渡します。

• string キーはコールバック メソッドの名前 (OnClickCallback) です。
• object 値は EventCallbackFactory.Create によって、親コールバック メソッド ShowDTMessage に対して作成されます。 this キーワードは C# フィールド初期化ではサポートされていないため、パラメーター ディクショナリには C# プロパティが使用されることに注意してください。

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}.";
}

キャッチオール パラメーターを回避する

キャッチオール パラメーターを使用することは避けてください。 キャッチオール パラメーターを使用すると、DynamicComponent 上の明示的なパラメーターはすべて、事実上、動的な子に渡すことができない予約語になります。 DynamicComponent に渡される新しいパラメーターは破壊的変更となります。それらによって、たまたま同じ名前を持つ子コンポーネント パラメーターをシャドウする処理が開始されるからです。 考えられるすべての動的な子に渡されるパラメーター名の固定セットを呼び出し元が常に把握する可能性は低くなります。

動的に作成されたコンポーネント インスタンスにアクセスします。

Instance プロパティを使用して、動的に作成されたコンポーネント インスタンスにアクセスします。

コンポーネントが動的に読み込まれるときに親コンポーネントからアクセスする必要があるメソッドとプロパティを使用して、動的に作成されたコンポーネント インスタンスを記述するインターフェイスを作成します。 次の例では、コンポーネントに実装するための Log メソッドを指定します。

Interfaces/ILoggable.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Interfaces;

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

各コンポーネント定義は、インターフェイスを実装します。 次の例は、「例」セクションの変更された Rocket Lab® コンポーネントで、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!");
}

残りの 3 つの共有コンポーネント (VirginGalactic3、UnitedLaunchAlliance3、SpaceX3) も同様に扱うことができます。

• 次のディレクティブがコンポーネントに追加されます。ここでの {COMPONENT TYPE} プレースホルダーはコンポーネントの種類です。

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

• 各コンポーネントは、Log メソッドを実装します。 ロガーによって書き込まれたログ カテゴリには、LogInformation が呼び出されたときにコンポーネントの種類の完全修飾名が含まれます。

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

親コンポーネントは、動的に読み込まれたコンポーネント インスタンスを、インターフェイスのメンバーにアクセスするための ILoggable としてキャストします。 次の例では、UI でボタンを選択すると、読み込まれたコンポーネントの Log メソッドが呼び出されます。

...
@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();
}

前の例の実際のデモについては、Blazor サンプル アプリの DynamicComponent4 コンポーネントを参照してください。

商標

Rocket Lab は、Rocket Lab USA Inc. の登録商標です。SpaceX は、Space Exploration Technologies Corp. の登録商標です。United Launch Alliance および ULA は、United Launch Alliance, LLC の登録商標です。 Virgin Galactic は、Galactic Enterprises, LLC の登録商標です。

その他のリソース

• ASP.NET Core Blazor のイベント処理
• DynamicComponent