Blazor

Not to be confused with Blazer or Blazar.

Blazor

Original author(s)	Microsoft
Developer(s)	.NET Foundation
Initial release	2018 (2018)
Repository	github.com/dotnet/aspnetcore/tree/main/src/Components
Operating system	Linux, macOS, Windows
Included with	ASP.NET Core
Type	Web framework
License	Apache License 2.0
Website	dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor

Blazor is a free and open-source web framework that enables developers to create web user interfaces (UI) based on components, using C# and HTML. It is being developed by Microsoft, as part of the ASP.NET Core web app framework.

Blazor can be used to develop single-page, mobile, or server-rendered applications using .NET technologies.

History

In 2017, at NDC Oslo, Steve Sanderson, Software engineer at Microsoft, unveiled an experimental client-side web application framework for .NET that he called "Blazor". The demo involved an interactive app running in the browser using WebAssembly, and a rudimentary development experience in Visual Studio. Sanderson demonstrated how to build interactive components using C# and Razor syntax. The app was then compiled to .NET assemblies that were running on a lightweight third-party open-source .NET runtime, called DotNetAnywhere, that had been compiled to WebAssembly.

The name, "Blazor", as explained by Steve Sanderson, is a portmanteau of the words "Browser" and "Razor". (from the Razor syntax being used)

Blazor got admitted as an official open-source project by Microsoft, and in 2018, as part of .NET Core 3.1, Blazor Server was released to the public. It enabled server-driven interactive web app that update the client browser via WebSockets. Shortly thereafter, Blazor WebAssembly was released. Unlike the prototype, it used the Mono .NET runtime on WebAssembly. This is the same runtime that is used for developing mobile apps with .NET MAUI (previously Xamarin).

The Blazor source code was first located in its own repository on GitHub, until it was merged into the ASP.NET Core monorepo. The development has been carried out from there ever since.

With the release of .NET 5, Blazor has stopped working on Internet Explorer and the legacy version of Microsoft Edge.

In 2023, with .NET 8, Blazor on the server underwent some fundamental changes to enable server-side rendered (SSR) pages that are not fundamentally interactive, allowing Blazor to be used as an alternative to MVC Razor Pages. With this change, developers can opt-in per component (or page) whether it should be interactive, and whether it should run on the server or in the browser using WebAssembly. These are referred to as Interactive "Render modes".

Components

Components are formally referred to as Razor components.

A Razor component consists mainly of HTML that is mixed with Razor templating syntax that enables the inline-use of C# to influence the rendering.

The Blazor component model makes sure that the rendered markup gets updated when the state of the component changes, usually in response to user action.

While both markup and C# code can be placed in the same .razor file, it is also possible to have a separate code-behind file with a partial class.

Components are compiled into .NET classes. The HTML and Razor markup of a component gets translated into code that builds a render tree that then drives the actual rendering.

Example

The following example shows how to implement a simple counter that can be incremented by clicking a button:

<h1>Counter</h1>

<p>Count: @count</p>

<button @onclick="Increment">Increment</button>

@code 
{
    private int count = 0;

    private void Increment()
    {
        if(count == 20) count = 0;
        else count++;
    }
}

Hosting models

Blazor apps can be hosted in multiple ways. These are the hosting models as of .NET 8.

Blazor Web app (Server)

A server-hosted Blazor app, as part of an ASP.NET Core app.

Static server-side rendering (SSR)

By default, components are rendered by the server as static HTML, without any interactivity. Interactivity can be enabled per component by setting a render mode.

This is equivalent to how MVC views and Razor Pages are rendered.

Render modes

Source:

In .NET 8, Blazor introduced the concept of render modes which configure whether Razor components are interactive and what drives that interactivity.

The render mode is inherited within a component hierarchy, from its top most parent component that has a set render mode. This can not be overridden by child components, unless its render mode is the default Static Server.

• Static Server – The component is rendered statically on the server with no interactivity. This is the default.
• Interactive Server – The component is running on the server in interactive mode. The interactivity is server-driven and changes are pushed to the client over WebSocket, using SignalR.
• Interactive WebAssembly – The component is running in interactive mode in the browser using WebAssembly.
• Interactive Auto – This will initially load the component in the Interactive Server render mode while the Blazor bundle is downloaded. On subsequent visits Interactive WebAssembly is used on the client.

Prerendering

Interactive components is pre-rendered on the server before being materialized on the client and interactivity kicking in. This behavior is turned on by default, but can be turned off.

Enhanced navigation

This feature makes navigation on a static site much smoother in a way that feels like a Single Page application (SPA).

When navigating from one static page to another, the app intercepts the navigation, retrieving just the content of the target page, and then apply only the changes to the DOM. That way the page doesn't flicker as it usually does when being completely reloaded upon navigating to another page.

WebAssembly (Standalone)

This is a standalone interactive WebAssembly app running in the client browser.

Upon navigating to the app in a browser, the app bundle get downloaded, then loaded and executed within the browser's sandbox.

A WebAssembly app can also be made into a Progressive web app (PWA).

Prior to .NET 8, there was a project template in which a Blazor WebAssembly app was hosted within an ASP.NET Core application containing Web APIs. This was removed in favor of the Blazor Web app project template, although the functionality still remains.

Hybrid

Allows Blazor apps to run within a native app using a WebView. Rendering is performed in the hosting process, without a web server.

Hybrid apps can be hosted in Windows Presentation Foundation or WinForms application.

This approach is used for building native mobile apps with Blazor, using .NET MAUI.

Server (Legacy)

The intended use was to enable server-driven interactive components, with changes being sent out to the client using WebSockets.

A component was rendered within a MVC Razor Page.

It also enabled prerendering of WebAssembly components.

This hosting model was formally referred to as "Blazor Server".

It has been deprecated in favor of Blazor Web app.

See also

• asm.js – precursor of WebAssembly enabling client-side web apps written in C or C++
• Google Native Client – deprecated Google's precursor to WebAssembly that enables running native code in a web browser, independent of browser's operating system

Further reading

• Engström, Jimmy (2021). Web Development with Blazor: A hands-on guide for .NET developers to build interactive UIs with C#. Packt Publishing. ISBN 978-1800208728.
• Himschoot, Peter (2021). Microsoft Blazor: Building Web Applications in .NET 6 and Beyond. Apress. ISBN 978-1484278444.
• Wright, Toi (2021). Blazor WebAssembly by Example: A project-based guide to building web apps with .NET, Blazor WebAssembly, and C#. Packt Publishing. ISBN 978-1800567511.
• Sainty, Chris (2022). Blazor in Action. Manning Publications. ISBN 978-1617298646.

External links

• Official website
• ASP.NET Core on GitHub
• Blazor School - The Blazor community documentation.
• Blazor University—Blazor documentation from a secondary, independent source