Introduction To Templated Components In Blazor

Introduction

Just like modern client frameworks, such as Angular, Blazor also has components at its core. It uses the combination of Razor, HTML, and C# code as a component. A component is the base element of the Blazor application, i.e., every page is considered as a component in Blazor. Blazor uses the Razor template engine that generates HTML and serves to the web browsers. We can mix HTML and C# syntax in the Razor templates and Razor engine then compiles the Razor templates to generate the HTML.

Blazor (version 0.6.0) supports the templated component. It is a component which accepts one or more UI templates as parameters and these parameters can be used for component rendering. It allows us to write high-level reusable components. Using templated components, we can write a generic and more reusable component.

We can create the templated component by using one or more component parameters of type RenderFragment or RenderFragment<T>. The RenderFragment is a part of UI which is rendered by the component. It may have parameters that are used during the rendering of the component or while the RenderFragment is invoked.

Example

A ListView component allows us to define a template for rendering each item of the list. Similarly, we can create a template for the header, footer, and each row of a GridView component.

In the following example, I have created a templated component for the table (grid). Here, I have three fragments of the templated component - Header, Rows, and Footer. All these fragments are generated using the parameters. The parameters have the actual HTML and context data that need to be replaced during the generation of the HTML.

GridTemplate.cshtml

@typeparam TItem
<table border="1">
<thead>
<tr>@Header</tr>
</thead>
<tbody>
@foreach (var item in Items)
{
<tr>@Row(item)</tr>
}
</tbody>
<tfoot>
<tr>@Footer</tr>
</tfoot>
</table>
@functions {
[Parameter]
RenderFragment Header { get; set; }
[Parameter]
RenderFragment<TItem> Row { get; set; }
[Parameter]
RenderFragment Footer { get; set; }
[Parameter]
IReadOnlyList<TItem> Items { get; set; }
}

When we use a templated component in Blazor component, we can specify the template parameters using the child elements, however, the name of the template parameters must match with that of the child elements.

We can access the data that is passed by the template component (of type RenderFragment<T>) using "context" property.

example1.cshtml

@page "/"
@inject HttpClient Http
@using TemplatedComponents.Model
@if (data == null)
{
<p><em>Loading...Test</em></p>
}
else
{
<GridTemplate Items="@data">
<Header>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</Header>
<Row>
<td>@context.Id</td>
<td>@context.Name</td>
<td>@context.Description</td>
</Row>
<Footer>
<td colspan="3">This is a grid footer</td>
</Footer>
</GridTemplate>
}
@functions {
MyItems[] data;
protected override async Task OnInitAsync()
{
data = await Http.GetJsonAsync<MyItems[]>("sample-data/test.json");
}
}

The "context" parameter is the implicit parameter, however, we can change the parameter using the "Context" attribute on the templated component.

example1.cshtml

<GridTemplate Items="@data">
.....
....
<Row Context="test">
<td>@test.Id</td>
<td>@test.Name</td>
<td>@test.Description</td>
</Row>
....
....
</GridTemplate>

Alternatively, we can specify this attribute on the component element. So, this attribute applies to all specified template parameters.

example1.cshtml

<GridTemplate Items="@data" Context="test">
....
....
</GridTemplate>

The templated components are always generically typed. In the above example, the templated component can render as IEnumerable<T>. The directive @typeparam is used to specify type parameters.

GenericComponent.cshtml

@typeparam TItem
@foreach (var item in Items)
{
@ItemTemplate(item)
}
@functions {
[Parameter]
RenderFragment<TItem> ItemTemplate { get; set; }
[Parameter]
IReadOnlyList<TItem> Items { get; set; }
}

The parameter type can be identified when using generic-typed components. We can also explicitly specify a type using the attribute. Again, the name of the parameter must match.

Example2.cshtml

@page "/example2"
@inject HttpClient Http
@using TemplatedComponents.Model;
@if (data == null)
{
<p><em>Loading...Test</em></p>
}
else
{
<ui>
<GenericComponent Items="@data" TItem="MyItems">
<ItemTemplate>
<li>
@context.Name
</li>
</ItemTemplate>
</GenericComponent>
</ui>
}
@functions {
MyItems[] data;
protected override async Task OnInitAsync()
{
data = await Http.GetJsonAsync<MyItems[]>("sample-data/test.json");
}
}

Razor templates

We can also define the RenderFragment using Razor Template Syntax. We can use the Razor template to define RenderFragment and RenderFragment<T> values. The templated components can be rendered either using a Razor template with an argument or directly.

Example3.cshtml

@page "/example3"
@inject HttpClient Http
@using TemplatedComponents.Model;
@{
RenderFragment template = @<p>Hello C# Corner Reader!</p>;
RenderFragment<MyItems> ItemTemplate = (item) => @<li>@item.Name.</li>;
}
@if (data == null)
{
<p><em>Loading...Test</em></p>
}
else
{
@template
<ul>
@foreach (var item in data)
{
@ItemTemplate(item)
}
</ul>
}
@functions {
MyItems[] data;
protected override async Task OnInitAsync()
{
data = await Http.GetJsonAsync<MyItems[]>("sample-data/test.json");
}
}

Summary

The templated components are supported by Blazor. It is a component which accepts one or more UI templates as parameters and these parameters can be used for component rendering. It allows us to write high-level reusable components. Using a templated component, we can write the generic or more reusable component.

You can view or download the source code from the GitHub link here.