Blazor Refresh UI Manually

By default, Blazor detects a necessary UI refresh automatically in many scenarios like button click etc. However, there are situations in which you want to trigger a UI refresh manually by using the BlazorComponent.StateHasChanged method.

In the following sample, it changes the application's state using a timer.

@page "/refresh-ui-manually"
@using System.Threading;

<h1>@Count</h1>

<button onclick=@StartCountdown>Start Countdown</button>

@functions {
    private int Count { get; set; } = 10;

    void StartCountdown()
    {
        var timer = new Timer(new TimerCallback(_ =>
        {
            if (Count <= 0) return;
            Count--;

            // Note that the following line is necessary because otherwise
            // Blazor would not recognize the state change and not refresh the UI
            this.StateHasChanged();
        }), null, 1000, 1000);
    }
}

It will start the count down when you click on Start Countdown button.