Blazor

Blazor is a free, open-source web framework that enables developers to create interactive client-side web UIs with .NET and C#. Blazor is a part of ASP.NET Core.

With Blazor, you can:

  • Build interactive web UIs using C# instead of JavaScript.
  • Share server-side logic with client-side logic.
  • Run C# code directly in the browser using WebAssembly.
  • Host Blazor apps on various platforms and backends.
Key Feature: Blazor allows you to leverage your existing .NET development skills and tools to build modern, performant web applications.

Getting Started with Blazor

To start building Blazor applications, you'll need the .NET SDK installed. You can create a new Blazor project using the .NET CLI:

dotnet new blazorwasm -o MyBlazorApp
cd MyBlazorApp
dotnet run

This command creates a new Blazor WebAssembly application. For Blazor Server, use dotnet new blazorserver -o MyBlazorApp.

Blazor Components

Blazor apps are built using a component-based architecture. Components are self-contained pieces of UI that encapsulate HTML, CSS, and C# code. They are reusable and can be nested to build complex UIs.

A simple Blazor component might look like this:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Hosting Models

Blazor offers two primary hosting models:

  • Blazor Server: Components run on the server, and UI updates are sent to the client over a SignalR connection. This model requires a constant connection to the server.
  • Blazor WebAssembly: Components run entirely in the browser on a .NET runtime compiled to WebAssembly. This allows for offline support and faster initial load times for static assets.
Recommendation: Blazor WebAssembly is ideal for progressive web applications (PWAs) and scenarios where offline capabilities are required. Blazor Server is suitable for applications that require access to server-side resources or have a consistent connection.

Further Reading