●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Single-step recipient form inside a card with a three-step progress indicator.
- Fields: Name, Address, Postal code, City, Mobile, Email, Reference.
- Validation: DataAnnotations validation, ValidationMessage per field, ValidationSummary placeholder.
- Actions: Back button (client-side) and Next (OnValidSubmit).
- Informational alert box and responsive layout for mobile.
## Key components
- EditForm, DataAnnotationsValidator, ValidationSummary, ValidationMessage
- InputText controls bound with @bind-Value
- OnValidSubmit handler (OnNextClicked) and onclick handler for back navigation
- Bootstrap classes: container, row, col-*, card, form-control-lg, btn, alert
## How it works
- Model binding uses a ReceiverModel instance populated with default values; fields use @bind-Value to synchronize input.
- Validation runs via DataAnnotationsValidator on submit; EditForm.OnValidSubmit triggers OnNextClicked when the model is valid.
- ValidationMessage components display field-specific errors; ValidationSummary is present inside an alert element (currently hidden by CSS class logic in the markup).
- Navigation and persistence are left as TODOs: OnBackClicked and OnNextClicked are stubs intended to call navigation or save services.
## Styling
- Uses Bootstrap utility and layout classes for grid and spacing.
- Custom CSS (app.css) adds a circular step-indicator, step-line, enhanced .form-control-lg, card hover, and button transitions.
- Responsive adjustments included via a mobile media query to scale indicators and paddings.
## Reuse steps
1. Add the Razor component and ReceiverModel to a Blazor project that uses Bootstrap (default Blazor templates already include Bootstrap).
2. Ensure System.ComponentModel.DataAnnotations namespace is available and import component namespaces if placed in folders.
3. Wire navigation and persistence: inject NavigationManager or a service and implement OnBackClicked and OnNextClicked to navigate/save.
4. Include the custom CSS (app.css) or merge rules into site stylesheet; keep Bootstrap classes for layout.
## Limitations & next steps
- This is a single UI step generated by Instruct UI and does not persist data or perform navigation; services, DI, and authentication must be wired in the host app.
- ValidationSummary alert is static in markup; consider toggling visibility based on EditContext validation state.
- Add server-side or client-side phone/email format checks, async validation, or address lookups as required.
- Consider adding unit tests for form validation and end-to-end tests for the multi-step flow.