Blazor doesn't rerender to show my object

Question

I just started a new blazor project (WASM, not Server) to learn how it works, so excuse my ignorance if it seems like I'm doing something silly.

Using .NET 5

The page is supposed to make a call to a locally hosted API (which I have checked works) and then display the information it gets on the page I'm loading. Reading documentation and the Blazor component life cycle shows that using OnInitializedAsync() might be my best bet, because I want to do the call, but without blocking the webpage and seeing as I am using a ParameterAttribute here, I'd need to wait until the parameter is bound first (to my understanding at least).

What I get is that after the call is done, it should cause the page to re-render, showing off my objects info on the page.

Here is my GameDetails.razor file:

@page "/gamedetails/{gameId:int}"
@inject HttpClient HttpClient
@inject NavigationManager NavManager

<h1>Game Details</h1>

@if (_game != null)
{
    <p>
        Id: @_game.Id<br />
        Title: @_game.Title<br />
        Year: @_game.Year<br />
        Developer: @_game.Developer<br />
        Publisher: @_game.Publisher<br />
        Region: @_game.Region<br />
        Region Code: @_game.ShortRegion <br />
        Keymaps: @_game.KeyMaps
    </p>
}

@code {
    [ParameterAttribute]
    public int gameId { get; set; }

    private GameSearchResult _game;

    protected override async Task OnInitializedAsync()
    {
        string url = $"Mappings?gameId={gameId}";
        _game = await HttpClient.GetFromJsonAsync<GameSearchResult>(url, new JsonSerializerOptions()
        {
            PropertyNamingPolicy = JsonNamingPolicy.CamelCase
        });
    }
}

What's supposed to happen is that you click a card on a different page, which then Navigates you to this page, which then requests information from the API to show on the page.

What actually happens is that the page loads, but none of my information is shown. I have debugged and seen that the information is retrieved successfully and stored in my GameSearchResult object called _game, so my guess is that the page is not rerendered as I'd have thought it should be.

I have tried to call StateHasChanged() as some has suggested elsewhere to try and force the re-render, but still nothing.

What should I do instead to get the wanted behaviour? I can accept that the whole call is Synchronous too, it doesn't bother me.

Neil W Neil W · Accepted Answer · 2021-08-05T14:49:58

Firstly, OnInitializedAsync will only run once per page component during an application lifetime, so is not a good place to respond to parameter changes.

see: https://blazor-university.com/components/component-lifecycles/

Secondly, try changing that [ParameterAttribute] to [Parameter]

[Parameter]
public int gameId { get; set; }

protected override async Task OnParametersSetAsync()
{
    string url = $"Mappings?gameId={gameId}";
    _game = await HttpClient.GetFromJsonAsync<GameSearchResult>(url, new JsonSerializerOptions()
    {
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase
    });
}

Blazor doesn't rerender to show my object

1 Answers