Blazor Fundamentals

🚀 Blazor Fundamentals: Build Web Apps Like Building with LEGO Blocks!

Imagine you have a magical box of LEGO blocks. Each block does something special—one shows pictures, another handles buttons, and another remembers what you typed. Blazor is like that magical LEGO box for building websites!

🌟 What is Blazor? (Blazor Overview)

Think of it this way: When you want to build a toy house, you can use wooden blocks, plastic blocks, or even cardboard. Blazor is a special kind of block—made with C# (a programming language)—that lets you build websites!

The Magic Part 🎩

Most websites use JavaScript (a different language). But what if you already know C#? Blazor says: “No problem! Use C# instead!”

// This is C# code running in your browser!
<h1>Hello, @name!</h1>

@code {
    string name = "Friend";
}

Real Life Example:

• Old way: Learn JavaScript to make buttons work ❌
• Blazor way: Use C# you already know! ✅

graph TD
    A["You Write C# Code"] --> B["Blazor Magic"]
    B --> C["Website Works!"]
    style A fill:#667eea,color:#fff
    style B fill:#f093fb,color:#fff
    style C fill:#4fd1c5,color:#fff

🏠 Blazor Server: The Walkie-Talkie Approach

Imagine this: You’re playing with a friend using walkie-talkies. Every time you want to do something, you press a button and talk to your friend. They do the work and tell you what happened.

How It Works

Your browser is like YOU with a walkie-talkie. The SERVER is like your friend doing all the hard work!

graph TD
    A["👤 Your Browser"] -->|Button Click| B["📡 Server"]
    B -->|Here's what changed!| A
    style A fill:#667eea,color:#fff
    style B fill:#f093fb,color:#fff

Example: A Counter Button

<button @onclick="AddOne">
    Count: @count
</button>

@code {
    int count = 0;

    void AddOne()
    {
        count++;
        // Server updates this!
    }
}

When you click:

1. 📱 Browser tells server: “Button clicked!”
2. 🖥️ Server adds 1 to count
3. 📱 Browser shows new number

✅ Good Things

• Works on ANY browser (even old ones!)
• App starts FAST
• Your code stays safe on server

⚠️ Watch Out

• Needs internet connection always
• Slow internet = slow app

🎮 Blazor WebAssembly: The Game Console Approach

Now imagine: Instead of walkie-talkies, you have a game console. The WHOLE GAME is inside your console. No need to call anyone!

How It Works

Your browser downloads the ENTIRE app (like downloading a game). Then everything runs RIGHT THERE in your browser!

graph TD
    A["📥 Download App"] --> B["🎮 Browser Has Everything"]
    B --> C["⚡ Works Offline Too!"]
    style A fill:#f093fb,color:#fff
    style B fill:#667eea,color:#fff
    style C fill:#4fd1c5,color:#fff

Same Counter, Different Magic

<button @onclick="AddOne">
    Count: @count
</button>

@code {
    int count = 0;

    void AddOne()
    {
        count++;
        // Browser does this itself!
    }
}

When you click:

1. 📱 Browser adds 1 (no server needed!)
2. 📱 Screen updates instantly

✅ Good Things

• Works WITHOUT internet (after first load)
• Super fast after loading
• Server doesn’t get tired

⚠️ Watch Out

• First load takes longer (downloading the game)
• Old browsers might not work

🎭 Render Modes: Choose Your Adventure!

Story time: You’re at an ice cream shop. You can get:

• 🍦 Ice cream cone (eat right away)
• 🥤 Milkshake (blended fresh)
• 🍨 Take-home tub (enjoy later)

Blazor has similar choices called Render Modes!

The Four Modes

How to Use Them

// Static - Just display, no interaction
@rendermode InteractiveServer

// Server mode
@rendermode InteractiveServer

// WebAssembly mode
@rendermode InteractiveWebAssembly

// Auto mode (best of both!)
@rendermode InteractiveAuto

When to Use What?

graph TD
    A{Need Interaction?} -->|No| B["Static Mode"]
    A -->|Yes| C{Fast First Load?}
    C -->|Yes| D["Server Mode"]
    C -->|Need Offline?| E["WebAssembly Mode"]
    C -->|Want Both?| F["Auto Mode"]
    style A fill:#667eea,color:#fff
    style B fill:#ecc94b,color:#000
    style D fill:#f093fb,color:#fff
    style E fill:#4fd1c5,color:#fff
    style F fill:#68d391,color:#000

🧱 Blazor Components: Your LEGO Blocks

Remember our LEGO analogy? Each component is ONE LEGO block. You can combine them to build amazing things!

What’s a Component?

A component is a piece of your website that:

• Has its own look (HTML)
• Has its own brain (C# code)
• Can be reused ANYWHERE!

Your First Component

<!-- Greeting.razor -->
<div class="greeting-box">
    <h2>👋 Hello!</h2>
    <p>Welcome to my app!</p>
</div>

@code {
    // Component's brain goes here
}

Using Your Component

<!-- In any page -->
<Greeting />
<Greeting />
<Greeting />
<!-- Three greeting boxes appear! -->

Real Example: A Card Component

<!-- Card.razor -->
<div class="card">
    <h3>🎴 @Title</h3>
    <p>@Content</p>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public string Content { get; set; }
}

graph TD
    A["Card Component"] --> B["Card 1: Games"]
    A --> C["Card 2: Music"]
    A --> D["Card 3: Photos"]
    style A fill:#667eea,color:#fff
    style B fill:#f093fb,color:#fff
    style C fill:#4fd1c5,color:#fff
    style D fill:#ecc94b,color:#000

📬 Component Parameters: Passing Messages

Think about birthday cards: You write the person’s NAME on each card. The card design is the same, but the name changes!

Parameters = Customization

Parameters let you customize a component when you use it.

Example: A Name Tag

<!-- NameTag.razor -->
<div class="name-tag">
    <span>Hello, my name is</span>
    <strong>@Name</strong>
</div>

@code {
    [Parameter]
    public string Name { get; set; } = "Guest";
}

Using Parameters

<NameTag Name="Alice" />
<NameTag Name="Bob" />
<NameTag Name="Charlie" />

Result:

• “Hello, my name is Alice”
• “Hello, my name is Bob”
• “Hello, my name is Charlie”

Different Types of Parameters

@code {
    // Text
    [Parameter]
    public string Message { get; set; }

    // Number
    [Parameter]
    public int Count { get; set; }

    // Yes/No
    [Parameter]
    public bool IsVisible { get; set; }

    // Action when something happens
    [Parameter]
    public EventCallback OnClick { get; set; }
}

Passing Different Types

<MyComponent
    Message="Hello!"
    Count="5"
    IsVisible="true"
    OnClick="HandleClick" />

🔄 Component Lifecycle: A Day in the Life

Imagine a plant’s life: 🌱 Seed → 🌿 Sprout → 🌻 Flower → 🍂 Wilt

Components have a life too! They’re born, they grow, they update, and sometimes they go away.

The Lifecycle Steps

graph TD
    A["🌱 SetParametersAsync"] --> B["📋 OnInitialized"]
    B --> C["🔧 OnParametersSet"]
    C --> D["🎨 OnAfterRender"]
    D --> E{Parameters Changed?}
    E -->|Yes| C
    E -->|No| F["Waiting..."]
    F --> E
    style A fill:#68d391,color:#000
    style B fill:#667eea,color:#fff
    style C fill:#f093fb,color:#fff
    style D fill:#4fd1c5,color:#fff

What Each Step Does

Example: Loading Data

@code {
    List<string> items = new();
    bool loading = true;

    // Called ONCE when component starts
    protected override async Task
        OnInitializedAsync()
    {
        items = await LoadItems();
        loading = false;
    }

    // Called when parent sends new data
    protected override void
        OnParametersSet()
    {
        Console.WriteLine("Got new data!");
    }

    // Called after screen updates
    protected override void
        OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Console.WriteLine("First paint!");
        }
    }
}

Lifecycle in Action

<!-- Counter with lifecycle -->
<p>Count: @count</p>
<button @onclick="Add">+1</button>

@code {
    int count = 0;

    protected override void OnInitialized()
    {
        // Load saved count maybe?
        count = 0;
        Console.WriteLine("Counter ready!");
    }

    void Add()
    {
        count++;
        // OnAfterRender runs after this!
    }
}

🎯 Quick Summary

🌈 You Did It!

You now understand Blazor fundamentals! Like learning to build with LEGO, start with simple blocks and soon you’ll build amazing things!

Remember:

• 🧱 Components are your building blocks
• 📬 Parameters customize them
• 🔄 Lifecycle methods control their behavior
• 🏠 Server or 🎮 WebAssembly—you choose!

Happy Building! 🚀