Introduction to Blazor

Learn what Blazor is and how it benefits ASP.NET Core web developers.

We'll cover the following

Blazor is a front-end framework that allows web developers to develop the frontend of web applications by using C#. The elements in the HTML that get rendered on the web page can map directly to C# methods and variables. The example below demonstrates how this is achieved.

Press + to interact
@page "/counter"
@inject IJSRuntime JS
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private async Task IncrementCount()
    {
        currentCount += IncrementBy;
        await JS.InvokeVoidAsync("displayAlert");
    }
    [Parameter]
    public int IncrementBy { get; set; } = 1;
}

As we can see, this is a mixture of HTML and C# code. On line 8, there is a paragraph element that has some of its content read from the currentCount C# field defined on line 13. The button on line 10 triggers the IncrementCount method expressed on line 15.

Due to its ability to get HTML code to interoperate with C#, Blazor enables .NET developers to write front-end code for web applications even if they've never done it before. They no longer need to learn JavaScript to do so.

However, the purpose of Blazor is not to replace JavaScript. Some front-end logic is still easier to write in JavaScript, and Blazor can fully interoperate with it. The primary purpose of Blazor is to simplify web application development.

There are two types of Blazor applications: Blazor WebAssembly and Blazor Server. Each of these has its use cases and its benefits, but the core syntax remains the same regardless of which type of Blazor application we use.

Overview of Blazor WebAssembly

WebAssembly is a type of low-level code that allows compiled applications to run in the browser. Because it’s a low-level language, it is easy to convert it into machine code. Therefore, an application written in it can be much faster than something written in a high-level interpreted language, such as JavaScript.

Press + to interact
Blazor WebAssembly running on a client
Blazor WebAssembly running on a client

A Blazor WebAssembly application is a .NET application that compiles into WebAssembly. The compiled executable can then be hosted on the server and downloaded directly into the browser. So, all the code written inside a Blazor WebAssembly project will be executed on the client once the application is compiled into an executable.

Since the application code is executed in the browser, the application will still function even if the internet connection becomes temporarily unavailable. The only exception is those pieces of code that make requests to external resources over the network.

Overview of Blazor Server

While a Blazor Server project consists of the same building blocks as a Blazor WebAssembly project, it works very differently. When compiled, the C# code remains on the server. On the client side, JavaScript code is generated to interoperate with this code in real time. The asynchronous real-time updates between the client and the server are achieved by a built-in ASP.NET Core library known as SignalR.

Press + to interact
Blazor Server shares the logic between the client and the server
Blazor Server shares the logic between the client and the server

Since the logic is shared between the client and the server, the web application will no longer function properly if the network connection drops. However, Blazor Server has its benefits. It still substantially simplifies the process of building fully interactive web applications. We will no longer need to write code separately for the backend and frontend, or implement the mechanism allowing these two components to communicate. We will write code that looks like these two are the same component. The framework will do everything else for us when we compile the application.