●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Customer details form with first name and email fields.
- Contact list rendered as stacked contact cards with favorite accent and a button to add contacts.
- Reusable AddressInfo card with street, street number, postal code, area and city fields.
- Action buttons for Save and Cancel and an AddContact handler that mutates the contacts list.
## Key components
- InputText (Microsoft.AspNetCore.Components.Forms)
- ContactCard.razor (component with [Parameter] properties: Number, Label, IconClass, IsFavorite)
- AddressInfo.razor (component accepting AddressModel parameter)
- ContactModel and AddressModel POCO classes
- Standard Blazor bindings: @bind-Value, @onclick, foreach rendering
## How it works
- Data binding uses InputText with @bind-Value to local fields and model properties (e.g., customerName, customerAddress.Street).
- The contacts list is a local List<ContactModel>; AddContact appends a new ContactModel and calls StateHasChanged.
- ContactCard instances receive data via component parameters and render markup and FontAwesome icons.
- SaveCustomer and CancelEdit are defined but contain placeholder logic; persistence and API calls are not implemented.
## Styling
- Uses Bootstrap layout and utility classes (container, row, col-*, card, btn, form-control).
- Custom CSS in app.css provides .form-control-custom, contact-card styling, accent column, and responsive tweaks.
- FontAwesome icons are referenced via class names (e.g., fas fa-phone). Ensure icon font is included in the host page.
## Reuse steps
1. Add the Razor files (CustomerPage.razor, ContactCard.razor, AddressInfo.razor) and model classes to the Blazor project.
2. Include Bootstrap CSS and FontAwesome in index.html/_Host.cshtml, or add a Bootstrap package for styling.
3. Add app.css to the project and reference it after Bootstrap to override styles.
4. Wire persistence: inject an application service (e.g., ICustomerService) and call it from SaveCustomer; convert local fields to a DTO or model.
5. Add EditForm and DataAnnotationsValidator if validation is required; annotate AddressModel and ContactModel with data annotations.
## Limitations & next steps
- No EditForm or DataAnnotationsValidator is present; client-side validation is not implemented.
- SaveCustomer and CancelEdit contain no persistence logic; a backend/API integration and DI registration are required.
- Contact menu buttons are placeholders; implement per-contact actions (edit, delete, mark favorite).
- Accessibility and localization need review (some labels contain non-English text); ensure aria attributes and keyboard handling where needed.
- Consider extracting an ICustomerStore service, adding unit tests, and converting contact addition to a modal dialog for richer UX.