Call REST API from ASP.NET Core Blazor.

Call REST API from ASP.NET Core Blazor

Can a Blazor part call REST API straightforwardly.

Indeed, a Blazor part can legitimately call a REST API. In any case, for detachment of concerns and to keep the segment code clean, it's a decent practice to make different assistance that calls the REST API.

Make the support of call REST API

Include an organizer with name Services to the Blazor web application venture. Include the accompanying 2 class documents to this organizer.

1 IEmployeeService.cs

2 EmployeeService.cs

IEmployeeService.cs

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

EmployeeService.cs

We are utilizing the HttpClient class to call the REST API administration.

This class is on System.Net.Http namespace.

HttpClient is infused into the EmployeeService utilizing reliance infusion.

We have not enrolled in HttpClient administration with the reliance infusion compartment yet. We will do that in a tad.

We are utilizing the httpClient.GetJsonAsync to call the REST API. This strategy is in Microsoft.AspNetCore.Blazor.HttpClient Nuget bundle. Introduce this bundle and remember to incorporate the namespace Microsoft.AspNetCore.Components.

Pass the REST API endpoint (api/employees) to httpClient.GetJsonAsync strategy.

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 the ConfigureServices strategy for the Startup class register HttpClient Services utilizing AddHttpClient technique.

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

At last call IEmployeeService from EmployeeList blazor part.

We use [Inject] credit to inject a help into a Blazor segment. We can't utilize a constructor for this.

In the segment OnInitializedAsync technique, we call the EmployeeService.GetEmployees strategy.

The information (rundown of representatives) that these technique returns is then used to initialise Employees property.

The EmployeeList blazor part ties to this present Employees' property to show the rundown of representatives.

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();
        }
    }
}