this article we will learn how to consume the web API using blazor ,what is blazor and how Blazor components page will work..
Before going to consume the web API using blazor we need to require the visual studio 2019 for download click here
Open visual studio 2019 create a new project in 2019 following the given steps

Search the Blazor App in the search box, select the Blazor app and click the next button

enter your project name and click the create button

once creating the project after we need to choose the Blazor server App and if you want andance setting you will enable

Using the above all steps we will complete Process of Creating new Blazor Project In 2019 right now we learn How to consume the web API using blazor
Blazor view are Consuming the signalr requests for interacting the DOM(Document model Object ) If any get change at server side those changes immediately reflected at DOM side
Blazor application is single page application like angular framework in Blazor without using the Jquery and javascript we will implant the Single Page applications with help of the c# Language
Go page folder Add the new Blazor Component name Like Component.razor

In Blazor view Every page can be splitted into 3 parts
- NameSpace
- Dom(Ui Render at Client Side)
- CodeBlock(Using C#)

NameSpace Section: here we will import packages ,Models,Custom Services
Dom(Ui Render at Client-Side): here we will implement the client-side Ui By Using Blazor Tags or Third-party Ui Components
CodeBlock(Using C#): In angular versions, we will use Client-side languages like typescript or Jquery or Javascript but In Blazor instead client-side languages we will use c# Language and No need to require the client-side languages
After adding the Blazor component page add the following given snippet code
@page "/Component"
@using MyfirstBlazorApp.Data
@using Newtonsoft.Json
<h3> test componenetComponent</h3>
@if (lst == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in lst)
{
<tr>
<td>@forecast.userId</td>
<td>@forecast.id</td>
<td>@forecast.title</td>
<td>@forecast.completed</td>
</tr>
}
</tbody>
</table>
}
<button class="btn-primary" @onclick="clickincrease">click</button>
@code {
private List<Customerdata> lst;
dynamic ResultStr;
string reqUrl => $"https://jsonplaceholder.typicode.com/todos/";
async Task clickincrease()
{
try
{
HttpClient client = new HttpClient();
var response = await client.GetAsync(reqUrl);
if (response.IsSuccessStatusCode)
{
ResultStr = response.Content.ReadAsStringAsync().Result;
lst = JsonConvert.DeserializeObject<List<Customerdata>>(ResultStr);
Console.WriteLine(lst);
}
else
ResultStr = response.ReasonPhrase;
}
catch (Exception ex)
{
ResultStr = ex.ToString();
}
}
}
Right click and run your Component.razor page see the following out put

- Crud operation in asp.net core using entity framework core code first - May 22, 2020
- How to handle sessions in asp.net core with example - April 30, 2020
- How to upload multiple files in asp.net core - April 29, 2020
great article. Your knowledge is agreed intensive. I enjoyed reading the article upon your Website