Blazor WebAssembly

Blazor WebAssembly (WASM) allows you to build interactive client-side web UIs with .NET. Your C# code runs directly in the browser using WebAssembly.

Introduction to Blazor WebAssembly

Blazor WebAssembly is a framework for building single-page applications (SPAs) using C# and .NET. It enables developers to use their existing .NET skills and code to create rich, interactive user experiences directly in the browser without requiring a JavaScript framework.

Key features include:

• Full-stack C# Development: Write both server-side and client-side logic in C#.
• Reusability: Share code libraries between client and server.
• Performance: Blazor WASM runs on WebAssembly, offering near-native performance.
• Rich UI: Leverage familiar .NET libraries and tools.
• HTML & CSS: Integrate seamlessly with standard web technologies.

Getting Started

Prerequisites

To get started with Blazor WebAssembly, you need:

• .NET 6 SDK or later
• A code editor (e.g., Visual Studio, VS Code with C# Dev Kit)

Creating Your First Blazor WebAssembly App

You can create a new Blazor WebAssembly project using the .NET CLI:

dotnet new blazorwasm -o MyBlazorApp
cd MyBlazorApp
dotnet run

This will create a new directory MyBlazorApp with a basic Blazor WebAssembly project structure and then run it. Open your browser to https://localhost:5001 (or the URL provided by the CLI) to see your app.

Core Concepts

Components

Blazor apps are built using components. Components are self-contained pieces of UI that encapsulate HTML markup, CSS styles, and C# logic. They are typically defined in .razor files.

Here's a simple example of a component:

<div>
    <h1>@Message</h1>
    <button class="btn btn-primary" @onclick="ChangeMessage">Click Me</button>
</div>

@code {
    private string Message = "Hello, Blazor!";

    private void ChangeMessage()
    {
        Message = "Button Clicked!";
    }
}

Routing

Blazor uses a routing system similar to traditional web frameworks. You can define routes for your components using the @page directive.

@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++;
    }
}

Advanced Topics

JavaScript Interop

While Blazor allows you to write C# for the client, you can still leverage JavaScript for tasks that are better suited to it or require existing JS libraries. Blazor provides mechanisms for calling JavaScript from C# and C# from JavaScript.

Calling JavaScript from C#:

@inject IJSRuntime JSRuntime

<button class="btn btn-secondary" @onclick="ShowAlert">Show JS Alert</button>

@code {
    private async Task ShowAlert()
    {
        await JSRuntime.InvokeVoidAsync("alert", "Hello from Blazor!");
    }
}

Calling C# from JavaScript:

You need to define a JSInvokable method:

[JSInvokable]
public static Task<string> GetCurrentTime()
{
    return Task.FromResult(DateTime.Now.ToShortTimeString());
}

And then invoke it from JavaScript:

function callCSharp() {
    DotNet.invokeMethodAsync('MyBlazorApp', 'GetCurrentTime')
        .then(result => {
            console.log('Current time from C#: ' + result);
        });
}

State Management

Managing application state effectively is crucial for complex Blazor applications. Consider patterns like:

• Passing parameters between components.
• Using CascadingValue and CascadingParameter.
• Implementing dedicated state management services.

Authentication and Authorization

Blazor WebAssembly supports various authentication and authorization strategies. The built-in template includes support for ASP.NET Core Identity. You can also integrate with external identity providers like Azure AD, Auth0, and others.

Deployment

Blazor WebAssembly apps can be deployed as static files, often hosted behind a web server like Nginx or Apache, or hosted within an ASP.NET Core application (which then serves the static files). For more complex scenarios, consider hosting as a Progressive Web App (PWA).