Confirm?

Are you sure you want to proceed?
E
Eirik Lund

New Customer Registration Form

Clone & Customize via AI

The Blazor New Customer Form is a multi-section customer registration page with company, address, contact and identifier fields. It uses EditForm/DataAnnotations validation and Bootstrap form-control layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Multi-section customer registration form (Company, Address, Contact, Identifiers). - Client-side validation using DataAnnotations via EditForm and DataAnnotationsValidator. - Inline validation messages and a success alert after mock save. - Responsive grid layout using Bootstrap row/col classes and large form controls. - Reset (clear) and submit actions wired to component methods. ## Key components - EditForm - DataAnnotationsValidator - InputText (Blazor) - ValidationMessage - @bind-Value bindings on model properties - Bootstrap classes: container-fluid, row, col-*, form-control-lg, btn, card, alert ## How it works - The UI binds a NyKundeModel instance to EditForm using @bind-Value on InputText fields and uses DataAnnotations for validation messages. - On valid submit EditForm calls HandleValidSubmit, which sets a local isSaved flag to show a success alert (placeholder for server/API save). - ResetForm recreates the model instance to clear the form and resets the isSaved flag. - ValidationMessage components display field-level errors produced by DataAnnotationsValidator and the model attributes. ## Styling - Uses Bootstrap utility and layout classes for a responsive two-column grid on md+ screens and stacked fields on mobile. - Custom CSS in app.css overrides and extends Bootstrap variables and adds a primary gradient, form-control focus styles, card hover, and button transitions. - Font Awesome icons are used in headings and action buttons (icon classes present in markup). ## Reuse steps 1. Add the Razor component and NyKundeModel to a Blazor project (client or server) and include app.css and Bootstrap CSS in the layout. 2. Ensure Font Awesome (or alternative icons) is available if icons are required. 3. Keep the DataAnnotations attributes on NyKundeModel; import System.ComponentModel.DataAnnotations in files using the model. 4. Wire a real save operation inside HandleValidSubmit (inject an HttpClient or service and call an API). 5. Optionally add localization, server-side validation handling, or a notification service for persistent alerts. ## Limitations & next steps - This is a single-page UI generated by Instruct UI and contains mock save logic; backend persistence, API calls, and authentication are not implemented. - No client-side masking or phone/postal validation beyond DataAnnotations; add custom validation attributes or input masks as needed. - Consider adding automated tests, centralized validation summary, and accessibility attributes (aria-*) for production readiness.