Blazor Server: Real-Time .NET UI Without JavaScript

Browser                    Server
  │                           │
  │  User clicks button        │
  │──── SignalR event ────────►│
  │                            │  C# event handler runs
  │                            │  DOM diff computed
  │◄─── UI diff (bytes) ───────│
  │  Browser patches DOM       │

dotnet new blazorserver -n OrderFlow.Admin

dotnet new blazor -n OrderFlow.Admin --interactivity Server

@* Pages/Dashboard.razor *@
@page "/dashboard"
@rendermode InteractiveServer
@inject IOrderRepository OrderRepo
@inject IHubContext<NotificationHub> Hub
@implements IAsyncDisposable

<h1>Live Dashboard</h1>

<div class="row">
    <div class="col-md-3">
        <div class="card text-bg-primary">
            <div class="card-body">
                <h2>@_pendingCount</h2>
                <p>Pending Orders</p>
            </div>
        </div>
    </div>
</div>

<table class="table mt-4">
    <tbody>
        @foreach (var order in _recentOrders)
        {
            <tr class="@(_newOrderIds.Contains(order.Id) ? "table-warning" : "")">
                <td>@order.Id</td>
                <td>@order.CustomerName</td>
                <td>@order.Total.ToString("C")</td>
                <td>@order.CreatedAt.ToString("HH:mm:ss")</td>
            </tr>
        }
    </tbody>
</table>

@code {
    private List<OrderDto> _recentOrders = new();
    private int _pendingCount;
    private HashSet<Guid> _newOrderIds = new();
    private Timer? _refreshTimer;

    protected override async Task OnInitializedAsync()
    {
        await LoadDataAsync();

        // Refresh every 5 seconds
        _refreshTimer = new Timer(async _ =>
        {
            await LoadDataAsync();
            await InvokeAsync(StateHasChanged); // marshal to circuit thread
        }, null, TimeSpan.FromSeconds(5), TimeSpan.FromSeconds(5));
    }

    private async Task LoadDataAsync()
    {
        _recentOrders  = await OrderRepo.GetRecentAsync(50);
        _pendingCount  = await OrderRepo.CountPendingAsync();
    }

    public async ValueTask DisposeAsync()
    {
        if (_refreshTimer is not null)
            await _refreshTimer.DisposeAsync();
    }
}

@* Passing data to child components *@
<OrderTable Orders="_recentOrders" OnOrderSelected="HandleSelected" />

@* Cascading values — available to entire subtree without explicit params *@
<CascadingValue Value="_currentUser">
    <MainContent />
</CascadingValue>

@* Child consuming cascade *@
@code {
    [CascadingParameter] private UserInfo? CurrentUser { get; set; }
}

@page "/orders/live"
@rendermode InteractiveServer
@inject OrderEventService EventService
@implements IDisposable

<h2>Live Orders Feed</h2>

@foreach (var order in _orders)
{
    <div class="alert alert-info">
        New order @order.Id from @order.CustomerName — @order.Total.ToString("C")
    </div>
}

@code {
    private List<OrderDto> _orders = new();

    protected override void OnInitialized()
    {
        EventService.OnOrderCreated += HandleNewOrder;
    }

    private void HandleNewOrder(OrderDto order)
    {
        _orders.Insert(0, order);
        if (_orders.Count > 20) _orders.RemoveAt(_orders.Count - 1);
        InvokeAsync(StateHasChanged); // required — event fires on background thread
    }

    public void Dispose()
    {
        EventService.OnOrderCreated -= HandleNewOrder;
    }
}

// Singleton service that bridges domain events to Blazor components
public class OrderEventService
{
    public event Action<OrderDto>? OnOrderCreated;

    public void NotifyOrderCreated(OrderDto order)
        => OnOrderCreated?.Invoke(order);
}

@page "/orders/{id:guid}"
@attribute [StreamRendering]  // starts sending HTML immediately

<h1>Order Details</h1>

@if (_order is null)
{
    <p>Loading...</p>   @* shown immediately while awaiting *@
}
else
{
    <OrderDetail Order="_order" />
}

@code {
    [Parameter] public Guid Id { get; set; }
    private OrderDto? _order;

    protected override async Task OnInitializedAsync()
    {
        _order = await OrderService.GetOrderAsync(Id);  // streams HTML before this completes
    }
}

<EditForm Model="_model" OnValidSubmit="HandleSubmit" FormName="create-order">
    <DataAnnotationsValidator />

    <div class="mb-3">
        <label class="form-label">Customer</label>
        <InputText class="form-control" @bind-Value="_model.CustomerId" />
        <ValidationMessage For="() => _model.CustomerId" />
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

@code {
    [SupplyParameterFromForm]
    private CreateOrderModel _model { get; set; } = new();

    private async Task HandleSubmit()
    {
        await OrderService.CreateAsync(_model);
        Nav.NavigateTo("/orders");
    }
}

@* _Imports.razor or individual pages *@
<ErrorBoundary>
    <ChildContent>
        <OrdersTable />
    </ChildContent>
    <ErrorContent Context="ex">
        <div class="alert alert-danger">
            Something went wrong: @ex.Message
        </div>
    </ErrorContent>
</ErrorBoundary>

// Azure App Service — ARR affinity
"siteProperties": { "clientAffinityEnabled": true }

builder.Services.AddSignalR().AddAzureSignalR(connectionString);
// or
builder.Services.AddSignalR().AddStackExchangeRedis(redisConnectionString);

// 1. In-component — lost on navigation
private List<Order> _orders = new();

// 2. Scoped (per circuit/user) — survives navigation within session
builder.Services.AddScoped<CartState>();

// 3. Singleton (all users) — shared state, must be thread-safe
builder.Services.AddSingleton<AppMetrics>();

await JS.InvokeVoidAsync("localStorage.setItem", "cart", JsonSerializer.Serialize(cart));
var stored = await JS.InvokeAsync<string>("localStorage.getItem", "cart");