How to consume the web API using blazor

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

• Author
• Recent Posts

SandeepMVN

Software Developer at Deccansoft

I have around 4+ years of experience in training and software development using various Microsoft technologies, including C#, MVC, XML, JQuery, JSON, AJAX, BootStrap, WebAPI, Xamarin. forms, SQL-Server, React Js, and Mobile Apps(Andriod/IOS)....

Certifications:
Microsoft Certified Professional Developer.
MCSD: Developing ASP.NET MVC Web Applications

Latest posts by SandeepMVN (see all)

• Asp.net core Crud Operation - 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