Blazor

Note: Blazor is a web framework for building interactive client-side web UIs with .NET. It enables developers to create rich, interactive web applications using C# and .NET, instead of JavaScript.

Introduction to Blazor

Blazor allows you to build reusable UI components using C# and Razor syntax. You can host these components in two primary ways:

• Blazor Server: Components run on the server and interact with the browser via SignalR.
• Blazor WebAssembly: Components run directly in the browser using WebAssembly.

Blazor Server

In Blazor Server, your .NET code runs on the server, and UI updates are sent to the browser over a SignalR connection. This model offers:

• Faster initial load times: The .NET assemblies are downloaded once and then executed on the server.
• Access to server resources: Direct access to server-side APIs, databases, and file systems.
• Security: Your application's .NET code doesn't run in the browser, which can be a security advantage.

Example:

<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

Blazor WebAssembly

Blazor WebAssembly (WASM) runs your .NET code directly in the browser using the WebAssembly runtime. This provides a true client-side single-page application (SPA) experience:

• Offline support: Applications can work offline once downloaded.
• No server-side connection for UI: The UI runs entirely in the browser, reducing server load.
• Full .NET ecosystem: Access to NuGet packages and .NET libraries.

Considerations:

• Larger initial download size compared to Blazor Server.
• Requires browser support for WebAssembly.

Components

Blazor applications are built using reusable UI components. These components are typically defined in Razor files (`.razor`) which combine HTML markup and C# code.

Component Structure:

• Markup: HTML elements define the structure of the component.
• Code Block (`@code { ... }`): Contains C# properties, methods, and event handlers.
• Directives (`@`): Used for C# expressions, data binding, and event handling.

Routing

Blazor uses a file-based routing system. Components marked with the @page directive can be navigated to directly.

Example Route:

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

To navigate between pages, you can use the NavLink component:

<NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>
<NavLink href="/counter">Counter</NavLink>

Data Binding

Blazor supports two-way data binding, simplifying synchronization between UI elements and component state.

• One-way binding: @VariableName or @(VariableName)
• Two-way binding: @bind-VariableName

Example Two-Way Binding:

<input type="text" @bind="Name" />
<p>Hello, @Name!</p>

@code {
    public string Name { get; set; } = "World";
}

Event Handling

Event handlers are methods that are invoked when a specific UI event occurs. Use the @oneventname directive.

Example:

<button @onclick="HandleClick">Click Me</button>

@code {
    private void HandleClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

Dependency Injection

Blazor has built-in support for Dependency Injection (DI), making it easy to manage service lifetimes and inject dependencies into your components.

Registering Services (in Program.cs or Startup.cs):

builder.Services.AddScoped<IMyService, MyService>();

Injecting Services:

@inject IMyService MyService

<p>Service message: @MyService.GetMessage()</p>

@code {
    // ...
}

State Management

Managing state in Blazor applications can be achieved through various patterns:

• Component State: Properties within a component.
• Shared State: Using DI for singleton or scoped services that hold state accessible by multiple components.
• Event Aggregators/Messaging Systems: For communication between loosely coupled components.

Authentication and Authorization

Blazor provides robust mechanisms for handling authentication and authorization, similar to ASP.NET Core MVC and Razor Pages.

• Integrates with ASP.NET Core Identity.
• Supports various authentication schemes (cookies, JWT, OAuth).
• Use the AuthorizeView component to conditionally render content based on user roles and policies.

<AuthorizeView>
    <Authorized>
        <p>Welcome, @context.User.Identity.Name!</p>
    </Authorized>
    <NotAuthorized>
        <p>Please log in.</p>
    </NotAuthorized>
</AuthorizeView>

Deployment

Deploying Blazor applications depends on the hosting model:

• Blazor Server: Deploy as a standard ASP.NET Core application to any .NET-supported hosting environment (IIS, Azure App Service, Docker).
• Blazor WebAssembly: Can be deployed as static files to any web server or CDN, or hosted within an ASP.NET Core application.

Considerations for Blazor WASM deployment include:

• Compression (GZIP, Brotli).
• Caching strategies.
• Using a CDN for faster delivery of static assets.