Lesson 12 of 40
Web Development
Intermediate
50 min
Blazor Full-Stack Web Apps
Build interactive full-stack web apps with Blazor's unified component model in .NET 10 — server, WebAssembly, and Auto render modes.
Part 1: Blazor Render Modes
Blazor in .NET 10 supports per-component render modes:
@* Server-side rendering (fastest initial load) *@
@rendermode RenderMode.InteractiveServer
@* WebAssembly (runs in browser) *@
@rendermode RenderMode.InteractiveWebAssembly
@* Auto (SSR then WASM) *@
@rendermode RenderMode.InteractiveAuto
@rendermode RenderMode.InteractiveServer
@* WebAssembly (runs in browser) *@
@rendermode RenderMode.InteractiveWebAssembly
@* Auto (SSR then WASM) *@
@rendermode RenderMode.InteractiveAuto
Part 2: Blazor Component Architecture
Components in Blazor follow a lifecycle:
OnInitialized → OnParametersSet → OnAfterRender. Use StateHasChanged() to manually trigger re-renders when state changes outside the component.Part 3: Forms and Validation
<EditForm Model="@order" OnValidSubmit="HandleSubmit">
<DataAnnotationsValidator />
<InputText @bind-Value="order.CustomerName" />
<ValidationMessage For="@(() => order.CustomerName)" />
<button type="submit">Place Order</button>
</EditForm>
<DataAnnotationsValidator />
<InputText @bind-Value="order.CustomerName" />
<ValidationMessage For="@(() => order.CustomerName)" />
<button type="submit">Place Order</button>
</EditForm>
Part 4: Blazor + SignalR Real-time
Blazor Server uses SignalR under the hood. For custom real-time scenarios:
// Hub
public class OrderHub : Hub
{
public async Task SendUpdate(Order order) =>
await Clients.All.SendAsync("OrderUpdated", order);
}
public class OrderHub : Hub
{
public async Task SendUpdate(Order order) =>
await Clients.All.SendAsync("OrderUpdated", order);
}
