Introduction To Blazor With .NET Core

The Blazor is .net web framework which can run in any browser. We can create Blazor application using C#/Razor and HTML. The Blazor application runs in the browser on a real.NET runtime (Mono) via WebAssembly. It enables full stack web development with consistency, stability and productivity of .NET. Normally, it works with latest browser that support WebAssembly and it works in older browser by falling back to asm.js based .net runtime.

Blazor is a .NET web framework which can run in any browser. We can create a Blazor application using C#/Razor and HTML. Blazor application runs in the browser on a real.NET runtime (Mono) via WebAssembly. It enables full stack web development with consistency, stability, and productivity of .NET. Normally, it works with the latest browser that supports WebAssembly and it works in older browsers by falling back to asm.js based .net runtime.

WebAssembly is a web standard which defines a binary format just like lower level assembly language. So, it enables executing code nearly as fast as running native machine code. It was developed at the W3C (World Wide Web Consortium). It defines an AST (Abstract Syntax Tree) which gets stored in binary format. It is supported by all the major browsers without any plugins. Following are some features of WebAssembly.

Efficient and fast

Safe: it describes a memory-safe, sandboxed execution environment that may even be implemented inside existing JavaScript virtual machines. It will enforce the same-origin and permissions security policies of the browser when it is embedded in the web.

Open and debuggable

It is part of the open web platform

Mono is a Microsoft .net framework implementation based on the ECMA standards for C# and CLR (Common Language Runtime). Mono's runtime is compiled into WebAssembly and its IL interpreter is used to run managed code.

Blazor is fast, reusable and it is open source, hence great support from the community. It works with all the browsers with the need of any plugin. Following features are supported by Blazor.

A component model for building composable UI

Routing

Layouts

Server-side rendering

Forms and validation

Dependency injection

JavaScript interop

Live reloading in the browser during development

Great debugging support in both: browsers and IDE

Rich IntelliSense and tooling

Also, supports older version of browsers (non-WebAssembly) via asm.js

Currently, Blazor is an experimental project and yet not committed to production. Following are some prerequisites that are required to get started with Blazor.

Blazor is not a new Silverlight but there is a difference, it does not require any plugin. It uses Mono's IL linker to reduce the size of your application. As described earlier WebAssembly is supported by most of the latest browsers. Please refer to the following image to know more about the browser supports. I have taken this reference from here

The Blazor template generates view logic inside the Razor template using @functions directive. It generates a single class file that contains C# code in the background which represents the View logic.

Example

@page "/"

<!-- View HTML -->

@functions {

// C# code: functions / events and other logic.

}

Many of us dislike this way (mixing view and backend logic in a single file) of doing code but there is a way to separate view and code file. There are three pages automatically created by the template in Pages Folder Index.cshtml, Counter.cshtml, FetchData.cshtml. Let's take an example of Counter.cshtml to understand how Blazor works. Following is a code snap of Counter.cshtml.

In this page, when I click on "Click Me" button that increments a count each time without a refreshing page. Normally, this kind of behavior would get by JavaScript, but we have implemented it in C# and .NET.

Blazor applications are made by Razor view and each razor file is considered as a Blazor component. This component is a .net class that is defined as a reusable component of web UI. We can add dynamic rendering logic such as loops, expression, conditionals etc. using Razor syntax. At build time, the HTML markup and rendering logic are converted into component class and the name of the generated class matches with the name of the file. In @function directive block, we can have defined component state (such as properties, fields) as well as methods for event handling. Each time an event occurs on the component, that regenerates its render tree then Blazor will compare the previous render tree with the current one and apply the only modification to the browser DOM.

Routing is defined in Blazor using @page directive. In the above example, it is "/counter". Without @page directive, we cannot define routing, but it could be used by the other components. The root component (app.cshtml in our case) contains the information about how router component handled the routing request. It is defined in the app's Program.Main() entry point (defined in Program.cs). Here, we can also configure services with the service provider for the application.

using Microsoft.AspNetCore.Blazor.Browser.Rendering;

using Microsoft.AspNetCore.Blazor.Browser.Services;

namespace TestApp

{

class Program

{

staticvoid Main(string[] args)

{

var serviceProvider = new BrowserServiceProvider(services =>

{

// Add any custom services here

});

new BrowserRenderer(serviceProvider).AddComponent<App>("app");

}

}

}

Event Binding is quite limited in Blazor. It supports @onclick and @onchange event. We can also handle child component event in to parent component using OnSomeEvent.

Summary

The Blazor is a new experimental .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly. Blazor enables full stack web development with the consistency, stability, and productivity of .NET. As explained, it is an experimental .NET web framework, so many changes are going on. As a result, some portion of this article may become invalid in the future.

You can view or download the source code from the following GitHub link here.