Create product list page
This tutorial is a continuation of the previous tutorial. You are going to learn to define your very first component and reuse it. In this tutorial:
- Create the product component.
- Create the product list page.
You can download the example code used in this topic on GitHub.
Create the product component
The product component is responsible for rendering a single product UI. This component will later be reused in the product list page to render a list of products. First, create the Product
model as follows:
public class Product
{
public Guid Id { get; set; }
public string Name { get; set; } = "";
public string Description { get; set; } = "";
public double Price { get; set; }
}
Then create a new Razor Component. Follow the following steps to create a Razor Component:
- Right-click on the Shared folder. Select Add → Razor Component.

- Name your component as ProductDisplay and then click Add.

Once you created the ProductDisplay component, define a parameter to the component. Component parameters are the input data, the component will process those input data accordingly.
...
@code {
[EditorRequired]
[Parameter]
public Product Product { get; set; } = new();
}
The [Parameter]
attribute will mark the property as a parameter of the component. The [EditorRequired]
will enforce whenever this component is used, the component user must provide the Product
parameter data.
Define the UI of the component as follows:
<div class="card w-25">
<div class="card-body">
<h5 class="card-title">@Product.Name</h5>
<p class="card-text">@Product.Description</p>
<blockquote class="card-text">$@Product.Price</blockquote>
</div>
</div>
@code
{
...
}
Create the product list page
The product list page component is responsible for displaying a list of products. The end user will see and interact directly with this component.
- Create a new component with the name ProductList.razor.
- Enable the end user to navigate to the component. Add
@page
at the top of the component as follows:
@page "/product-list"
- Inject the HttpClient to fetch the product list.
@inject HttpClient Http
- Declare the product list and fetch the data.
@code {
public List<Product> Products { get; set; } = new();
protected override async Task OnInitializedAsync()
{
Products = await Http.GetFromJsonAsync<List<Product>>("sample-data/products.json") ?? new();
}
}
Blazor WebAssembly is only the frontend. The product.json is a simulate of data of an API.
- Define the UI of the product list page.
@foreach (var product in Products)
{
<ProductDisplay Product="product"/>
}
You will have the following result:

The Blazor .NET 6 Fundamentals book are available in ebook and paperback!