Schroeder Consulting LLC

This article is part 1 of a series on a portfolio Blazor Music Store. It uses MudBlazor. It is a recreation of the old MVC Music store. Users can browse items in the store depending of the genre they select from the side menu. Once an item is select, it can be added to a cart. Only one item can be added a one time. The logic for the cart is the same as my blog https://schroeder-consulting-llc.com/2025/06/12/update-a-component-from-a-page-in-blazor/

This article discuss the ways data is communicated from one component to another.

One way to do this is to use routing. To display albums for a genre, the store page needs the Genre as a parameter:

    [Parameter]
    public string Genre { get; set; }

This is achieved using routing:

@page "/store/{genre}"

The content of the store component needs to changed for each change of genre. The albums for the genre cannot be specified in OnInitialzed otherwise they will not change. Instead they need to be specified in OnParameterSetAsync.

 protected override async Task OnParametersSetAsync()
 {
     albumsForGenre = await storeService.Browse(Genre);

 }

The Home page displays the top 5 selling albums. The Store shows also displays albums. To resuse code, both use an album component. The album needs to be passed from the page to the component. The album component expects a parameter album. Here is the album component.

    <a href="@link">

        <MudImage Fluid="true" Src="@album.AlbumArtUrl" Alt="@album.Title" ObjectFit="ObjectFit.Cover"/>
        <MudText Typo="Typo.subtitle1" Class="album-list">@album.Title</MudText>
    </a>
@code{
    [Parameter]
    public Album ThisAlbum { get; set; }

    Album? album;
    public string link;
    protected override void OnInitialized()
    {
          album = ThisAlbum;
          link = $"/details/{album.AlbumId}";
    }
}

The page uses an attribute “ThisAlbum” in an album component which renders the album information

Here is Home.razor which uses album components

    <MudGrid Justify="Justify.Center" Spacing="10">
        @foreach (var a in topSellingAlbums)
        {
            <MudItem xs="2">
                <AlbumComponent ThisAlbum="a"></AlbumComponent>
            </MudItem>
        }
    </MudGrid>

This article shows how to pass a parameter to a page using routing. It also shows how to use an attribute to pass information from one component to another.