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)

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(); } } }
- How to create dynamic form fields using jQuery - January 4, 2021
- What is CTS (Common Type System) in .Net - October 16, 2020
- What is main method in c# - October 13, 2020
I was searching for this from long good content I found here keep it up loved your work and articles
i am search google so many sites this content very easy to learn to learner