| title | author | description | monikerRange | ms.author | ms.custom | ms.date | uid |
|---|---|---|---|---|---|---|---|
ASP.NET Core Blazor templated components |
guardrex |
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. |
>= aspnetcore-3.1 |
riande |
mvc |
11/08/2022 |
blazor/components/templated-components |
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.
:::moniker range=">= aspnetcore-7.0"
Templated components are components that accept one or more UI templates as parameters, which can then be used as part of the component's rendering logic. Templated components allow you to author higher-level components that are more reusable than regular components. A couple of examples include:
- 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.
Note
For more information on xref:Microsoft.AspNetCore.Components.RenderFragment, see xref:blazor/components/index#child-content-render-fragments.
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.
Shared/TableTemplate.razor:
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Shared/templated-components/TableTemplate.razor":::
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.
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.
Pages/Pets1.razor:
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/templated-components/Pets1.razor":::
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:
Pages/Pets2.razor:
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/templated-components/Pets2.razor" highlight="10":::
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:
Pages/Pets3.razor:
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/templated-components/Pets3.razor" highlight="11-12":::
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:
Pages/Pets4.razor:
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/templated-components/Pets4.razor" highlight="5":::
- xref:blazor/performance#define-reusable-renderfragments-in-code
- Blazor samples GitHub repository (
dotnet/blazor-samples)
:::moniker-end
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0"
Templated components are components that accept one or more UI templates as parameters, which can then be used as part of the component's rendering logic. Templated components allow you to author higher-level components that are more reusable than regular components. A couple of examples include:
- 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.
Note
For more information on xref:Microsoft.AspNetCore.Components.RenderFragment, see xref:blazor/components/index#child-content-render-fragments.
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.
Shared/TableTemplate.razor:
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Shared/templated-components/TableTemplate.razor":::
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.
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.
Pages/Pets1.razor:
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/templated-components/Pets1.razor":::
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:
Pages/Pets2.razor:
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/templated-components/Pets2.razor" highlight="10":::
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:
Pages/Pets3.razor:
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/templated-components/Pets3.razor" highlight="11-12":::
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:
Pages/Pets4.razor:
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/templated-components/Pets4.razor" highlight="5":::
- xref:blazor/performance#define-reusable-renderfragments-in-code
- Blazor samples GitHub repository (
dotnet/blazor-samples)
:::moniker-end
:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0"
Templated components are components that accept one or more UI templates as parameters, which can then be used as part of the component's rendering logic. Templated components allow you to author higher-level components that are more reusable than regular components. A couple of examples include:
- 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.
Note
For more information on xref:Microsoft.AspNetCore.Components.RenderFragment, see xref:blazor/components/index#child-content-render-fragments.
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.
Shared/TableTemplate.razor:
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Shared/templated-components/TableTemplate.razor":::
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.
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.
Pages/Pets1.razor:
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/templated-components/Pets1.razor":::
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:
Pages/Pets2.razor:
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/templated-components/Pets2.razor" highlight="10":::
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:
Pages/Pets3.razor:
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/templated-components/Pets3.razor" highlight="11-12":::
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:
Pages/Pets4.razor:
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/templated-components/Pets4.razor" highlight="5":::
- xref:blazor/performance#define-reusable-renderfragments-in-code
- Blazor samples GitHub repository (
dotnet/blazor-samples)
:::moniker-end
:::moniker range="< aspnetcore-5.0"
Templated components are components that accept one or more UI templates as parameters, which can then be used as part of the component's rendering logic. Templated components allow you to author higher-level components that are more reusable than regular components. A couple of examples include:
- 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.
Note
For more information on xref:Microsoft.AspNetCore.Components.RenderFragment, see xref:blazor/components/index#child-content-render-fragments.
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.
Shared/TableTemplate.razor:
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Shared/templated-components/TableTemplate.razor":::
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.
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.
Pages/Pets1.razor:
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/templated-components/Pets1.razor":::
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:
Pages/Pets2.razor:
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/templated-components/Pets2.razor" highlight="10":::
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:
Pages/Pets3.razor:
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/templated-components/Pets3.razor" highlight="11-12":::
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:
Pages/Pets4.razor:
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/templated-components/Pets4.razor" highlight="5":::
- xref:blazor/performance#define-reusable-renderfragments-in-code
- xref:blazor/components/index#generic-type-parameter-support
- Blazor samples GitHub repository (
dotnet/blazor-samples)
:::moniker-end