d-subrahmanyam/aspnet-blazor

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 |