Blazor Tutorial 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.
