Nearly one year ago, at the end of 2021 I was starting my first Blazor Server project, a new version of our old time tracking and vacation planning system which in 2010 was written in ASP.Net Web Applications (.NET Framwork – Web Forms) and VB.Net.

Before I started to create a new version, I first researched what technology will be best and up to date to implement the new requirements.

Besides Node.js, React and Angular, I came quite fast across Blazor Server, a new free and open-source web framework by Microsoft which lets you create web apps using C# and HTML.

ASP.NET Core Blazor

Hierarchical Blazor Components

As the latest framework to join the single-page application (SPA) party, Blazor had the opportunity to build on the best characteristics of other frameworks, such as Angular and React. While the core concept behind Blazor is to leverage C# and Razor to build SPA applications, one aspect clearly inspired by other frameworks is the use of components.

Blazor is a web framework for building web UI components (Razor components) that can be hosted in different ways. Razor components can run server-side in ASP.NET Core (Blazor Server) versus client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly, Blazor WASM).

More about Blazor Server vs. Blazor WebAssembly you can read in the following Microsoft article

This post is a beginning of a series of posts about Blazor server and some useful reatures to create rich interactive UIs using primarily C# instead of JavaScript. To tell you right away, we cannot completely abandon JavaScript and still need it for some features.

The Blazor server framework also supports interaction between C# code and JavaScript code which is real cool. You can invoke JavaScript functions directly from your C# code and vice versa.

These scenarios are called JavaScript interoperability (JS interop).

To use it you have to import its namespace and the JavaScript runtime called IJSRuntime.

@using Microsoft.JSInterop
@inject IJSRuntime IJS

More and how exactly we will see later.

One important JavaScript file (framework) which by default will be downloaded to the browser the first time you open a Blazor server website, is the blazor.server.js file (framework).

The blazor.server.js file is an embedded resource in the Microsoft.AspNetCore.Components.Server.dll assembly and you won’t find the file directly in your project path.

The Microsoft.AspNetCore.Components.Server.dll assembly is part of the ASP.NET Core shared framework.

The main job of the blazor.server.js framework is to bootstrap the web app and establish a SignalR connection between the server and the app to handle UI updates and event forwarding.

What is SignalR?

In a nutshell SignalR uses WebSockets if available to establish a consistent bi-directional TCP communication between the browser and server.

More under

In Blazor server on the server side are running razor components which includes HTML and C# code, similar to PHP and C# classes. When a user the first time opens the web app in its browser, the server will send initial the complete website (route Razor template) to the browser (initial payload), similar as for classic websites. Further as mentioned the first time also the blazor.server.js file is sent to the browser.

From that moment, Blazor will remember what the web server was initial sending to the browser by making a virtual snapshot from, so called virtual DOM (Document Object Model) maintained on server side.

Document Object Model (DOM)

Blazor will now ongoing use that virtual DOM to determine changes in the real DOM (web app running in the browser) and therefore from now on only send the changes instead of the whole site (razor template) to the users browser. These changes will then be updated in the real DOM by the blazor.server.js framework.

As mentioned blazor.server.js will also handle event forwarding, so each user interactions like keyboard inputs or mouse clicks will be send to the server using the SignalR connection.

In the next posts I will show how to create a new Blazor server web app and also I want to show some parts and functionalities from my time tracking and vacation planning system.

In Part II you will see how to create a new Blazor server web app.



Blazor Tutorial – Build your first Blazor app

Blazor Tutorial – Build your first Blazor app –> Let Jeff walk you through building a full Blazor app from start to finish

ASP.NET Core Blazor

Blazor in Action

Blazor University

Single-Page application (SPA)

What’s behind the hype about Blazor?

What is Blazor? A Tutorial on Building Web Apps with Authentication

ASP.NET Core Blazor JavaScript interoperability (JS interop)