Canceling background tasks when a user navigates away from a Blazor component

  • Gérald Barré

In an application, you don't want to waste resources. When an ongoing operation is not needed anymore, you should cancel it. For instance, if your application downloads data to show them in a view, and the user navigates away from this view, you should cancel the download.

In a .NET application, the way to cancel operation is to use a CancellationToken. You can create a CancellationToken using the CancellationTokenSource. Once the Blazor component is removed from the page, you can call the Cancel method to stop the ongoing operations.

According to the Blazor component lifecycle, you can call the Cancel method in the IDisposable.Dispose() method.

@page "/fetchdata"
@using System.Threading
@implements IDisposable
@inject HttpClient Http

... todo content

@code {
    // 👇 Create the CancellationTokenSource
    private CancellationTokenSource cts = new CancellationTokenSource();
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        // 👇 Use the CancellationToken for the http call using cts.Token
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json", cts.Token);
    }

     // 👇 Cancel the token
    public void Dispose()
    {
        cts.Cancel();
        cts.Dispose();
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

Do you have a question or a suggestion about this post? Contact me!

Follow me:
Enjoy this blog?Buy Me A Coffee