Introduction to Blazor

Blazor lets you build interactive web UIs using C# instead of JavaScript.

Component Structure

A Blazor component is a self-contained piece of UI:

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

Key Concepts

1. Components
   • Reusable UI pieces
   • Mix HTML and C# code
   • Handle events and state
2. Data Binding
   • One-way binding (@value)
   • Two-way binding (@bind)
   • Event binding (@onclick)
3. Lifecycle Methods
   • OnInitialized
   • OnParametersSet
   • OnAfterRender

Hosting Models

1. Blazor Server

   builder.Services.AddServerSideBlazor();
   

2. Blazor WebAssembly

   builder.Services.AddBlazorWebAssembly();