consume the web API using blazor

Updated : Apr 30, 2020 in Blazor

What is core blazor

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


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 core provides a web framework Blazor to build Single page Application using C# language with WebAssembly standards in client site

Advantages of 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 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 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

.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)
    <table class="table">
            @foreach (var forecast in lst)
<button class="btn-primary" @onclick="clickincrease">click</button>
@code {
    private List<Customerdata> lst;
    dynamic ResultStr;
    string reqUrl => $"";
    async Task clickincrease()
            HttpClient client = new HttpClient();
            var response = await client.GetAsync(reqUrl);
            if (response.IsSuccessStatusCode)
                ResultStr = response.Content.ReadAsStringAsync().Result;
                lst = JsonConvert.DeserializeObject<List<Customerdata>>(ResultStr);
                ResultStr = response.ReasonPhrase;
        catch (Exception ex)
            ResultStr = ex.ToString();

Latest posts by DuttaluruVijayakumar (see all)
Like Love Haha Wow Sad Angry

Notify of
Newest Most Voted
Inline Feedbacks
View all comments
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

May 1, 2020 7:35 am

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

Would love your thoughts, please comment.x