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
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"