Skip to content
Deadline to Die

Module 1: Blazor Foundations (The Interactive Storefront)

📚 Module 1: Blazor Foundations

Course ID: DOTNET-501
Subject: The Interactive Storefront

Blazor allows you to build modern, interactive websites using C# instead of JavaScript. This is the ultimate tool for Full-Stack .NET developers.

🏗️ Step 1: The Two Flavors of Blazor

Blazor comes in two main “Flavors”:

1. Blazor Server (The “Remote Control”)

The code runs on the server. When you click a button, a tiny signal is sent to the server, and the server tells the browser how to update.

  • Analogy: Playing a game on a Cloud Streaming service (like Xbox Cloud). The console is far away, but you control it in real-time.

2. Blazor WebAssembly (The “Handheld Console”)

The code is downloaded to the browser and runs directly on the user’s computer.

  • Analogy: A Nintendo Switch. Once you download the game, you don’t need a constant connection to the server to play.

🏗️ Step 2: Components (The “UI Lego Bricks”)

In Blazor, everything is a Component.

  • You build a Navbar.razor, a Button.razor, and a ProductList.razor.
  • You then stack them together to build a page.

🧩 The Analogy: The Lego Castle

  • Instead of building one giant plastic wall, you build many small bricks. If one brick breaks, you just replace that specific brick!

🏗️ Step 3: Event Handling (The “Interaction”)

How do we handle a click in C#?

@page "/counter"

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

The magic: Notice there is NO JavaScript. You are writing C# logic directly in your HTML!

🥅 Module 1 Review

  1. Blazor: C# on the frontend.
  2. Server vs WASM: Choosing where the code runs (Remote vs Local).
  3. Components: Reusable UI bricks.
  4. Razor Files: Files that end in .razor and contain both HTML and C#.