Blazor Features

Blazor Features: Your Superpowers Unlocked! 🚀

Imagine you’re building a magical LEGO house. But instead of just stacking blocks, you have special helper robots that bring you the right pieces, magic windows that talk to the outside world, and smart walls that remember everything. That’s what Blazor Features are — superpowers that make building web apps feel like magic!

The Kitchen Analogy 🍳

Think of your Blazor app as a restaurant kitchen:

• Dependency Injection = The supply closet that gives chefs exactly what they need
• JavaScript Interop = The waiter who talks to customers outside
• HttpClient = The delivery truck bringing ingredients from farms
• Forms & Validation = The recipe checker that makes sure food is made right
• EditForm = The order ticket system
• State Management = The kitchen’s memory board
• Render Fragments = Reusable recipe cards
• Virtualization = Serving one dish at a time instead of 1000 at once

1. Dependency Injection in Blazor

What Is It?

Imagine you need crayons to draw. Instead of going to the store every time, your mom puts a box of crayons on your desk every morning. That’s dependency injection!

Blazor automatically gives your components the “tools” they need without you asking for them manually.

Why It’s Awesome

• You don’t have to create tools yourself
• Easy to swap tools for testing
• Keeps your code clean and organized

How It Works

graph TD
    A["Blazor App Starts"] --> B["Register Services"]
    B --> C["Component Needs Service"]
    C --> D["Blazor Injects It Automatically"]
    D --> E["Component Uses Service"]

Example

First, you register a service (put crayons in the supply closet):

// In Program.cs
builder.Services.AddScoped<IWeatherService,
    WeatherService>();

Then, Blazor gives it to any component that asks:

@inject IWeatherService Weather

<p>Today: @Weather.GetForecast()</p>

Three Types of Services

2. JavaScript Interop

What Is It?

Your Blazor app speaks C#. But sometimes you need to talk to JavaScript libraries (like a fancy chart or map). JS Interop is your translator!

Think of it like having a friend who speaks French. When you meet French tourists, your friend translates for you.

Two-Way Communication

graph LR
    A["C# Code"] -->|Call JS| B["JavaScript"]
    B -->|Call C#| A

Calling JavaScript FROM C#

@inject IJSRuntime JS

<button @onclick="ShowAlert">
    Say Hello!
</button>

@code {
    async Task ShowAlert()
    {
        await JS.InvokeVoidAsync(
            "alert",
            "Hello from Blazor!"
        );
    }
}

Calling C# FROM JavaScript

// In your JavaScript file
DotNet.invokeMethodAsync(
    'MyApp',
    'GetMessage'
).then(result => console.log(result));

// In your C# component
[JSInvokable]
public static string GetMessage()
{
    return "Hello from C#!";
}

Pro Tips

• Use InvokeVoidAsync when you don’t need a result
• Use InvokeAsync<T> when you expect data back
• Always handle errors gracefully

3. HttpClient in Blazor

What Is It?

HttpClient is your app’s delivery truck. It goes to other servers, picks up data (like user info or weather), and brings it back.

Imagine ordering pizza. You don’t make it yourself — you call the pizza place, they make it, and deliver it to your door.

Basic Usage

@inject HttpClient Http

@code {
    List<Product> products;

    protected override async Task OnInitializedAsync()
    {
        products = await Http
            .GetFromJsonAsync<List<Product>>(
                "api/products"
            );
    }
}

Common Operations

graph TD
    A["Your App"] --> B{HttpClient}
    B -->|GET| C["Fetch Data"]
    B -->|POST| D["Send New Data"]
    B -->|PUT| E["Update Data"]
    B -->|DELETE| F["Remove Data"]

Example: All Operations

// GET - Fetch products
var items = await Http
    .GetFromJsonAsync<List<Item>>("api/items");

// POST - Create new item
await Http.PostAsJsonAsync("api/items", newItem);

// PUT - Update item
await Http.PutAsJsonAsync("api/items/1", updated);

// DELETE - Remove item
await Http.DeleteAsync("api/items/1");

4. Forms and Validation in Blazor

What Is It?

Forms collect information from users (like their name or email). Validation makes sure they filled it out correctly — like a teacher checking your homework before you submit it.

Why Validation Matters

Without validation:

• Users type “abc” for their age
• Email fields get “pizza123”
• Required fields stay empty

Built-in Validation Attributes

Example Model

public class Registration
{
    [Required(ErrorMessage = "Name needed!")]
    public string Name { get; set; }

    [EmailAddress]
    [Required]
    public string Email { get; set; }

    [Range(13, 120,
        ErrorMessage = "Age must be 13-120")]
    public int Age { get; set; }
}

5. EditForm Component

What Is It?

EditForm is Blazor’s smart form wrapper. It connects your form to a data model, handles validation, and manages form submission — all automatically!

Think of it as a smart clipboard that checks your work before turning it in.

Basic Structure

<EditForm Model="@user" OnValidSubmit="Save">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText @bind-Value="user.Name" />
    <ValidationMessage For="@(() => user.Name)" />

    <button type="submit">Save</button>
</EditForm>

@code {
    User user = new User();

    void Save()
    {
        // Form is valid, save the data!
    }
}

Form Flow

graph TD
    A["User Fills Form"] --> B["Clicks Submit"]
    B --> C{Valid?}
    C -->|Yes| D["OnValidSubmit Runs"]
    C -->|No| E["Show Error Messages"]
    E --> A

Input Components

6. State Management in Blazor

What Is It?

State is your app’s memory. It remembers things like:

• Is the user logged in?
• What’s in their shopping cart?
• Which theme did they pick?

Without state management, your app has amnesia. Every page refresh = everything forgotten!

Three State Levels

graph TD
    A["Component State"] -->|Small scope| B["Lives in one component"]
    C["Cascading State"] -->|Medium scope| D["Shared by parent + children"]
    E["App State"] -->|Big scope| F["Shared everywhere"]

Component State (Simple)

@code {
    private int count = 0;  // Component remembers this

    void Increment() => count++;
}

Cascading State (Parent to Children)

<!-- Parent component -->
<CascadingValue Value="@theme">
    <ChildComponent />
</CascadingValue>

<!-- Child component -->
@code {
    [CascadingParameter]
    public string Theme { get; set; }
}

App-Wide State Service

// Create a state container
public class CartState
{
    public List<Item> Items { get; set; } = new();
    public event Action OnChange;

    public void AddItem(Item item)
    {
        Items.Add(item);
        OnChange?.Invoke();
    }
}

Register it and inject anywhere:

builder.Services.AddScoped<CartState>();

7. Blazor Render Fragments

What Is It?

Render Fragments are reusable template pieces. Like cookie cutters — same shape, different cookies!

Imagine having a birthday card template. You use the same design but change the name for each friend.

Basic Render Fragment

<!-- Parent sends content to child -->
<Card>
    <p>This content goes inside the card!</p>
</Card>

<!-- Card.razor (the child) -->
<div class="card">
    @ChildContent
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

Named Render Fragments

<!-- Use multiple fragments -->
<Panel>
    <Header>
        <h2>My Title</h2>
    </Header>
    <Body>
        <p>My content here!</p>
    </Body>
</Panel>

<!-- Panel.razor -->
<div class="panel">
    <div class="header">@Header</div>
    <div class="body">@Body</div>
</div>

@code {
    [Parameter]
    public RenderFragment Header { get; set; }
    [Parameter]
    public RenderFragment Body { get; set; }
}

Templated Components (Advanced)

<!-- Pass data to the template -->
<ItemList Items="@products">
    <ItemTemplate Context="product">
        <li>@product.Name - $@product.Price</li>
    </ItemTemplate>
</ItemList>

8. Blazor Virtualization

What Is It?

Imagine you have 10,000 photos to show. Loading all at once = super slow. Virtualization shows only what’s on screen and loads more as you scroll.

It’s like a sushi conveyor belt. You don’t see all 100 dishes at once — just the few passing by your seat!

The Problem Without Virtualization

graph LR
    A["10,000 Items"] --> B["Browser Renders All"]
    B --> C["Slow & Laggy 😢"]

The Solution With Virtualization

graph LR
    A["10,000 Items"] --> B["Render Only 20 Visible"]
    B --> C["Fast & Smooth 🚀"]

How to Use It

<Virtualize Items="@products" Context="product">
    <div class="product-card">
        <h3>@product.Name</h3>
        <p>$@product.Price</p>
    </div>
</Virtualize>

@code {
    List<Product> products;  // Could be 10,000 items!
}

With Item Provider (For APIs)

<Virtualize ItemsProvider="@LoadProducts" Context="p">
    <p>@p.Name</p>
</Virtualize>

@code {
    async ValueTask<ItemsProviderResult<Product>>
        LoadProducts(ItemsProviderRequest request)
    {
        var items = await Http.GetFromJsonAsync
            <List<Product>>(
                quot;api/products?skip={request.StartIndex}" +
                quot;&take={request.Count}"
            );

        return new ItemsProviderResult<Product>(
            items,
            totalItemCount
        );
    }
}

Placeholder While Loading

<Virtualize Items="@items">
    <ItemContent>
        <ProductCard Product="@context" />
    </ItemContent>
    <Placeholder>
        <div class="skeleton-loader">Loading...</div>
    </Placeholder>
</Virtualize>

Putting It All Together 🎯

Here’s how all features work in a real app:

graph TD
    A["User Opens App"] --> B["DI Provides Services"]
    B --> C["HttpClient Fetches Data"]
    C --> D["State Management Stores It"]
    D --> E["Virtualization Shows List"]
    E --> F["User Clicks Edit"]
    F --> G["EditForm Validates Input"]
    G --> H["JS Interop Shows Fancy Alert"]
    H --> I["Render Fragments Build UI"]

Quick Reference Cheat Codes

You Did It! 🎉

You now understand the 8 superpowers of Blazor:

1. DI gives you tools automatically
2. JS Interop talks to JavaScript
3. HttpClient fetches data from servers
4. Validation checks user input
5. EditForm handles form logic
6. State remembers things
7. RenderFragments create reusable templates
8. Virtualization handles huge lists smoothly

Go build something amazing! 🚀