●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Multi-field claim submission form capturing policy, property, claimant and loss details.
- Client-side validation via DataAnnotations and EditForm with ValidationMessage components.
- Select, text, date and radio inputs (InputSelect, InputText, InputDate, InputRadioGroup, InputTextArea).
- File selection and drag-and-drop styled InputFile with a displayed uploaded file list.
- Responsive two/three-column layout using Bootstrap grid classes and custom CSS for header/footer and file drop state.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputTextArea, InputSelect, InputDate
- InputRadioGroup, InputRadio
- InputFile (multiple) and IBrowserFile list handling
- Plain Bootstrap classes: container, row, col-md-*, form-control, form-select, btn
## How it works
- A ClaimSubmissionViewModel holds bindable properties that are annotated with validation attributes; the EditForm model is @bind to claimModel and OnValidSubmit triggers HandleValidSubmit.
- Each input uses @bind-Value (e.g., @bind-Value="claimModel.PropertyZipCode") and ValidationMessage components surface validation messages from data annotations.
- File handling uses InputFile.OnChange to collect IBrowserFile instances into uploadedFiles; drag-enter/leave/drop handlers toggle a CSS class (dropClass) to change the file-drop-zone visual state.
- The sample logs submission client-side (Console.WriteLine) — no API or persistence is wired in the page.
## Styling
- Layout and spacing are driven by Bootstrap classes (container, row, col-md-*, g-3, form-control, form-select, btn).
- Component-specific styles and page shell are in a scoped CSS file (ClaimSubmission.razor.css) customizing header/footer, card, and a dashed file-drop-zone with .drag-over state.
- The form is responsive via Bootstrap grid; custom CSS ensures consistent header/footer sizing and button styling.
## Reuse steps
1. Add the Razor page and ClaimSubmissionViewModel to a Blazor project (Server or WebAssembly).
2. Ensure Bootstrap CSS is included (link in index.html/_Host.cshtml) or confirm existing project theme.
3. Import namespaces where needed (using System.ComponentModel.DataAnnotations; using Microsoft.AspNetCore.Components.Forms; using BlazorApp.Data).
4. Keep DataAnnotations on the view model for EditForm validation; adapt model fields to backend DTOs.
5. Implement a server API or use InputFile.OpenReadStream/streaming for large files and post IBrowserFile content to an endpoint; adjust LoadFiles to stream instead of storing large files in memory.
## Limitations & next steps
- No backend wiring: HandleValidSubmit only logs to console; server-side API, authentication, and persistence must be implemented for production.
- File handling is client-side: large file streaming, virus scanning, and storage are not implemented.
- Consider adding server-side validation, anti-forgery protection, and upload progress indicators.
- Extend selection lists (properties, states, loss types) to load from services and add unit tests for validation rules.