ASP.NET Core Blazor komponenty se šablonami

Článek
11/10/2021
5 min ke čtení

Komponenty se šablonami jsou komponenty, které přijímají jednu nebo více šablon uživatelského rozhraní jako parametry, které lze poté použít jako součást logiky vykreslování komponenty. Komponenty založené na šablonách umožňují vytvářet komponenty vyšší úrovně, které jsou opakovaně použitelné než běžné součásti. Mezi několik příkladů patří:

Tabulková komponenta, která uživateli umožňuje zadat šablony pro záhlaví, řádky a zápatí tabulky.
Komponenta seznamu, která umožňuje uživateli určit šablonu pro vykreslování položek v seznamu.

Komponenta se šablonou je definována zadáním jednoho nebo více parametrů součásti typu RenderFragment nebo RenderFragment<TValue> . Fragment vykreslování představuje segment uživatelského rozhraní, které se má vykreslit. RenderFragment<TValue> převezme parametr typu, který lze zadat při vyvolání fragmentu vykreslování.

Často používané komponenty šablon jsou obecně typované, jak TableTemplate ukazuje následující komponenta. Obecný typ <T> v tomto příkladu se používá k vykreslování IReadOnlyList<T> hodnot, což je v tomto případě řada domácích řádků v komponentě, která zobrazuje tabulku domácích.

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

Při použití komponenty se šablonou lze parametry šablony zadat pomocí podřízených prvků, které odpovídají názvům parametrů. V následujícím příkladu <TableHeader>...</TableHeader> a <RowTemplate>...<RowTemplate> Zadejte RenderFragment<TValue> šablony pro TableHeader a RowTemplate TableTemplate součásti.

Určete Context atribut prvku komponenty, pokud chcete zadat název parametru obsahu pro implicitní podřízený obsah (bez nutnosti zalamování podřízeného elementu). V následujícím příkladu se Context atribut zobrazí na TableTemplate elementu a vztahuje se na všechny RenderFragment<TValue> parametry šablony.

Pages/Pets1.razor:

@page "/pets1"

<h1>Pets</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; }
    }
}

Alternativně můžete změnit název parametru pomocí Context atributu u RenderFragment<TValue> podřízeného elementu. V následujícím příkladu Context je nastavena na RowTemplate místo TableTemplate :

Pages/Pets2.razor:

@page "/pets2"

<h1>Pets</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; }
    }
}

Argumenty součásti typu RenderFragment<TValue> mají implicitní parametr s názvem context , který lze použít. V následujícím příkladu Context není nastavena. @context.{PROPERTY} dodává hodnoty pro PET do šablony, kde {PROPERTY} je Pet vlastnost:

Pages/Pets3.razor:

@page "/pets3"

<h1>Pets</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; }
    }
}

Pokud používáte komponenty s obecným typem, je parametr typu odvozený, pokud je to možné. Můžete však explicitně zadat typ s atributem, který má název odpovídající parametru typu, který je TItem v předchozím příkladu:

Pages/Pets4.razor:

@page "/pets4"

<h1>Pets</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; }
    }
}

Odvodit obecné typy založené na komponentách předchůdce

Komponenta předchůdce může být kaskádovitě zapsána parametrem typu podle názvu na následníky pomocí [CascadingTypeParameter] atributu. Tento atribut umožňuje odvození obecného typu pro použití zadaného parametru typu automaticky s následníky, které mají parametr typu se stejným názvem.

Například následující Chart komponenta obdrží burzovní data a zachová parametr obecného typu s názvem TLineData na jeho podřízené komponenty.

Shared/Chart.razor:

@attribute [CascadingTypeParameter(nameof(TLineData))]
@typeparam TLineData

...

@code {
    [Parameter]
    public IEnumerable<TLineData> Data { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

Shared/Line.razor:

@typeparam TLineData

...

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public decimal Value { get; set; }
}

Při Chart použití komponenty TLineData není určena pro každou Line komponentu grafu.

Pages/StockPriceHistory.razor:

@page "/stock-price-history"

<Chart Data="stockPriceHistory.GroupBy(x => x.Date)">
    <Line Title="Open" Value="day => day.Values.First()" />
    <Line Title="High" Value="day => day.Values.Max()" />
    <Line Title="Low" Value="day => day.Values.Min()" />
    <Line Title="Close" Value="day => day.Values.Last()" />
</Chart>

Poznámka

Razorpodpora v Visual Studio Code nebyla aktualizována, aby podporovala tuto funkci, takže se můžete setkat s nesprávnými chybami, i když projekt správně sestaví. Tato akce bude řešena v nadcházející verzi nástrojů.

Přidáním @attribute [CascadingTypeParameter(...)] do komponenty je zadaný argument obecného typu automaticky používán následníky, které:

Jsou vnořené jako podřízený obsah pro komponentu ve stejném .razor dokumentu.
Deklarovat také @typeparam s přesným názvem.
Pro parametr typu není zadána ani odvozena jiná hodnota. Pokud je dodána nebo odvozena jiná hodnota, má přednost před kaskádovým obecným typem.

Při přijímání kaskádového parametru typu komponenty Získá hodnotu parametru z nejbližšího předchůdce, který má CascadingTypeParameterAttribute s odpovídajícím názvem. Kaskádové parametry obecného typu jsou přepsány v rámci konkrétního podstromu.

Shoda se provádí jenom podle názvu. Proto doporučujeme vyhnout se kaskádovým parametrům obecného typu s obecným názvem, například T nebo TItem . Pokud se vývojář výslovný do kaskády parametru typu, implicitně vyslibuje, že jeho název je dostatečně jedinečný a není v konfliktu s jinými parametry kaskádového typu z nesouvisejících komponent.

Podporují se obecné typy s where omezeními typu:

@typeparam TEntity where TEntity : IEntity

Další informace najdete v následujících článcích:

Další zdroje informací

BlazorASP.NET Core osvědčené postupy z oblasti výkonu

Tabulková komponenta, která uživateli umožňuje zadat šablony pro záhlaví, řádky a zápatí tabulky.
Komponenta seznamu, která umožňuje uživateli určit šablonu pro vykreslování položek v seznamu.

Shared/TableTemplate.razor:

@typeparam TItem

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

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

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

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

Pages/Pets1.razor:

@page "/pets1"

<h1>Pets</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; }
    }
}

Pages/Pets2.razor:

@page "/pets2"

<h1>Pets</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; }
    }
}

Pages/Pets3.razor:

@page "/pets3"

<h1>Pets</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; }
    }
}

Pages/Pets4.razor:

@page "/pets4"

<h1>Pets</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; }
    }
}

Další zdroje informací

BlazorASP.NET Core osvědčené postupy z oblasti výkonu

Tabulková komponenta, která uživateli umožňuje zadat šablony pro záhlaví, řádky a zápatí tabulky.
Komponenta seznamu, která umožňuje uživateli určit šablonu pro vykreslování položek v seznamu.

Shared/TableTemplate.razor:

@typeparam TItem

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

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

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

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

Pages/Pets1.razor:

@page "/pets1"

<h1>Pets</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 List<Pet>
    {
        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; }
    }
}

Pages/Pets2.razor:

@page "/pets2"

<h1>Pets</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 List<Pet>
    {
        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; }
    }
}

Pages/Pets3.razor:

@page "/pets3"

<h1>Pets</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 List<Pet>
    {
        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; }
    }
}

Pages/Pets4.razor:

@page "/pets4"

<h1>Pets</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 List<Pet>
    {
        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; }
    }
}

Další materiály

BlazorASP.NET Core osvědčené postupy z oblasti výkonu

ASP.NET Core Blazor komponenty se šablonami

Ohodnoťte vaše zkušenosti

Odvodit obecné typy založené na komponentách předchůdce

Další zdroje informací

Další zdroje informací

Další materiály