ttmind

Main Navigation

ttmind
  • jim-jams
  • Tech
  • Positive
Login

Login

Facebook Google

OR

Remember me Forgot password?

Don't have account? Signup here.

Sort by Categorys

.Net

PHP

Java

JavaScript

Database

Server

Client Side

Tools

Artificial Intelligence

Cloud

Hybrid Development

Event

Smart City

Education

Security

Scrum

Digital Marketing

APP Development

Business

Internet

Simulation

Art

Network

Microservices

Architecture

Technology

Leadership

    Top Articles

  • How Does Social Media Bring People Together?
    TTMind Author
  • How to read appSettings JSON from Class Library in ASP.NET Core
    Anil Shrestha
  • Printing Support In Asp.Net Core
    TTMind Author
  • HOW TO EXTRACT TEXT FROM IMAGE USING JAVASCRIPT (OCR with Tesseract.js)?
    Prakash Pokhrel
  • Images Upload REST API using ASP.NET Core
    Prakash Pokhrel
  • Related Topic

  • How to read appSettings JSON from Class Library in ASP.NET Core
  • Printing Support In Asp.Net Core
  • Images Upload REST API using ASP.NET Core
  • How to use IActionFilter, IAsyncActionFilter in ASP.NET Core MVC?
  • ASP.NET CORE - Blazor CRUD operation using ADO.NET
  • Tech
  • About Us
  • Contact Us
  • TechHelp
  • PositiveHelp
  • Jim-Jams Help
  • Terms & Conditions

© Copyright ttmind.com

Main Content

Get Started with Blazor

.Net Blazor about 7 years ago || 12/15/2018 || 3.5 K View

  • Hide

Blazor is new experimental technology that could revolutionize the web development world.  Blazor is worked on by the ASP.NET Team, Daniel Roth and Steve Sanderson. They are working hard experimenting with this new Framework.  

Blazor experimental project

  • Full-stack web development with .Net via web assembly 

  • Requires no plugin or code transpilation 

  • Works in all modern browsers including mobile browsers

If you want to write an application that runs in the browser you’re going to have to leverage javascript but there are some new things that have come around with WebAssembly  which is a way of natively writing code for your browser that it understands  using web standards it’s a bytecode format so it’s similar to as assembly language  but it runs natively inside the browser and the browser understand it. So AspNet starting to step away from the days where javascript ruler the browser only and we’re allowing some new things into the ecosystem. 

Every Browser has an engine that runs javascript natively in the browser. But there is something more that browser can run web standard. 

Why Blazor? What’s with a name?  

Blazor name came from Razor, Razor is used to create our markup for application and then the Blazor part of it comes from the running it in the browser.  

Browser+Razor=Blazor 

So we are able to use the same syntax to run inside the browser. Just we used to build the web application form ASP.net MVC and Asp.Net core.  

So, How Blazor Run on Blazor.  Look the picture below.

Blazor app

We have to feed the browser HTML and javascript only, now we’re using the Blazor framework. Blazor framework renders those Razor CSS HTML files those get turned into HTML which the browser understands. Then we take Mono. So mono the runtime that can target multiple platforms there are now targeting the browser. So this is mono under the covers. Mono has been known that is not a new thing. Mono has been around since .Net has been around. So it’s the port of .Net to other platforms, and that’s how xamarin apps run on multiplatform (IOS, Android and Other platforms). So Mono is used to bring your C# down to WebAssembly. Mono is compiled to run WebAssembly and Blazor is as Framework that sits on top of that. Now Blazor is able to take and load your DLLs directly into Mono. And Mono is running those in an interpreter into the browser.

You see in picture there is Blazor.js and mono.js what are those?

These are intermediate layers for the browser to help do things like JS interrupts, so we have Javascript interrup layer. So there are things tha webassembly doesn’t support yet. So ther might be times where we need to fall back on JavavScript, so we can actually talk to javascript from within WebAssembly. So from .Net code we are going to call JavaScript and back and forth. So we can actually do that bidirectionally we can call JavaScript modules and functions from within Blazor and then we can also from JavaScript invoke .Net functions. So that’s one reason these two javascript files are there. The other part is just loading the application hub. So mono.js takes and loads bootstraps up the Blazor asswmblies and the Blazor has thos interrupt layers. And communicates down through mono.js into those interrupts directly. 

Blazor Framework Feature 

  • Virtual Dom 
  • Components (MVVM Like) 
  • -data Binding 
  • -Event Handling 
  • Layouts 
  • Dependency Injection 
  • Routing 
  • JavaScript/C# interop (bi-derectional)

Let’s Setup Blazor Environment

Install the following: 

  • .NET Core 2.1 SDK (2.1.500 or later). 
  •  .Visual Studio 2017 (15.9 or later)

In Visual studio 2017 

  • The latest Blazor Language Services extension from the Visual Studio Marketplace. 
  • Open visual studio Select File>New> Project>Visual C#>.Net Core>Asp.Net core Web Application 
  • Select Blazor and Select Ok
  • Blazor
  • Press Ctrl-F5 to run in without debugging mode. 

Blazor

In VS code

Open terminal pressing (CTRL + `  )  

Type Following command int terminal dotnet new -i Microsoft.AspNetCore.Blazor.Templates and Press Enter 

dotnet new blazor -o FirstBlazorapp 

cd FirstBlazorapp 

dotnet run 

Is Blazor performance running native performance in browser? 

Not yet It just born.  

If you are .net developer and you want to stay on top of modern web but you don’t want to write a whole lot of Javascript. This is a way for you to write C# straight up in the browser and run it natively. 

You are not supposed to use this framework for building production applications because of the state that it’s in.  It’s an experiment. The performance isn’t going to be as good as JavaScript at the moment. But it’ll get there over time. 

you can see video here.

1. Link 1

2. Link 2

3. Link 3

Other article:

AspNet MVC Core 2.0 Model validations with custom attribute

  • 1
  • 0
  • 0
    • Facebook
    • Twitter
    • Google +
    • LinkedIn

About author

Anil Shrestha

Anil Shrestha

Qualified and skilled professional with experience working as a Software Developer

Reset Your Password
Enter your email address that you used to register. We'll send you an email with your username and a link to reset your password.

Quick Survey