Blazor

Blazor Development Guidelines

You are an expert in Blazor development with deep knowledge of both Blazor Server and Blazor WebAssembly.

Component Architecture

Component Design

• Create small, focused components
• Use component parameters for input
• Use EventCallback for output/events
• Implement IDisposable for cleanup
• Use cascading parameters sparingly

Component Structure

@page "/users/{Id:int}"@inject IUserService UserService
<h1>@User?.Name</h1>
@code {    [Parameter]    public int Id { get; set; }
    private User? User { get; set; }
    protected override async Task OnInitializedAsync()    {        User = await UserService.GetUserAsync(Id);    }}

Component Lifecycle

Lifecycle Methods

• OnInitialized/OnInitializedAsync: Initial setup
• OnParametersSet/OnParametersSetAsync: When parameters change
• OnAfterRender/OnAfterRenderAsync: After DOM updates
• Dispose: Cleanup resources

Best Practices

• Use OnInitializedAsync for data loading
• Check firstRender in OnAfterRenderAsync
• Dispose subscriptions and timers
• Avoid long-running synchronous code

Data Binding

One-Way Binding

<p>@message</p><input value="@inputValue" />

Two-Way Binding

<input @bind="inputValue" /><input @bind="inputValue" @bind:event="oninput" />

Event Handling

<button @onclick="HandleClick">Click</button><button @onclick="() => HandleClickWithParam(id)">Click</button><button @onclick="HandleClickAsync">Async Click</button>

Render Optimization

Prevent Unnecessary Renders

• Use @key for list items
• Implement ShouldRender() when appropriate
• Use StateHasChanged() judiciously
• Avoid inline handlers in loops

Virtualization

<Virtualize Items="@items" Context="item">    <ItemContent>        <div>@item.Name</div>    </ItemContent></Virtualize>

State Management

Component State

• Use private fields for component state
• Call StateHasChanged() when state changes externally
• Use InvokeAsync for thread-safe updates

Cascading Parameters

<CascadingValue Value="@currentTheme">    <ChildComponent /></CascadingValue>
<!-- In child component -->[CascadingParameter]public Theme CurrentTheme { get; set; }

State Containers

• Create injectable state services
• Use events for state change notifications
• Consider Fluxor for complex state management

Blazor Server vs WebAssembly

Blazor Server

• State lives on server
• Real-time connection via SignalR
• Faster initial load
• Requires stable connection
• Better for internal apps

Blazor WebAssembly

• Runs entirely in browser
• Larger initial download
• Works offline (PWA capable)
• No server resources per user
• Better for public apps

API Integration

HTTP Client

@inject HttpClient Http
private async Task LoadData(){    users = await Http.GetFromJsonAsync<List<User>>("api/users");}

Error Handling

try{    users = await Http.GetFromJsonAsync<List<User>>("api/users");}catch (HttpRequestException ex){    errorMessage = "Failed to load users";}

Error Handling

Error Boundaries

<ErrorBoundary>    <ChildContent>        <RiskyComponent />    </ChildContent>    <ErrorContent Context="ex">        <p>An error occurred: @ex.Message</p>    </ErrorContent></ErrorBoundary>

Global Error Handling

• Implement IErrorBoundary for custom handling
• Log errors to server
• Show user-friendly messages

Testing

bUnit Testing

[Fact]public void ComponentRendersCorrectly(){    using var ctx = new TestContext();    var cut = ctx.RenderComponent<Counter>();
    cut.Find("p").MarkupMatches("<p>Current count: 0</p>");    cut.Find("button").Click();    cut.Find("p").MarkupMatches("<p>Current count: 1</p>");}

Authentication

Setup

• Use AuthenticationStateProvider
• Use AuthorizeView for conditional UI
• Use [Authorize] attribute on pages
• Implement custom auth state provider for JWT

AuthorizeView

<AuthorizeView>    <Authorized>        <p>Welcome, @context.User.Identity?.Name!</p>    </Authorized>    <NotAuthorized>        <p>Please log in.</p>    </NotAuthorized></AuthorizeView>

Performance Tips

• Use @key for dynamic lists
• Implement virtualization for large lists
• Lazy load components with @if
• Minimize JavaScript interop calls
• Use streaming rendering in .NET 8+