ASP.NET Blazor - Quick Reference

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: blazor for comprehensive documentation.

Render Modes (.NET 8+)

Mode Description Use For

InteractiveServer

Server-side via SignalR Internal apps, real-time

InteractiveWebAssembly

Client-side WASM Offline, no server dependency

InteractiveAuto

Server first, then WASM Best of both worlds

Static SSR (default) No interactivity Content pages, SEO

@* Page-level render mode *@ @rendermode InteractiveServer

@* Component-level *@ <Counter @rendermode="InteractiveWebAssembly" />

Component Pattern

@* Counter.razor *@ <h3>Counter</h3> <p>Count: @count</p> <button @onclick="Increment">Click me</button>

@code { private int count = 0;

[Parameter]
public int InitialCount { get; set; } = 0;

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

protected override void OnInitialized()
{
    count = InitialCount;
}

private async Task Increment()
{
    count++;
    await OnCountChanged.InvokeAsync(count);
}

}

Forms with Validation

<EditForm Model="user" OnValidSubmit="HandleSubmit" FormName="UserForm"> <DataAnnotationsValidator /> <ValidationSummary />

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

<InputText @bind-Value="user.Email" class="form-control" />
<ValidationMessage For="@(() => user.Email)" />

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

</EditForm>

@code { [SupplyParameterFromForm] private UserModel user { get; set; } = new();

private async Task HandleSubmit()
{
    await UserService.CreateAsync(user);
    Navigation.NavigateTo("/users");
}

}

JavaScript Interop

@inject IJSRuntime JS

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

private async Task<string> GetValue()
{
    return await JS.InvokeAsync<string>("localStorage.getItem", "key");
}

}

Dependency Injection

@inject IUserService UserService @inject NavigationManager Navigation @inject ILogger<UserList> Logger

Anti-Patterns

Anti-Pattern Why It's Bad Correct Approach

InteractiveServer for public sites Latency, scaling Use Auto or WASM

Large WASM downloads Slow initial load Use Auto mode

Direct DOM manipulation Breaks diffing Use Blazor bindings

Not disposing JS interop Memory leaks Implement IAsyncDisposable

Quick Troubleshooting

Issue Likely Cause Solution

Component not interactive Missing render mode Add @rendermode directive

JS interop fails WASM restriction Use IJSRuntime correctly

State lost on navigation No state container Use cascading parameters or DI

Pre-rendering flicker Async data on init Use OnInitializedAsync with loading state