Confirm?

Are you sure you want to proceed?
D
Dustin Clonch

Customer Info Screen Design

Clone & Customize via AI

Blazor Customer Form implements a multi-section customer profile editor using EditForm validation and Bootstrap form classes. It includes InputText bindings, ValidationSummary, and card sections for system, personal, address, company, and notes.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Multi-section customer editor presented as Bootstrap cards (System Information, Personal Details, Address, Company Details, Notes). - Client-side validation using DataAnnotations and DataAnnotationsValidator with ValidationSummary and ValidationMessage components. - Form inputs via Blazor components: InputText and InputTextArea with @bind-Value for two-way binding. - Save (OnValidSubmit -> HandleValidSubmit) and Cancel (ResetForm) actions with an inline saved state alert. ## Key components - EditForm - DataAnnotationsValidator - ValidationSummary - ValidationMessage - InputText - InputTextArea - Standard Bootstrap markup/classes: container, row, col-md-*, card, form-control, btn ## How it works - The page initializes a CustomerViewModel instance in OnInitialized and displays it when Customer != null. - EditForm wraps the model and triggers HandleValidSubmit on a valid submission (EditForm validation via DataAnnotations). - Fields bind to model properties using @bind-Value on InputText and InputTextArea components; ValidationMessage components target each property. - Save updates the LastUpdated timestamp and toggles an isSaved flag to show a Bootstrap alert; ResetForm reloads sample data to revert changes. ## Styling - Uses Bootstrap classes for layout and responsiveness (grid with row/col-md-* and form-control for inputs). - Font Awesome icons are present in headings (requires Font Awesome asset inclusion in host app). - Component-scoped CSS adjusts card headers, label weight, and validation message styling in CustomerInformationScreen.razor.css. ## Reuse steps 1. Add the Razor component and CustomerViewModel into the project (no extra NuGet required for built-in EditForm/DataAnnotations). 2. Ensure Bootstrap CSS (and optionally Font Awesome) are referenced in index.html/_Host.cshtml for styling and icons. 3. Import the model namespace where the component is used or place the ViewModel in a shared namespace. 4. Replace in-memory load/save with an injected service (e.g., ICustomerService): make HandleValidSubmit async and call the service, register the service in Program.cs. 5. Adjust validation or model attributes as needed (zip regex, max lengths) and add unit/UI tests for form flows. ## Limitations & next steps - Persistence is not implemented: saving is local/in-memory; wire an API or repository and make submit handlers async. - Authentication, authorization, and server-side validation are not included and must be added for production scenarios. - No file uploads, address validation, or country selection component are provided; consider adding select lists or address lookup. - Improve UX by disabling Save while submitting, showing validation focus, and extracting repeated input markup to smaller components.