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:

  1. Right-click on the Shared folder. Select AddRazor Component.

add-razor-component-step1.png

  1. Name your component as ProductDisplay and then click Add.

add-razor-component-step2.png

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.

  1. Create a new component with the name ProductList.razor.
  2. Enable the end user to navigate to the component. Add @page at the top of the component as follows:
@page "/product-list"
  1. Inject the HttpClient to fetch the product list.
@inject HttpClient Http
  1. 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.
  1. Define the UI of the product list page.
@foreach (var product in Products)
{
    <ProductDisplay Product="product"/>
}

You will have the following result:

product-list-page-result.png

BLAZOR SCHOOL
Designed and built with care by our dedicated team, with contributions from a supportive community. We strive to provide the best learning experience for our users.
Docs licensed CC-BY-SA-4.0
Copyright © 2021-2025 Blazor School
An unhandled error has occurred. Reload 🗙