# Blazor Mudblazor Guidelines > Blazor component best practices and MudBlazor usage for ISLAMU Event. Covers Server + WebAssembly hybrid, MudBlazor components, lifecycle, state management, and render modes. - Skill: `majiayu000/blazor-mudblazor-guidelines` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds add majiayu000/blazor-mudblazor-guidelines` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/blazor-mudblazor-guidelines/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/blazor-mudblazor-guidelines --- # Blazor + MudBlazor Guidelines ## 🎯 Purpose Provides best practices for building UI components with **Blazor** (Server + WebAssembly hybrid) and **MudBlazor** in the ISLAMU Event project. ## ⚡ When This Skill Activates **Triggered by**: - Keywords: "blazor", "component", "razor", "mudblazor", "ui", "page", "dialog", "render", "parameter" - File patterns: `**/*.razor`, `**/*.razor.cs`, `**/*.Client/**/*.cs` - Content patterns: `@page`, `@inject`, `Events Events @if (_events == null) { } else { @foreach (var evt in _events) { @evt.Title @evt.Description View Details } } @code { private List? _events; protected override async Task OnInitializedAsync() { _events = await Http.GetFromJsonAsync>("api/v1/events"); } private void NavigateToDetails(Guid id) { NavigationManager.NavigateTo($"/events/{id}"); } } ``` ### MudBlazor Grid System ```razor ``` **Breakpoints**: - `xs` - Extra small (mobile) - `sm` - Small (tablet portrait) - `md` - Medium (tablet landscape) - `lg` - Large (desktop) - `xl` - Extra large ### Component Parameters ```razor @* Parent Component *@ @* Child Component: EventCard.razor *@ @Event.Title Delete @code { [Parameter] public EventDto Event { get; set; } = null!; [Parameter] public EventCallback OnDelete { get; set; } private async Task DeleteClicked() { await OnDelete.InvokeAsync(Event.Id); } } ``` ### Dependency Injection ```razor @inject IMediator Mediator @inject ISnackbar Snackbar @inject NavigationManager NavigationManager @inject AuthenticationStateProvider AuthStateProvider @inject IDialogService DialogService @code { protected override async Task OnInitializedAsync() { // Use injected services var authState = await AuthStateProvider.GetAuthenticationStateAsync(); var user = authState.User; } } ``` ### Render Modes ```razor @* Interactive Auto (project default) *@ @rendermode InteractiveAuto @* Interactive Server only *@ @rendermode InteractiveServer @* Interactive WebAssembly only *@ @rendermode InteractiveWebAssembly @* Static Server Rendering (no interactivity) *@ @* No @rendermode directive *@ ``` ## ✅ Do's - ✅ **DO** use `@rendermode="InteractiveAuto"` (project default) - ✅ **DO** use MudBlazor components over custom HTML - ✅ **DO** use `[Parameter]` for component inputs - ✅ **DO** use `EventCallback` for child → parent communication - ✅ **DO** use `@inject` for dependency injection - ✅ **DO** use `OnInitializedAsync` for async initialization - ✅ **DO** use `MudGrid`/`MudItem` for responsive layouts - ✅ **DO** use `ISnackbar` for notifications (not JavaScript alert) - ✅ **DO** use `StateHasChanged()` when updating from non-UI events - ✅ **DO** implement `IDisposable` for event cleanup ## ❌ Don'ts - ❌ **DON'T** use raw HTML when MudBlazor component exists - ❌ **DON'T** use JavaScript interop for what MudBlazor provides - ❌ **DON'T** forget `@rendermode` on interactive components - ❌ **DON'T** use `[Parameter]` properties without `{ get; set; }` - ❌ **DON'T** call `StateHasChanged()` unnecessarily (impacts performance) - ❌ **DON'T** access HttpContext in WASM components (server only) - ❌ **DON'T** use `OnAfterRender` for data fetching (use `OnInitializedAsync`) ## 🎨 Common MudBlazor Components ### MudButton ```razor Click Me ``` ### MudTextField ```razor ``` ### MudSelect ```razor @foreach (var status in statuses) { @status.Name } ``` ### MudDialog ```razor Are you sure you want to delete this event? Cancel Delete @code { [CascadingParameter] MudDialogInstance MudDialog { get; set; } = null!; void Cancel() => MudDialog.Cancel(); void Confirm() => MudDialog.Close(DialogResult.Ok(true)); } ``` ### MudTable ```razor Title Date Actions @context.Title @context.StartDate.ToShortDateString() ``` ## 🔄 Component Lifecycle ``` Constructor ↓ SetParametersAsync ↓ OnInitialized / OnInitializedAsync ← Data fetching here ↓ OnParametersSet / OnParametersSetAsync ↓ BuildRenderTree (first render) ↓ OnAfterRender / OnAfterRenderAsync(firstRender: true) ← JS interop here ↓ [Parameters changed? → OnParametersSet again] ↓ [StateHasChanged called? → Re-render] ↓ OnAfterRender / OnAfterRenderAsync(firstRender: false) ↓ Dispose (if IDisposable) ``` ## 🎓 ISLAMU Event Specific Patterns ### Theme Management (Dark/Light) ```razor @* App.razor pattern *@ @inject IHttpContextAccessor HttpContextAccessor @code { var theme = HttpContextAccessor.HttpContext?.Request.Cookies["theme"]; var isDark = theme == "dark"; } ``` ### Authentication State ```razor Welcome, @context.User.Identity?.Name! Login ``` ### Global Imports (_Imports.razor) ```razor @using MudBlazor @using MudBlazor.Services @using Explore.Blazor @using Explore.Blazor.Client @using Microsoft.AspNetCore.Components.Authorization ``` ## 📖 Deep Dive For comprehensive guidance: - **Component Structure**: [component-structure.md](resources/component-structure.md) - **MudBlazor Components**: [mudblazor-components.md](resources/mudblazor-components.md) - **State Management**: [state-management.md](resources/state-management.md) - **Render Modes**: [render-modes.md](resources/render-modes.md) - **Common Patterns**: [common-patterns.md](resources/common-patterns.md) --- **Related Skills**: - `clean-architecture-rules` - Ensures components are in correct layer - `cqrs-mediatr-guidelines` - MediatR usage from Blazor - `backend-dev-guidelines` - API integration **Enforcement Level**: 💡 SUGGEST (Provides guidance, doesn't block)