Introduction
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.
- dotnet new -i Microsoft.AspNetCore.Blazor.Templates
We can create an application using Visual Studio or using CLI.
Following are steps to create an application using Visual Studio.
- Select File -> New Project -> Web -> ASP.NET Core Web Application
- Make sure .NET Core and ASP.NET Core 2.0 are selected at the top.
- Pick the Blazor template.
Using the following command, we can create a Blazor application.
To run the application, we need to use Ctrl+F5 (application run without debugger). Running the application with a debugger is not supported at this time.
Before running the application, make sure that the correct SDK version is supplied in project tag in .csproj file.
Output
The above output image illustrates the boot process of a Blazor application in Chrome browser. It includes Blazor' Javascript (blazor.js), Mono’s JavaScript library (mono.js) to bootstrap the Mono runtime (mono.wasm) in WebAssembly, application dll (testApp.dll) and .net framework dlls.
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
![Blazor]()
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 {
-
- }
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
- {
- static void Main(string[] args)
- {
- var serviceProvider = new BrowserServiceProvider(services =>
- {
-
- });
-
- 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.