●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- A multi-field change request form for CPT codes with validation and file attachments.
- Priority and department selection via InputSelect elements.
- Change-type selection via InputRadioGroup.
- Client-side file selection using InputFile (names collected only).
- Inline validation: DataAnnotationsValidator, ValidationSummary and ValidationMessage.
- A responsive Bootstrap table showing submitted requests (newest first).
- Success alert after submission and a guidance/info card beside the form.
## Key components
- EditForm, DataAnnotationsValidator, ValidationSummary
- InputText, InputTextArea, InputSelect, InputRadioGroup, InputRadio
- InputFile (InputFileChangeEventArgs), ValidationMessage
- @bind-Value bindings, OnValidSubmit handler, StateHasChanged
- Bootstrap table (.table, .table-responsive) and layout classes (container, row, col-*)
## How it works
- The page binds a CPTChangeRequestModel instance to an EditForm and uses DataAnnotations attributes for validation (Required, StringLength).
- OnValidSubmit invokes HandleValidSubmit which clones the model, stamps SubmittedAt and inserts it into an in-memory list (requests) displayed in the table.
- InputFile handles multiple file selection but only stores file names for the demo; files are not uploaded to a server.
- ValidationMessage components display field-level errors and ValidationSummary shows overall form errors.
- DisplayChangeType maps coded values to user-friendly labels when rendering the requests table.
## Styling
- Uses Bootstrap utility and component classes (container, row, col-*, card, form-control, form-select, btn, table).
- Font Awesome icons are used for visual affordances (requires including FA CSS).
- Layout is responsive via Bootstrap grid (form column + guidance column) and a separate full-width requests card.
## Reuse steps
1. Add the Razor component and CPTChangeRequestModel to the Blazor project (Server or WASM). No extra NuGet is required for Bootstrap-specific behavior.
2. Include Bootstrap CSS and Font Awesome in index.html/_Host.cshtml (or use the app's existing theme).
3. Import Microsoft.AspNetCore.Components.Forms in the Razor file (already present) and ensure DataAnnotations are available on models.
4. Replace the in-memory requests list with an injected service or API call to persist requests and to store uploaded files securely (server-side endpoint).
5. Add authentication/authorization and server-side validation for production (validate file size/types, sanitize inputs, store files in blob storage or database).
## Limitations & next steps
- This is a single-page demo that stores requests in memory; persistence and concurrency handling are not implemented.
- Attachments keep only client-provided file names; server-side file upload, size/type validation, and storage are required for production.
- No paging, sorting or search on the requests table — add IDataProvider or server-side APIs for large datasets.
- Add edit/approve/reject flows, role-based access, and audit logging for an operational workflow.
- Consider accessibility testing (aria attributes) and more granular validation for CPT code format.