🎓 All Courses | 📚 Blazor WASM Syllabus
Stickipedia University
📋 Study this course on TaskLoco

Blazor uses standard C# control flow inside Razor markup to conditionally render content and iterate over collections.

Conditional Rendering

@if (isLoading)
{
    <p>Loading...</p>
}
else if (products.Count == 0)
{
    <p>No products found.</p>
}
else
{
    <ul>
        @foreach (var p in products)
        {
            <li>@p.Name</li>
        }
    </ul>
}

Switch Statements

@switch (status)
{
    case "active":
        <span class="green">Active</span>
        break;
    default:
        <span class="gray">Unknown</span>
        break;
}

Key Attribute in Loops

When rendering lists of components, add @key to help Blazor's diffing algorithm update the DOM efficiently:

@foreach (var product in products)
{
    <ProductCard @key="product.Id" Product="product" />
}

YouTube • Top 10
Blazor WASM: Conditional Rendering and Loops
Tap to Watch ›
📸
Google Images • Top 10
Blazor WASM: Conditional Rendering and Loops
Tap to View ›

Reference:

Wikipedia: Conditional Programming

image for linkhttps://en.wikipedia.org/wiki/Conditional_(computer_programming)

📚 Blazor WASM — Full Course Syllabus
📋 Study this course on TaskLoco

TaskLoco™ — The Sticky Note GOAT