Blazor Notes (.NET 8 Context)

1. What is Blazor?

• Blazor is a framework in ASP.NET Core that allows building interactive web UIs using C# instead of JavaScript.
• Part of the .NET ecosystem; runs on top of ASP.NET Core.
• Component-based like React/Angular, but with Razor syntax and full .NET backend integration.
• Two main hosting models:
  1. Blazor Server
     • Runs UI logic on the server.
     • Communication via SignalR (real-time connection).
     • Very fast load times, smaller download.
     • Downsides: requires constant server connection.
  2. Blazor WebAssembly (WASM)
     • Runs client-side in the browser using WebAssembly.
     • Offline support, no server round-trips for UI logic.
     • Larger download size, slower initial load.

In Frank Liu’s IMS course, the focus is on Blazor Server with .NET 8.

2. Core Concepts

• Razor Components (.razor)

  • The building blocks of Blazor apps.

  • Combine C# + HTML in a single file.

  • Example:

    <h3>@Title</h3>
    <button @onclick="Increment">Click Me</button>
    
    @code {
        private string Title = "Counter Example";
        private int count = 0;
        private void Increment() => count++;
    }
    
    

• Data Binding

  • One-way binding: @variable
  • Two-way binding: bind-Value="@variable"

• Event Handling

  • Events like @onclick, @oninput, @onsubmit.

• Routing

  • Each component can be a page with @page "/route".
  • Uses NavLink for navigation.

• Layouts

  • Shared structure for multiple components.
  • Similar to “master pages” or React layouts.

3. State Management

• Component state
  • Stored in fields/properties inside .razor components.
• Scoped state (via DI services)
  • Register a service (e.g., CartService) and inject it across components.
• Persistent state
  • Can use local storage (in WASM) or database persistence (in Server).