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 Add → Razor Component.

2. 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.

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"

3. Inject the HttpClient to fetch the product list.

@inject HttpClient Http

4. 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.

5. Define the UI of the product list page.

@foreach (var product in Products)
{
    <ProductDisplay Product="product"/>
}

You will have the following result: