2021-08-09 03:43:46 +08:00
---
title: ASP.NET Core Blazor templated components
author: guardrex
description: Learn how templated components can accept one or more UI templates as parameters, which can then be used as part of the component's rendering logic.
monikerRange: '>= aspnetcore-3.1'
ms.author: riande
ms.custom: mvc
2024-02-09 22:10:03 +08:00
ms.date: 02/09/2024
2021-08-09 03:43:46 +08:00
uid: blazor/components/templated-components
---
# ASP.NET Core Blazor templated components
2023-04-05 09:42:31 +08:00
[!INCLUDE[ ](~/includes/not-latest-version.md )]
2023-04-04 23:06:06 +08:00
2023-12-20 23:39:31 +08:00
This article explains how templated components can accept one or more UI templates as parameters, which can then be used as part of the component's rendering logic.
## Templated components
2023-05-31 04:13:08 +08:00
Templated components are components that receive one or more UI templates as parameters, which can be utilized in the rendering logic of the component. By using templated components, you can create higher-level components that are more reusable. A couple of examples include:
2021-08-09 03:43:46 +08:00
* A table component that allows a user to specify templates for the table's header, rows, and footer.
* A list component that allows a user to specify a template for rendering items in a list.
A templated component is defined by specifying one or more component parameters of type < xref:Microsoft.AspNetCore.Components.RenderFragment > or < xref:Microsoft.AspNetCore.Components.RenderFragment % 601 > . A render fragment represents a segment of UI to render. < xref:Microsoft.AspNetCore.Components.RenderFragment % 601 > takes a type parameter that can be specified when the render fragment is invoked.
2022-06-02 20:27:17 +08:00
> [!NOTE]
> For more information on <xref:Microsoft.AspNetCore.Components.RenderFragment>, see <xref:blazor/components/index#child-content-render-fragments>.
2021-08-09 03:43:46 +08:00
Often, templated components are generically typed, as the following `TableTemplate` component demonstrates. The generic type `<T>` in this example is used to render `IReadOnlyList<T>` values, which in this case is a series of pet rows in a component that displays a table of pets.
2023-08-07 22:59:26 +08:00
`TableTemplate.razor` :
2021-08-09 03:43:46 +08:00
2023-12-20 01:26:28 +08:00
:::moniker range=">= aspnetcore-8.0"
:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/TableTemplate.razor":::
:::moniker-end
:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0 "
2023-05-05 23:16:40 +08:00
2022-11-09 00:43:50 +08:00
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Shared/templated-components/TableTemplate.razor":::
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Shared/templated-components/TableTemplate.razor":::
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Shared/templated-components/TableTemplate.razor":::
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range="< aspnetcore-5.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Shared/templated-components/TableTemplate.razor":::
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
When using a templated component, the template parameters can be specified using child elements that match the names of the parameters. In the following example, `<TableHeader>...</TableHeader>` and `<RowTemplate>...<RowTemplate>` supply < xref:Microsoft.AspNetCore.Components.RenderFragment % 601 > templates for `TableHeader` and `RowTemplate` of the `TableTemplate` component.
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
Specify the `Context` attribute on the component element when you want to specify the content parameter name for implicit child content (without any wrapping child element). In the following example, the `Context` attribute appears on the `TableTemplate` element and applies to all < xref:Microsoft.AspNetCore.Components.RenderFragment % 601 > template parameters.
2021-08-09 03:43:46 +08:00
2023-08-07 22:59:26 +08:00
`Pets1.razor` :
2021-08-09 03:43:46 +08:00
2023-12-20 01:26:28 +08:00
:::moniker range=">= aspnetcore-8.0"
:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/Pets1.razor":::
:::moniker-end
:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/templated-components/Pets1.razor":::
2021-08-09 03:43:46 +08:00
2022-01-15 01:31:33 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2022-11-09 00:43:50 +08:00
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/templated-components/Pets1.razor":::
2022-06-02 20:27:17 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/templated-components/Pets1.razor":::
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range="< aspnetcore-5.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/templated-components/Pets1.razor":::
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
Alternatively, you can change the parameter name using the `Context` attribute on the < xref:Microsoft.AspNetCore.Components.RenderFragment % 601 > child element. In the following example, the `Context` is set on `RowTemplate` rather than `TableTemplate` :
2023-08-07 22:59:26 +08:00
`Pets2.razor` :
2021-08-09 03:43:46 +08:00
2023-12-20 01:26:28 +08:00
:::moniker range=">= aspnetcore-8.0"
:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/Pets2.razor":::
:::moniker-end
:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/templated-components/Pets2.razor" highlight="10":::
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/templated-components/Pets2.razor" highlight="10":::
2021-08-09 03:43:46 +08:00
2022-01-15 01:31:33 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2022-11-09 00:43:50 +08:00
:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/templated-components/Pets2.razor" highlight="10":::
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range="< aspnetcore-5.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/templated-components/Pets2.razor" highlight="10":::
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
Component arguments of type < xref:Microsoft.AspNetCore.Components.RenderFragment % 601 > have an implicit parameter named `context` , which can be used. In the following example, `Context` isn't set. `@context.{PROPERTY}` supplies pet values to the template, where `{PROPERTY}` is a `Pet` property:
2023-08-07 22:59:26 +08:00
`Pets3.razor` :
2021-08-09 03:43:46 +08:00
2023-12-20 01:26:28 +08:00
:::moniker range=">= aspnetcore-8.0"
:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/Pets3.razor":::
:::moniker-end
:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/templated-components/Pets3.razor" highlight="11-12":::
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0 "
2021-08-09 03:43:46 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/templated-components/Pets3.razor" highlight="11-12":::
2021-08-09 03:43:46 +08:00
2022-01-15 01:31:33 +08:00
:::moniker-end
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0 "
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/templated-components/Pets3.razor" highlight="11-12":::
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range="< aspnetcore-5.0 "
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/templated-components/Pets3.razor" highlight="11-12":::
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
When using generic-typed components, the type parameter is inferred if possible. However, you can explicitly specify the type with an attribute that has a name matching the type parameter, which is `TItem` in the preceding example:
2022-07-27 16:10:47 +08:00
2023-08-07 22:59:26 +08:00
`Pets4.razor` :
2022-07-27 16:10:47 +08:00
2023-12-20 01:26:28 +08:00
:::moniker range=">= aspnetcore-8.0"
:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/Pets4.razor":::
:::moniker-end
:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0 "
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/templated-components/Pets4.razor" highlight="5":::
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0 "
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/templated-components/Pets4.razor" highlight="5":::
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0 "
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/templated-components/Pets4.razor" highlight="5":::
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker range="< aspnetcore-5.0 "
2022-07-27 16:10:47 +08:00
2022-11-09 00:43:50 +08:00
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/templated-components/Pets4.razor" highlight="5":::
2022-07-27 16:10:47 +08:00
2023-05-05 23:16:40 +08:00
:::moniker-end
2022-07-27 16:10:47 +08:00
## Additional resources
* < xref:blazor / performance # define-reusable-renderfragments-in-code >
2024-03-06 06:01:11 +08:00
* [Blazor samples GitHub repository (`dotnet/blazor-samples`) ](https://github.com/dotnet/blazor-samples ) ([how to download](xref:blazor/fundamentals/index#sample-apps))