M
Mouli Eswararao

Create User Form Component

Bootstrap-styled Blazor Create User Form with EditForm validation and dealer role selection using InputSelect and checkboxes.

LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - A create-user form wrapped in a Bootstrap card layout. - Personal information inputs (first/last name, username, title, email, phone). - Active/inactive status toggle buttons. - Dealers and roles table with checkbox selection and per-dealer InputSelect role pickers. - Client-side validation via DataAnnotations and ValidationMessage components. - Save (OnValidSubmit) and Cancel event callbacks wired to parent page. ## Key components - EditForm, DataAnnotationsValidator, ValidationMessage - InputText, InputSelect, InputCheckbox - EventCallback<UserModel> OnSave, EventCallback OnCancel - Razor component composition: CreateUserPage.razor hosts CreateUserForm.razor - Local scoped CSS file (CreateUserForm.razor.css) for .btn-custom-orange ## How it works - Model binding uses a UserModel instance and @bind-Value on InputText/InputSelect/InputCheckbox fields. - EditForm triggers Save on OnValidSubmit; Save collects selected dealers and invokes OnSave EventCallback. - Validation is provided by DataAnnotations on UserModel and ValidationMessage components render field errors. - Status toggle updates userModel.IsActive directly via button click handlers. - Parent page (CreateUserPage) subscribes to OnSave and OnCancel to perform persistence or navigation. ## Styling - Uses Bootstrap utility and layout classes (container, row, col-*, card, form-control, table, btn, form-select). - One scoped CSS file defines .btn-custom-orange for the primary save button and hover state. - Table is wrapped in .table-responsive for narrow screens; layout uses Bootstrap grid for basic responsiveness. ## Reuse steps 1. Add the Razor files and model classes to the Blazor project. 2. Ensure Bootstrap CSS is included (default Blazor templates include it) or add appropriate CSS references. 3. Register any backend services and inject them into the parent page to handle persistence when OnSave fires. 4. Adjust UserModel and DealerRoleModel to match real domain models and validation rules. 5. Replace mock dealer data with a service call and handle async loading and error states. ## Limitations & next steps - This is a single-page/component scaffold generated by Instruct UI with mock data; persistence, authentication, and server validation are not implemented. - Role selection is client-side only; add server-side checks and save logic in OnSave handler. - Consider adding loading states, per-row validation indicators, and pagination or search for large dealer lists. - Add unit or component tests for validation rules and event callback behavior when integrating into a larger app.