StateHasChanged() does not reload page

Issue:

As mentioned in Title, StateHasChanged does not re-render the page

Objective:

I want to Refresh the page when a button is clicked

Current Code

<button @onclick="CreatePlayer">Create User</button>


@functions {
string username;

[CascadingParameter]
Task<AuthenticationState> authenticationStateTask { get; set; }

async Task CreatePlayer()
{
    var authState = await authenticationStateTask;
    var user = authState.User;
    var player = await PlayerData.GetByEmail(user.Identity.Name);

    if (player == null)
    {
        player = new Player()
        {
            Email = user.Identity.Name,
            UserName = username
        };

        await PlayerData.Create(player);
    }

    await Task.Delay(50);
    StateHasChanged();

}
}

Solution

On the one hand, you tell the compiler that she should create an event handler for the click event, named CreatePlayer: @onclick="CreatePlayer . This attribute compiler directive, behind the scenes, creates an EventCallback<Task> handler for you, the implication of which is that you do not need to use StateHasChanged in your code at all, as this method ( StateHasChanged ) is automatically called after UI events take place.

On the other hand, you tell the compiler that the type of the button should be set to "submit". This is wrong of course... You can't have it both. Setting the type attribute to "submit", normally submit form data to the server, but In Blazor it is prevented to work that way by code in the JavaScript portion of Blazor. Do you want to submit a form data to the server ? Always recall Blazor is an SPA Application. No submit ?

Your code should be:

<button @onclick="CreatePlayer" >Create User</button>

Just for the records, ordinarily you should inject the AuthenticationStateProvider object into your components, like this:

@inject AuthenticationStateProvider AuthenticationStateProvider

and then retrieve the AuthenticationState object. This is how your code may be rewritten:

var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        var user = authState.User;