consume the web API using blazor

Updated : Apr 30, 2020 in Blazor

What is Asp.net core blazor

In this article, we will learn about what is Asp.net core blazor and advantages and disadvantages and the basic structure of the application

Introduction:

Blazor was released back in September 2019. NET Core 3(Blazor WebAssembly), Blazor application is single page application like angular framework, Blazor Applications will work without using the Jquery and javascript we will implant the Single Page applications with the help of the c# Language

Blazor is a new web UI framework using c#, Razor, and HTML with web Assembly (w3c standards). this application is interacting with c# code, not jquery or javascript

Web Assembly is run low-level bytes code in client-side(browser) with the w3s standards .this standards are run server-side languages like c++,c#…in client-side(Browser) directly instead of javascript

Asp.net core provides a web framework Blazor to build Single page Application using C# language with WebAssembly standards in client site

Advantages of Asp.net core blazor

  • Blazor applications will provide native performance, efficient, and portable
  • we will use existing third-party rich packages, tools, Nuggets.
  • Developers are familiar with easy to write c# code, maintenance, debugging.
  • Blazor pages structure are easily understandable

Disadvantages of Asp.net core blazor

  • without javascript because of in javascript we have a lot of libraries are available
  • maintenance the application like we need more configuration for this applications

The basic structure of Asp.net core blazor application

In Blazor Application view page are can be splitted into 3 parts

  • NameSpace(Directive Section)
  • Razor Html Section(Dom(Ui Render at Client Side))
  • CodeBlock(Using C#)(Function Section)
Blazor page sections
Blazor page sections

Directive Section: this section in blazor component is used to configure the routers, import external class libraries, dependency injection…seethe given below structure

.Rought=>@Page
.Id=>@Injection
.Import Class Library=>@Using

Razor Html Section: in this section, we will implement the client-side UI using blazor Tags, Other UI components with the combination of the C# Code this UI will finally render at the client-side.

Function Section: in this section, we will implement the Action functions (event methods), local variables, properties, this function are useful two-way binding also.

Recommended article:

Setup Blazor project in visual studio 2019

add the Blazor component page add the following given snippet code try to run your project

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

Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Kodanda
Kodanda
May 1, 2020 5:57 am

I was searching for this from long good content I found here keep it up loved your work and articles

madhav
madhav
May 1, 2020 7:35 am

i am search google so many sites this content very easy to learn to learner

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