consume the web API using blazor

Updated : Apr 06, 2020 in Articles

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

How to consume the web API using blazor

SandeepMVN
Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tinhoc-10B
April 19, 2020 3:28 pm

great article. Your knowledge is agreed intensive. I enjoyed reading the article upon your Website

1
0
Would love your thoughts, please comment.x
()
x