Overview

Blazor is a server-side rendered (Server) or client-side rendered (WASM) framework for web apps. Blazor does not use a request/response model.

Advantages:

• Create UIs in combination of HTML and C# instead of JavaScript
• Share server-side and client-side app logic
• Render UI as HTML and CSS
• Integrate with Docker
• Build hybrid desktop & mobile apps

Blazor apps are based on Razor components—an element of UI (like a page, dialog, or form).

Components:

• are C# classes
• render UI, handle user events
• written as a .razor file (Razor components; informally, Blazor components)
• NOT built around request/response model (like Razor Pages & MVC)

Pages/Dialog.razor

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; } // text of the dialog

    [Parameter]
    public string? Title { get; set; } // title of the dialog

    private void OnYes() // triggered by the button's onclick event
    {
   // write's to the browser's console
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

Pages/Index.razor

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More"> <!-- uses the previously-defined Dialog component --> 
    Do you want to <i>learn more</i> about Blazor? <!-- sets the Dialog component's ChildContent (text) -->
</Dialog>

content rendering

As of .NET 8, Blazor can render content at either the component or page level with:

• Static server rendering (SSR) — to generate static HTML on the server.
• Interactive server rendering (interactive SSR) — to generate interactive components with pre-rendering on the server.
• Interactive WebAssembly rendering aka client-side rendering (CSR) — always interactive; to generate interactive components on the client with pre-rendering on the server.
• Interactive automatic rendering (auto) to initially use the server-side ASP.NET Core runtime for content rendering and interactivity, then the .NET WebAssembly runtime on the client for subsequent rendering and interactivity after the Blazor bundle is downloaded and the WASM runtime activates.

More information: Rendering

tooling

vs code

creating a project

1. Ctrl + Shift + P -> .NET New Project
2. Select the Blazor project template
3. Follow the prompts

running the app

1. F5 to run with debugger
2. Select the C# debugger from the list
3. Select the https launch configuration

To stop, Shift + F5

.NET CLI

creating a project

• Blazor Web App (dotnet new blazor)
• Blazor WebAssembly standalone (dotnet new blazorwasm)

To set interactivity:

dotnet new blazor --interactivity <Server|WebAssembly|Auto|None>

Interactivity options:

• Server = interactive SSR
• WebAssembly = client-side rendering
• Auto = automatic
• None = static SSR

Other options:

• Use --empty to omit sample pages and basic styling
• Use --all-interactive to include an interactive render mode at the top level

running the app

From the solution’s server project (the project that doesn’t end in .Client), compile and start the app:

dotnet watch

Alternatively, to run the app with HTTPS, either:

dotnet watch --launch-profile https

Or, in Properties/launchSettings.json, reorganize the launch profiles so that the https profile is above the http profile.

.NET WebAssembly build tools

Based on Emscripten, a compiler toolchain for the web platform. To install, either:

• Visual Studio installer > Additional Components > .NET WebAssembly build tools
• dotnet workload install wasm-tools Note: .NET 7 build tools (installed above) are incompatible with .NET 6. To use the .NET 6 build tools:
  dotnet workload install wasm-tools-net6

When AOT compilation is used, SIMD is supported except for Apple Safari. To enable this:

<PropertyGroup>
  <WasmEnableSIMD>true</WasmEnableSIMD>
  <RunAOTCompilation>true</RunAOTCompilation>
</PropertyGroup>

To enable WASM exception handling:

<PropertyGroup>
  <WasmEnableExceptionHandling>true</WasmEnableExceptionHandling>
</PropertyGroup>