ASP.NET Core Blazor 樣板化元件

本文說明樣板化元件如何接受一或多個 UI 範本作為參數，然後將其用作元件轉譯邏輯的一部分。

樣板化元件

樣板化元件是接收一或多個 UI 範本作為參數的元件，可在元件的轉譯邏輯中使用。 藉由使用樣板化元件，您可建立更能重複使用的較高層級元件。 幾個範例包括：

• 資料表元件，可讓使用者指定資料表頁首、資料列和頁尾的範本。
• 清單元件，可讓使用者指定範本來轉譯清單中的項目。

樣板化元件是藉由指定類型為 RenderFragment 或 RenderFragment<TValue> 的一或多個元件參數來定義。 轉譯片段代表要轉譯的 UI 區段。 RenderFragment<TValue> 採用可在叫用轉譯片段時指定的型別參數。

注意

如需 RenderFragment 的詳細資訊，請參閱 ASP.NET Core Razor 元件。

樣板化元件通常會為泛型類型，如下列 TableTemplate 元件示範。 此範例中的泛型型別 <T> 用於轉譯 IReadOnlyList<T> 值，在此案例中，這是顯示寵物資料表的元件中的一系列寵物資料列。

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 是設定於 RowTemplate，而不是 TableTemplate：

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} 提供寵物值給範本，其中 {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) (如何下載)