This examples comes directly from the weather forecast found in standard Blazor WSAM Visual Studio template. I moved the Web API call into a button click handler rather than the OnInitializedAsync() hander. This example is calling an external Web API endpoint with CORS enabled.
@page "/webapiclient"
@inject HttpClient Http
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts == null)
{
<div>
<button id="mybutton" class="btn btn-primary" @onclick="GetWeatherForecast">Click me</button>
</div>
}
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 IEnumerable<WeatherForecast> forecasts;
private async Task GetWeatherForecast()
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("https://localhost:44352/WeatherForecast");
}
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);
}
}
As recommended in your other posts, please make an effort to read the openly published documentation or go through a few beginning level Blazor tutorials. Learning Blazor is far more effective than asking the community to create custom learning content or guessing.