Below is a quick set of examples to show how to send HTTP GET requests from ASP.NET Core Blazor WebAssembly to a backend API.

You can see all of the below examples running on GitHub Pages at https://cornflourblue.github.io/blazor-webassembly-http-get-request-examples/.

The source code for the Blazor GET requests project is available at https://github.com/cornflourblue/blazor-webassembly-http-get-request-examples.

Other HTTP examples available:

• Blazor WebAssembly: POST
• Angular: GET, POST
• React + Fetch: GET, POST
• React + Axios: GET, POST
• Vue + Fetch: GET, POST
• Vue + Axios: GET, POST

Simple GET request with a JSON body and strongly typed response

This sends an HTTP GET request to the Reqres api which is a fake online REST api that has an /api/users route that returns an array of users along with metadata including the total number of users. The GetFromJsonAsync() extension method of the HttpClient is called to send a request and convert the response into a UsersResponse object which is assigned to the blazor component property response so it can be rendered by the component template

private UsersResponse response;

protected override async Task OnInitializedAsync()
{
    response = await HttpClient.GetFromJsonAsync<UsersResponse>("https://reqres.in/api/users");
}

Blazor component code at https://github.com/cornflourblue/blazor-webassembly-http-get-request-examples/blob/master/Components/GetRequest.razor

#blazor #webassembly #api #aspdotnet #programming