Call REST API from ASP.NET Core Blazor

how to call and consume a REST API from ASP.NET Core Blazor application.

Can a Blazor component call REST API directly

Yes, a Blazor component can directly call a REST API. However, for separation of concerns and to keep the component code clean, it's a good practice to create a separate service that calls the REST API.

Create a service to call REST API

Add a folder with name Services to the Blazor web application project. Add the following 2 class files to this folder.

1. IEmployeeService.cs
2. EmployeeService.cs

IEmployeeService.cs

public interface IEmployeeService
{
    Task<IEnumerable<Employee>> GetEmployees();
}

EmployeeService.cs

• We are using HttpClient class to call the REST API service.
• This class is in System.Net.Http namespace.
• HttpClient is injected into the EmployeeService using dependency injection.
• We have not registered HttpClient service with the dependency injection container yet. We will do that in just a bit.
• We are using httpClient.GetJsonAsync to call the REST API. This method is in Microsoft.AspNetCore.Blazor.HttpClient Nuget package. Install this package and do not forget to include the namespace Microsoft.AspNetCore.Components.
• Pass the REST API endpoint (api/employees) to httpClient.GetJsonAsync method.
  

  httpClient.GetJsonAsync<Employee[]>("api/employees")​

using EmployeeManagement.Models;
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;

namespace EmployeeManagement.Web.Services
{
    public class EmployeeService : IEmployeeService
    {
        private readonly HttpClient httpClient;

        public EmployeeService(HttpClient httpClient)
        {
            this.httpClient = httpClient;
        }

        public async Task<IEnumerable<Employee>> GetEmployees()
        {
            return await httpClient.GetJsonAsync<Employee[]>("api/employees");
        }
    }
}

Register HttpClient Services

In ConfigureServices method of the Startup class register HttpClient Services using AddHttpClient method.

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();

    services.AddHttpClient<IEmployeeService, EmployeeService>(client =>
    {
        client.BaseAddress = new Uri("https://localhost:44379/");
    });
}

Call Service from Blazor Component

• Finally call IEmployeeService from EmployeeList blazor component.
• We use [Inject] attribute to inject a service into a Blazor component. We cannot use a constructor for this.
• In the component OnInitializedAsync method, we call the EmployeeService.GetEmployees method.
• The data (list of employees) that this method returns is then used to initialise Employees property.
• The EmployeeList blazor component binds to this Employees property to display the list of employees.

using EmployeeManagement.Models; using EmployeeManagement.Web.Services; using Microsoft.AspNetCore.Components; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace EmployeeManagement.Web.Pages { public class EmployeeListBase : ComponentBase { [Inject] public IEmployeeService EmployeeService { get; set; } public IEnumerable<Employee> Employees { get; set; } protected override async Task OnInitializedAsync() { Employees = (await EmployeeService.GetEmployees()).ToList(); } } }