●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Full tournament creation form in a card layout: name, start/end dates, sport select, format, event type, age category, location, image URL, description, public toggle.
- Client-side validation using DataAnnotations and custom cross-field validation (end date >= start date).
- Image preview based on ImgUrl and a Reset action.
- Success feedback alert after simulated save.
## Key components
- EditForm, EditContext, DataAnnotationsValidator, ValidationSummary
- InputText, InputDate, InputSelect, InputTextArea, InputCheckbox
- ValidationMessage, ValidationMessageStore, @bind-Value, OnValidSubmit
## How it works
- The page binds a TournamentModel instance to an EditContext and uses @bind-Value on inputs to maintain model state.
- DataAnnotations provide attribute-based validation; DataAnnotationsValidator and ValidationMessage components render errors.
- A ValidationMessageStore is used for custom cross-field validation implemented in HandleValidSubmit; editContext.NotifyValidationStateChanged triggers UI updates.
- ResetForm replaces the model and resets EditContext and message store to clear UI state.
## Styling
- Uses Bootstrap utility and form classes: container, row, col-*, card, btn, form-control, form-select, form-check and responsive grid classes for layout.
- Icon usage (font-awesome) appears in headings and buttons; image preview uses img-fluid and inline style for max-height.
- Layout is responsive via Bootstrap column classes (col-md-6, col-lg-9).
## Reuse steps
1. Add the Razor component and TournamentModel to a Blazor project (no extra NuGet required beyond default Blazor packages).
2. Ensure Bootstrap (and font-awesome if desired) are referenced in wwwroot/index.html or _Host.cshtml.
3. Import the model namespace where needed and include System.ComponentModel.DataAnnotations.
4. Wire a persistence service or API call in HandleValidSubmit to actually save data instead of the simulated success message.
5. Optionally add client-side image upload and stronger URL validation or localization for messages.
## Limitations & next steps
- This is a single-page UI generated by Instruct UI; backend wiring (data services, authentication, authorization) is not included.
- Image field accepts remote URLs only; add file upload handling for local images if required.
- Consider server-side validation, duplicate-name checks, and richer date-range UI (e.g., date range picker) for production.