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:
You can download the example code used in this topic on GitHub.
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:
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 { ... }
The product list page component is responsible for displaying a list of products. The end user will see and interact directly with this component.
@page
at the top of the component as follows:@page "/product-list"
@inject HttpClient Http
@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.
@foreach (var product in Products) { <ProductDisplay Product="product"/> }
You will have the following result: