ASP.NET Core Blazor テンプレート コンポーネント

この記事では、テンプレート コンポーネントで 1 つまたは複数の UI テンプレートをパラメーターとして受け取る方法について説明します。これは、コンポーネントのレンダリング ロジックの一部として使用できます。

テンプレート コンポーネント

テンプレート コンポーネントは、1 つまたは複数の UI テンプレートをパラメーターとして受け取るコンポーネントです。それをコンポーネントのレンダリング ロジックで使用できます。 テンプレート コンポーネントを使うと、より再利用しやすい上位レベルのコンポーネントを作成できます。 いくつかの例を次に示します。

• テーブルのヘッダー、行、フッターのテンプレートをユーザーが指定できるようにするテーブル コンポーネント
• リスト内の項目をレンダリングするためのテンプレートをユーザーが指定できるようにするリスト コンポーネント

RenderFragment または RenderFragment<TValue> の型の 1 つまたは複数のコンポーネント パラメーターを指定することで、テンプレート コンポーネントが定義されます。 レンダー フラグメントは、レンダリングする UI のセグメントを表します。 RenderFragment<TValue> は、レンダー フラグメントが呼び出されたときに指定できる型パラメーターを受け取ります。

注意

RenderFragment の詳細については、ASP.NET Core Razor コンポーネントに関する記事を参照してください。

次の TableTemplate コンポーネントが示すように、多くの場合、テンプレート コンポーネントはジェネリック型です。 この例で、ジェネリック型 <T> は、IReadOnlyList<T> 値のレンダリングに使用されます。ここでは、pet の表を表示するコンポーネント内の一連の pet 行です。

TableTemplate.razor:

@typeparam TItem
@using System.Diagnostics.CodeAnalysis

<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            if (RowTemplate is not null)
            {
                <tr>@RowTemplate(item)</tr>
            }
        }
    </tbody>
</table>

@code {
    [Parameter]
    public RenderFragment? TableHeader { get; set; }

    [Parameter]
    public RenderFragment<TItem>? RowTemplate { get; set; }

    [Parameter, AllowNull]
    public IReadOnlyList<TItem> Items { get; set; }
}

テンプレート コンポーネントを使用する場合、テンプレート パラメーターは、パラメーターの名前と一致する子要素を使用して指定することができます。 次の例では、<TableHeader>...</TableHeader> と <RowTemplate>...<RowTemplate> を使用して、TableTemplate コンポーネントの TableHeader と RowTemplate に対して、RenderFragment<TValue> を指定します。

暗黙的な子コンテンツ (ラップする子要素を持たない) のコンテンツ パラメーター名を指定する場合は、コンポーネント要素に Context 属性を指定します。 次の例では、Context 属性が TableTemplate 要素に表示され、すべての RenderFragment<TValue> テンプレート パラメーターに適用されます。

Pets1.razor:

@page "/pets-1"

<PageTitle>Pets 1</PageTitle>

<h1>Pets Example 1</h1>

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

または、RenderFragment<TValue> 子要素で Context 属性を使用して、パラメーター名を変更することもできます。 次の例では、Context が、TableTemplate ではなく、RowTemplate に設定されています。

Pets2.razor:

@page "/pets-2"

<PageTitle>Pets 2</PageTitle>

<h1>Pets Example 2</h1>

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate Context="pet">
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

RenderFragment<TValue> 型のコンポーネント引数には、context という名前の暗黙的なパラメーターがあり、これを使用することができます。 次の例では、Context は設定されていません。 @context.{PROPERTY} によって、テンプレートに pet 値が指定されます。このテンプレートでは、{PROPERTY} は Pet プロパティです。

Pets3.razor:

@page "/pets-3"

<PageTitle>Pets 3</PageTitle>

<h1>Pets Example 3</h1>

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

ジェネリック型のコンポーネントを使用するときは、可能な場合に型パラメーターが推論されます。 ただし、前の例の TItem のように、型パラメーターに一致する名前を持つ属性を使用して、明示的に型を指定することができます。

Pets4.razor:

@page "/pets-4"

<PageTitle>Pets 4</PageTitle>

<h1>Pets Example 4</h1>

<TableTemplate Items="pets" TItem="Pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

その他のリソース

• ASP.NET Core Blazor のパフォーマンスに関するベスト プラクティス
• Blazor サンプル GitHub リポジトリ (dotnet/blazor-samples) (ダウンロード方法)