CODEWITHSUNDEEP
c#blazorblazor-server-side
WSC
WSC

Reputation: 992

Bound variable not displaying new value in UI

I have this code in my page:

@if (players == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <p>Number of Players: @players.Count</p>
    <p>Number of Teams: @teamsCount</p>
    <p>Excess Players: @excessPlayers</p>
}
@code {
    private List<PlayerModel> players;
    private int teamsCount { get; set; }
    private int excessPlayers { get; set; }

    protected override async Task OnInitializedAsync()
    {
        players = await _db.GetPlayers();

        int teamsCount = players.Count / 5;
        int excessPlayers = players.Count % 5;
    }

The loading html is displayed correctly for a time and then players.Count is correctly updating and showing 41, but teamsCount and excessPlayers always display 0.

I have tried calling StateHasChanged() at the end of OnInitializedAsync().

I have also tried setting teamsCount and excessPlayers in a separate method and calling StateHasChanged() but neither of those worked. Both teamsCount and excessPlayers still remain displayed as 0, although I can see that in the code they are 8 and 1 respectively, which is correct.

What am I doing wrong?

Upvotes: 0

Views: 61

Answers (1)

Lex
Lex

Reputation: 7194

You are creating new local variables for teamsCount and excessPlayers in your OnInitializedAsync method:

protected override async Task OnInitializedAsync()
{
    players = await _db.GetPlayers();

    int teamsCount = players.Count / 5;
    int excessPlayers = players.Count % 5;
}

You should be setting the values of your properties instead:

protected override async Task OnInitializedAsync()
{
    players = await _db.GetPlayers();

    teamsCount = players.Count / 5;
    excessPlayers = players.Count % 5;
}

Upvotes: 2

Related Questions