Blazor

Blazor

Priority: P1 (OPERATIONAL)

Blazor component patterns for interactive web UIs.

Implementation Guidelines

• Components: Keep components focused. Split large components into smaller ones.
• Parameters: Use [Parameter] for one-way, EventCallback for two-way binding.
• Cascading Values: Use for app-wide state (theme, user context).
• State Management: Component state for local, Fluxor/​custom service for global.
• Forms: EditForm with DataAnnotationsValidator or FluentValidation.
• JS Interop: Use IJSRuntime sparingly. Prefer Blazor bindings.
• Render Modes: Choose based on requirements (Server, WASM, Auto in .NET 8+).
• Streaming: Use [StreamRendering] for long-loading components.

Anti-Patterns

• No direct DOM manipulation: Use Blazor bindings and refs.
• No StateHasChanged() in lifecycle: Called automatically after lifecycle methods.
• No heavy computation in render: Move to OnInitialized or background task.
• No sync JS interop in Server mode: Causes UI blocking.

Code

@* UserList.razor *@
@page "/​users"
@attribute [StreamRendering]
@inject IUserService UserService

<PageTitle>Users</​PageTitle>

<h3>Users</​h3>

@if (_users is null)
{
    <p><em>Loading...</​em></​p>
}
else if (_users.Count == 0)
{
    <p>No users found.</​p>
}
else
{
    <div class="user-grid">
        @foreach (var user in _users)
        {
            <UserCard User="user" OnDelete="HandleDelete" />
        }
    </​div>
}

@code {
    private List<User>? _users;

    protected override async Task OnInitializedAsync()
    {
        _users = await UserService.GetAllAsync();
    }

    private async Task HandleDelete(int userId)
    {
        await UserService.DeleteAsync(userId);
        _users = await UserService.GetAllAsync();
    }
}

@* UserCard.razor - Reusable component *@
<div class="card">
    <h5>@User.Name</​h5>
    <p>@User.Email</​p>
    <button @onclick="() => OnDelete.InvokeAsync(User.Id)">Delete</​button>
</​div>

@code {
    [Parameter, EditorRequired]
    public User User { get; set; } = default!;

    [Parameter]
    public EventCallback<int> OnDelete { get; set; }
}

@* EditForm with validation *@
<EditForm Model="@_model" OnValidSubmit="HandleSubmit" FormName="CreateUser">
    <DataAnnotationsValidator />
    <ValidationSummary class="text-danger" />

    <div class="mb-3">
        <label class="form-label">Name</​label>
        <InputText @bind-Value="_model.Name" class="form-control" />
        <ValidationMessage For="@(() => _model.Name)" />
    </​div>

    <div class="mb-3">
        <label class="form-label">Email</​label>
        <InputText @bind-Value="_model.Email" class="form-control" type="email" />
        <ValidationMessage For="@(() => _model.Email)" />
    </​div>

    <button type="submit" class="btn btn-primary" disabled="@_isSubmitting">
        @if (_isSubmitting)
        {
            <span class="spinner-border spinner-border-sm"></​span>
        }
        Submit
    </​button>
</​EditForm>

@code {
    private CreateUserModel _model = new();
    private bool _isSubmitting;

    private async Task HandleSubmit()
    {
        _isSubmitting = true;
        await UserService.CreateAsync(_model);
        _isSubmitting = false;
        NavigationManager.NavigateTo("/​users");
    }
}

Reference & Examples

For lifecycle, state management, and JS interop: See references/​REFERENCE.md.

Related Topics

aspnet-core | razor-pages | security