●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Character creation form with validation and submission button.
- Selectable race and class dropdowns (MudSelect) with dependent disabling of class until a race is chosen.
- Live information panels using MudCard and MudCardMedia to preview race and class images and descriptions.
- Form validation driven by data annotations and MudForm state to enable/disable the primary action.
## Key components
- MudForm, MudTextField, MudSelect, MudSelectItem
- MudButton, MudGrid, MudItem
- MudPaper, MudCard, MudCardMedia, MudCardHeader, MudCardContent
- C# view model with DataAnnotations (Required, StringLength)
## How it works
- A CharacterViewModel instance binds to the MudForm; fields use @bind-Value and For expressions to connect inputs to model properties.
- DataAnnotations on the view model provide validation messages that MudForm evaluates; the submit MudButton uses _form.IsValid to enable submission.
- MudSelect items use custom Equals/GetHashCode in RaceModel and ClassModel so MudSelect compares object instances correctly.
- OnInitialized populates in-memory lists for races and classes; CreateCharacter logs the selection (placeholder for persistence).
## Styling
- Uses MudBlazor components and theme-aware classes (mud-theme-background-hover, elevation, Variant and Color properties).
- Layout is responsive via MudGrid and MudItem breakpoints (xs, md) to stack form and preview panels on small screens.
## Reuse steps
1. Install MudBlazor NuGet and register services (builder.Services.AddMudServices()).
2. Add MudBlazor imports in _Imports.razor and include MudThemeProvider/MudDialogProvider in MainLayout if needed.
3. Copy the .razor and model classes; ensure models override Equals/GetHashCode for MudSelect behavior.
4. Adjust OnInitialized to load real data or inject a service to fetch races/classes.
5. Wire CreateCharacter to persistence and navigation (e.g., save to DB and navigate to game page).
## Limitations & next steps
- This is a single page example generated by Instruct UI and does not include backend services, authentication, or persistent storage.
- Validation uses DataAnnotations but server-side validation and duplicate-name checks are not implemented.
- Extend by injecting a data service, adding image hosting or caching, adding character stats, and providing navigation after creation.