Calling REST API from BLAZOR Application

In this article, we will see how to consume REST API calls inside blazor application,

Initially, we are loading the data by hard coding the values in component base file lets look at the code for that,

Productlist.razor

@page “/”
@inherits ProductlistBase
<h3>Productlist</h3>
@if (Products == null)
{
<div class=”spinner”></div>
}
else
{
<div>
@foreach (var product in Products)
{
<span>Product Id: @product.productId</span>
<span>Product Name: @product.ProductName</span>
<br/>
}
</div>
}

ProductlistBase.cs

using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace EmployeeManagement.Web.Pages
{
public class ProductlistBase:ComponentBase
{
public IEnumerable<Product> Products { get; set; }
protected override async Task OnInitializedAsync()
{
await Task.Run(LoadProducts);
}
private void LoadProducts()
{
System.Threading.Thread.Sleep(3000);
Product p1 = new Product
{
productId=1,
ProductName=”Test Product1"
};
Product p2 = new Product
{
productId = 2,
ProductName = “Test Product2”
};
Products = new List<Product> { p1, p2 };
}
}
}

So as you see over here we are hard coding the values and displaying it on component now instead we will get the product list from database calling a rest api defined method for that we are defining service to get that data,

IProductService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace EmployeeManagement.Web.Services
{
public interface IProductService
{
Task<IEnumerable<Product>> GetProducts();
}
}

ProductService.cs

using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;
namespace EmployeeManagement.Web.Services
{
public class ProductService : IProductService
{
private readonly HttpClient httpClient;
public ProductService(HttpClient httpClient)
{
this.httpClient = httpClient;
}
public async Task<IEnumerable<Product>> GetProducts()
{
return await httpClient.GetJsonAsync<Product[]>(“api/product”);
}
}
}

As you see over here we used HttpClient to make a call to our endpoint for that you need to register this service in ConfigureService as shown below,

public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddHttpClient<IProductService, ProductService>(client =>
{
client.BaseAddress = new Uri(“https://localhost:44340/");
});
}

Here, we registered HttpClient with respective service in Dependency injection container and also specified the base address of the client.

Once these changes are done then we need to inject the service in the component base class to fetch the required data as shown below,

ProductlistBase.cs

using EmployeeManagement.Web.Services;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace EmployeeManagement.Web.Pages
{
public class ProductlistBase:ComponentBase
{
[Inject]
public IProductService productService { get; set; }
public IEnumerable<Product> Products { get; set; }
protected override async Task OnInitializedAsync()
{
Products = (await productService.GetProducts()).ToList();
}
}

Thank You, See you in the next article !!

You can reach out to me here,

LinkedIn: https://www.linkedin.com/in/vaibhav-bhapkar

Email: vaibhavbhapkar.medium@gmail.com

If you want some technical topics to be discussed with group of participants please raise a request on following link: http://myblogsenquiry.somee.com/