Blazor Skill

Sorcha uses Blazor with hybrid rendering (Server + WebAssembly). The Admin UI (src/Apps/Sorcha.Admin/ ) runs behind YARP API Gateway. Components use MudBlazor for UI and support three render modes: static server, interactive server, and interactive WASM.

Quick Start

Render Mode Selection

@* WASM - Complex interactive pages (Designer, Diagrams) *@ @page "/designer" @rendermode InteractiveWebAssembly @attribute [Authorize]

@* Server - Admin pages needing real-time SignalR *@ @page "/admin/audit" @rendermode @(new InteractiveServerRenderMode(prerender: false)) @attribute [Authorize(Roles = "Administrator")]

@* Static - Public pages (Login) - no @rendermode directive *@ @page "/login" @attribute [AllowAnonymous]

Component with Loading State

@inject HttpClient Http

<MudPaper Elevation="2" Class="pa-4"> @if (_isLoading && !_hasLoadedOnce) { <MudProgressCircular Indeterminate="true" Size="Size.Small" /> } else if (_data != null) { <MudText>@_data.Title</MudText> } else if (_errorMessage != null) { <MudAlert Severity="Severity.Error">@_errorMessage</MudAlert> } </MudPaper>

@code { private DataDto? _data; private string? _errorMessage; private bool _isLoading; private bool _hasLoadedOnce;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
        await LoadDataAsync();
}

private async Task LoadDataAsync()
{
    _isLoading = true;
    try
    {
        _data = await Http.GetFromJsonAsync<DataDto>("/api/data");
        _hasLoadedOnce = true;
    }
    catch (Exception ex)
    {
        _errorMessage = ex.Message;
    }
    finally
    {
        _isLoading = false;
        StateHasChanged();
    }
}

}

Key Concepts

Concept Usage Example

Render Mode Control where component runs @rendermode InteractiveWebAssembly

CascadingParameter Receive parent state [CascadingParameter] MudBlazor.IDialogReference? MudDialog

OnAfterRenderAsync Initialize after DOM ready if (firstRender) await LoadAsync();

StateHasChanged Trigger re-render Call after async state updates

NavigationManager Programmatic navigation Navigation.NavigateTo("/", forceLoad: true)

Project Structure

Project Purpose Render Mode

Sorcha.Admin

Server host, auth, API proxy Server + prerender

Sorcha.Admin.Client

WASM components WebAssembly

Sorcha.UI.Core

Shared components Both

Sorcha.UI.Web

Main UI server Server

Sorcha.UI.Web.Client

Main UI WASM WebAssembly

Common Patterns

MudBlazor Dialog

<MudDialog DisableSidePadding="false"> <DialogContent> <MudTextField @bind-Value="_value" Label="Input" /> </DialogContent> <DialogActions> <MudButton OnClick="Cancel">Cancel</MudButton> <MudButton Color="Color.Primary" OnClick="Submit">OK</MudButton> </DialogActions> </MudDialog>

@code { [CascadingParameter] MudBlazor.IDialogReference? MudDialog { get; set; } private string _value = "";

private void Cancel() => MudDialog?.Close();
private void Submit() => MudDialog?.Close(DialogResult.Ok(_value));

}

Opening Dialog from Parent

var dialog = await DialogService.ShowAsync<LoginDialog>("Login"); var result = await dialog.Result; if (result is { Canceled: false }) { // Handle success }

See Also

• patterns - Component and authentication patterns

• workflows - Development and deployment workflows

Related Skills

• See the aspire skill for service discovery configuration

• See the signalr skill for real-time notifications

• See the jwt skill for authentication token handling

• See the yarp skill for API Gateway configuration

• See the mudblazor skill for component library details

Documentation Resources

Fetch latest Blazor/MudBlazor documentation with Context7.

Library ID: /websites/mudblazor (MudBlazor component library documentation)

Recommended Queries:

• "MudBlazor dialog service usage"

• "MudBlazor form validation"

• "MudBlazor data grid filtering"