Blazor - StateHasChanged not updating after Radzen Button OnClick

Question

In my Blazor server-side application, I have a component with a button that, when clicked, displays a "Loading" bar while I check to make sure a all of my required text fields are not blank.

<RadzenButton Shade="Shade.Dark" Click=@(args => OnClickSubmit()) Text="Submit Application" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Large" />

This leads into my Task OnClickSubmit that runs a StateHasChanged, then checks the applicable fields.

    private bool IsLoading = false;
    private bool errors = false;
    private string ErrorMessage = string.Empty;

    public async Task OnClickSubmit()
    {
        IsLoading = true;
        StateHasChanged();
        CheckFields();
        if (ErrorMessage == "")
        {
            //Success
        }
        else
        {
            errors = true;
    
        }
        IsLoading = false;
        StateHasChanged();
    }

    public void CheckFields()
    {
        ErrorMessage = "";
    
        //Check Basic Fields
        if(FirstName == "")
        {
            ErrorMessage = "First Name is required." + "\n";
        }
    
        if (LastName == "")
        {
            ErrorMessage = ErrorMessage +  "Last Name is required." + "\n";
        }
    }

But the page does not appear to be refreshing at all. I debugged my code, and everything appears to be populating and hitting where you'd expect. But the page itself just isn't display the loading, nor does it show my ErrorMessage that should now appear since my boolean is switched to true.

I run this same "loading" StateHasChanged process on firstRender, but I'm not sure why it doesn't appear to be working here. Any help would be appreciated.

Asif Rabbani · Accepted Answer · 2025-11-17 04:57:41Z

Currently your code is applying the UI update after the whole method is executed. Since the isLoading is setting false just before the execution is end and also for the first StateHaschanged() method, there is CheckFields(); which are synchronous. So executing everything together. Either you can make the CheckFields(); asynchronous and put await before that. Or you can await Task.Yield();

Solution 1:

public async Task OnClickSubmit()
{
        IsLoading = true;
        StateHasChanged();
        await CheckFields();
        if (ErrorMessage == "")
        {
            //Success
        }
        else
        {
            errors = true;
    
        }
        IsLoading = false;
        StateHasChanged();
}



Solution 2:

public async Task OnClickSubmit()
{
    IsLoading = true;
    StateHasChanged();
    await Task.Yield(); 
    CheckFields();

    if (string.IsNullOrEmpty(ErrorMessage))
    {
        // success
    }
    else
    {
        errors = true;
    }

    IsLoading = false;
    StateHasChanged();
}

Collectives™ on Stack Overflow

Blazor - StateHasChanged not updating after Radzen Button OnClick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related