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

Users

Users

@if (_users is null)
{
    Loading...
}
else if (_users.Count == 0)
{
    No users found.
}
else
{
    
        @foreach (var user in _users)
        {
            
        }
    
}

@code {
    private List? _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 *@

    @User.Name
    @User.Email
     OnDelete.InvokeAsync(User.Id)">Delete

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

    [Parameter]
    public EventCallback OnDelete { get; set; }
}

@* EditForm with validation *@

    
    

    
        Name
        
         _model.Name)" />
    

    
        Email
        
         _model.Email)" />
    

    
        @if (_isSubmitting)
        {
            
        }
        Submit
    

@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](references/REFERENCE.md).

Related Topics

aspnet-core | razor-pages | security

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ngxtm
• Source: ngxtm/devkit
• License: MIT

Install and usage instructions live in the source repository linked above.