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

作成者: Robert Haken

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

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

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

• テーブルのヘッダー、行、フッターのテンプレートをユーザーが指定できるようにするテーブル コンポーネント
• リスト内の項目をレンダリングするためのテンプレートをユーザーが指定できるようにするリスト コンポーネント
• ユーザーが開始コンテンツとナビゲーション リンクのテンプレートを指定できるナビゲーション バー コンポーネント。

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

注意

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

次の TemplatedNavBar コンポーネント (TemplatedNavBar.razor) が示すように、多くの場合、テンプレート コンポーネントはジェネリック型です。 次の例のジェネリック型 (<T>) は、 IReadOnlyList<T> 値のレンダリングに使用されます。この例では、ペットの詳細コンポーネントへのリンクを含むナビゲーション バーを表示するコンポーネントのペットの一覧です。

TemplatedNavBar.razor:

@typeparam TItem

<nav class="navbar navbar-expand navbar-light bg-light">
    <div class="container justify-content-start">
        @StartContent
        <div class="navbar-nav">
            @foreach (var item in Items)
            {
                @ItemTemplate(item)
            }
        </div>
    </div>
</nav>

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

    [Parameter, EditorRequired]
    public RenderFragment<TItem> ItemTemplate { get; set; } = default!;

    [Parameter, EditorRequired]
    public IReadOnlyList<TItem> Items { get; set; } = default!;
}

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

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

Pets1.razor:

@page "/pets-1"

<PageTitle>Pets 1</PageTitle>

<h1>Pets Example 1</h1>

<TemplatedNavBar Items="pets" Context="pet">
    <StartContent>
        <a href="/" class="navbar-brand">PetsApp</a>
    </StartContent>
    <ItemTemplate>
        <NavLink href="@($"/pet-detail/{pet.PetId}?ReturnUrl=%2Fpets-1")" class="nav-link">
            @pet.Name
        </NavLink>
    </ItemTemplate>
</TemplatedNavBar>

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

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

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

Pets2.razor:

@page "/pets-2"

<PageTitle>Pets 2</PageTitle>

<h1>Pets Example 2</h1>

<TemplatedNavBar Items="pets">
    <StartContent>
        <a href="/" class="navbar-brand">PetsApp</a>
    </StartContent>
    <ItemTemplate Context="pet">
        <NavLink href="@($"/pet-detail/{pet.PetId}?ReturnUrl=%2Fpets-2")" class="nav-link">
            @pet.Name
        </NavLink>
    </ItemTemplate>
</TemplatedNavBar>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 1, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 2, Name = "Salem Saberhagen" },
        new Pet { PetId = 3, 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>

<TemplatedNavBar Items="pets">
    <StartContent>
        <a href="/" class="navbar-brand">PetsApp</a>
    </StartContent>
    <ItemTemplate>
        <NavLink href="@($"/pet-detail/{context.PetId}?ReturnUrl=%2Fpets-3")" class="nav-link">
            @context.Name
        </NavLink>
    </ItemTemplate>
</TemplatedNavBar>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 1, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 2, Name = "Salem Saberhagen" },
        new Pet { PetId = 3, 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>

<TemplatedNavBar Items="pets" Context="pet" TItem="Pet">
    <StartContent>
        <a href="/" class="navbar-brand">PetsApp</a>
    </StartContent>
    <ItemTemplate>
        <NavLink href="@($"/pet-detail/{pet.PetId}?ReturnUrl=%2Fpets-4")" class="nav-link">
            @pet.Name
        </NavLink>
    </ItemTemplate>
</TemplatedNavBar>

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

TemplatedNavBar コンポーネント (TemplatedNavBar.razor) で示されている例では、Items コレクションは最初のレンダリング後、変更されないものとします。または、変更された場合には、ItemTemplate で使用されるコンポーネント/要素の状態を維持する必要がないものとします。 このような使用が見込まれないテンプレート コンポーネントについては、「@key とのリレーションシップを保持する」セクションを参照してください。

@key とのリレーションシップを保持する

テンプレート コンポーネントは多くの場合、テーブルやリストなど、項目のコレクションのレンダリングに使用されます。 このような一般的なシナリオでは、ユーザーが項目テンプレート定義内のステートフルなコンポーネント/要素を回避することや、Items コレクションに追加の変更が加えられることがないことを想定できません。 このようなテンプレート コンポーネントの場合は、@key ディレクティブ属性とのリレーションシップを保持する必要があります。

注意

@key ディレクティブ属性の詳細については、「ASP.NET Core Blazor で要素、コンポーネント、モデルのリレーションシップを保持する」を参照してください。

次の TableTemplate コンポーネント (TableTemplate.razor) は、@keyとのリレーションシップを保持するテンプレート コンポーネントを示しています。

TableTemplate.razor:

@typeparam TItem

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

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

    [Parameter, EditorRequired]
    public RenderFragment<TItem> RowTemplate { get; set; } = default!;

    [Parameter, EditorRequired]
    public IReadOnlyList<TItem> Items { get; set; } = default!;
}

次の Pets5 コンポーネント (Pets5.razor) について考えてみましょう。これは、モデルのリレーションシップを保持するキー データの重要性を示しています。 このコンポーネントでは、OnAfterRenderAsync にペットを追加するたびに、Blazor で TableTemplate コンポーネントが再レンダリングされます。

Pets5.razor:

@page "/pets-5"

<PageTitle>Pets 5</PageTitle>

<h1>Pets Example 5</h1>

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


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

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Insert new pet every 5 seconds
        if (pets.Count < 10)
        {
            await Task.Delay(5000);
            pets.Insert(0, new Pet() { PetId = pets.Count + 1, Name = "<new pet>" });
            StateHasChanged();
        }
    }

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

このデモで次のことを行うことができます。

• レンダリングされた複数のテーブル行の中から <input> を選択する。
• pet コレクションの自動拡大時のページのフォーカスの動作を調べる。

@key コンポーネントで TableTemplate ディレクティブ属性を使用しない場合、ページのフォーカスはテーブルの同じインデックス位置 (行) に留まり、ペットが追加されるたびにフォーカスがシフトすることになります。 これを実際に確認するには、@key ディレクティブ属性と値を削除し、アプリを再起動して、項目の追加時にフィールド値の変更を試みます。

その他のリソース

• ASP.NET コア Blazor レンダリングパフォーマンスのベスト プラクティス
• ASP.NET Core Blazor で要素、コンポーネント、モデルのリレーションシップを保持する
• Blazor サンプル GitHub リポジトリ (dotnet/blazor-samples) (ダウンロード方法)