Create product list page

In this tutorial, you will learn how to define your first reusable component to display a list of products.

• Initialize static data for product list.
• Create the product list component.
• Use product list component in another component.

You can download the example code used in this topic on GitHub.

Initialize static data for product list

As you just begin to learn Blazor Server, we will keep thing as simple as possible. All the data in this tutorial series are static. Before we begin to create the product list component, you need to define what is a product and have a list of product.

1. Create a new folder Models with the same level as wwwroot.

2. Create a new class Product.cs inside Models folder.

public class Product
{
    public Guid Id { get; set; }
    public string Name { get; set; } = "";
    public string Description { get; set; } = "";
    public double Price { get; set; }
}

3. Create a new folder Services with the same level as wwwroot.

4. Create a new class ProductProviderService.cs inside Services folder. This class will provide product data to the product list component we are going to create in the next section.

public static class ProductProviderService
{
    public static readonly ImmutableList<Product> Products = ImmutableList.CreateRange(new List<Product>()
    {
        new()
        {
            Id = Guid.NewGuid(),
            Name = "All roads lead to Blazor Server",
            Description = "A tutorial book for Blazor Server technology",
            Price = 70
        },
        new()
        {
            Id = Guid.NewGuid(),
            Name = "All roads lead to Blazor WASM",
            Description = "A tutorial book for Blazor WASM technology.",
            Price = 70
        },
        new()
        {
            Id = Guid.NewGuid(),
            Name = "gRPC for Blazor WASM",
            Description = "A tutorial book for developing a backend for Blazor WASM technology.",
            Price = 100
        }
    });
}

Create the product list component

We are going to build a reusable component. This component is used to display a list of product in the home page and checkout page. Because this component is used in several pages, we will put this component in the Shared folder and name it ProductList.razor.

Define the input

This is the first step when you create a new component, you need to define all the input of your component first to have the big picture about the component. We are going to need a product list and a boolean that indicates whether we should display the buy button in the component or not. Add the following code to the component code section.

@code {
    [EditorRequired]
    [Parameter]
    public List<Product> Products { get; set; } = new();
    [Parameter]
    public bool DisplayBuyButton { get; set; }
}

The Parameter attribute will mark its below property as an input of your component. In this example, we also use EditorRequired to demonstrate that you can have multiple attributes to a property, just like vanilla C#. The EditorRequired is a new feature in .NET 6 that will mark the property as required, if you don't pass a value to that property, Visual Studio will raise a compile error.

Define the UI

The component UI is created by HTML tag and C# expressions. Blazor uses @ symbol to transition from HTML to C#. Blazor evaluates C# expressions and renders them in the HTML output. Add the following to the component UI section (above code section).

@foreach (var product in Products)
{
    <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>
            @if (DisplayBuyButton)
            {
                <button class="btn btn-primary" type="button">Buy</button>
            }
        </div>
    </div>
}

Use product list component

In the previous section, you just created a product list component named ProductList.razor. In this section, we are going to use ProductList component in the Index component.

You first need to define which products are going to show. Add the following code to the code section of the Index component.

@code {
    public List<Product> Products { get; set; } = ProductProviderService.Products.ToList();
}

To render a component, you need to put its name inside a tag. For example: <ComponentName></ComponentName>. Add the following code to the component UI section (above code section) to render the ProductList component.

<ProductList Products="Products" DisplayBuyButton="true"></ProductList>

Run your project, and you will see the following result: