Blazor FAQ - Web API

The background long-running tasks are cancelled by using the CancellationToken object in Blazor. If an application downloads the data to render in view and then you navigate to another page, the CancellationToken cancels the download by using the Cancel() method. Call the Cancel()  method by using the Dispose() method to cancel the background running task.

In the following example, the background running task in the FetchData.razor component is cancelled when a user navigates to other pages in Blazor.
[FetchData.razor]

@page "/fetchdata" 
<PageTitle>Weather forecast</PageTitle> 
@using BlazorServerApp.Data 
@using System.Threading 
@implements IDisposable 
@using System.Net.Http 
@inject WeatherForecastService ForecastService 

<h1>Weather forecast</h1> 
<p>This component demonstrates fetching data from a service.</p> 
@if (forecasts == null) 
{ 
    <p><em>Loading...</em></p> 
} 
else 
{ 
    <table class="table"> 
        <thead> 
            <tr> 
                <th>Date</th> 
                <th>Temp. (C)</th> 
                <th>Temp. (F)</th> 
                <th>Summary</th> 
            </tr> 
        </thead> 
        <tbody> 
            @foreach (var forecast in forecasts) 
            { 
                <tr> 
                    <td>@forecast.Date.ToShortDateString()</td> 
                    <td>@forecast.TemperatureC</td> 
                    <td>@forecast.TemperatureF</td> 
                    <td>@forecast.Summary</td> 
                </tr> 
            } 
        </tbody> 
    </table> 
} 

@code { 
    private WeatherForecast[]? forecasts; 
    private readonly HttpClient httpClient = new HttpClient(); 
    private CancellationTokenSource? cancellationToken; 
    protected override async Task OnInitializedAsync () 
    { 
        cancellationToken = new CancellationTokenSource(); 
        try 
        { 
            forecasts = await httpClient.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json", cancellationToken.Token); 
        } 
        catch (OperationCanceledException) 
        { 
            // Task was cancelled 
        } 
    } 

    public void Dispose () 
    { 
        cancellationToken?.Cancel(); 
        cancellationToken?.Dispose(); 
    } 
} 

Refer to this documentation for more details.

To read a JSON file in Blazor WebAssembly, you can utilize the HttpClient class along with the GetFromJsonAsync() method.  

Follow these steps to achieve that: 

To proceed, create or load a JSON file in the wwwroot folder. As an example, I have created a basic employee.json file and will read its values within a Razor component. 

[wwwroot/employee.json]

[{"id": "emp1"}, {"id": "emp2"}, {"id": "emp3"}]

[Index.razor]

@page "/"
@inject HttpClient Http

@if (employees == null)
{
    <p>Loading...</p>
}
else
{
    @foreach (var employee in employees) 
    { 
        <p>Employee ID: @employee.Id</p>
    }
}


@code {
    private Employee[] employees;

    protected override async Task OnInitializedAsync()
    {
        employees = await Http.GetFromJsonAsync<Employee[]>("employee.json");
    }

    public class Employee
    {
        public string Id { get; set; }
    }
}

Refer to this documentation for more details.

You can read static files by creating HttpClient Get calls. The GetStringAsync method sends a request to the specific URI and returns the response body as a string in an async operation. 

@inject HttpClient Http

@code {

    protected override async Task OnInitializedAsync()
    {
        var content = await Http.GetStringAsync(request Uri);

    }
}

If you can read local file, you will use ReadAsync() and  Encoding.UTF8.GetString() methods. Here is an example:

@page "/read localfile" 
<InputFile OnChange="@HandleFileSelection" /> 
<button @onclick="ReadFile">Read File</button> 
@if (!string.IsNullOrEmpty(fileContent)) 
{ 
    <div>@fileContent</div> 
} 

@code { 
    private IBrowserFile? file; 
    private string? fileContent; 
    private void HandleFileSelection(InputFileChangeEventArgs e) 
    { 
        file = e.File; 
    } 
    private async Task ReadFile() 
    { 
        if (file != null) 
        { 
            var stream = file.OpenReadStream(); 
            var buffer = new byte[file.Size]; 
            await stream.ReadAsync(buffer, 0, (int)file.Size); 
            fileContent = System.Text.Encoding.UTF8.GetString(buffer); 
        } 
    } 
} 

Note: The project mentioned above is designed for reading local text format documents. 

View Sample in GitHub  

WebClient is not supported in Blazor both in the server-side and client-side environments. It is generally recommended to use HttpClient for making HTTP requests in Blazor applications.