●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Multi-section quote form for PIC marine policies (policy ownership, primary contact, vessel details, claims, values).
- Validation using DataAnnotations and runtime IValidatableObject checks.
- Conditional fields that show/hide based on selections (Company/Trust name, Other construction, Prior claims details, security device).
- Calculated values and indicators (claim load percent badge, Total Sum Insured) updated on change.
- Simple modal overlay implemented in Razor (no JS) to surface referral/broker messages.
## Key components
- EditForm, DataAnnotationsValidator, EditContext
- InputText, InputSelect, InputNumber, ValidationMessage
- IValidatableObject (MarineQuoteViewModel.Validate)
- Razor conditional rendering (@if) and simple modal div overlay
- CSS scoping via .razor.css (::deep .form-control-pill, .form-label)
## How it works
- Model binding uses a MarineQuoteViewModel instance with @bind-Value and @onchange handlers to call OnFieldChanged.
- EditContext is created in OnInitialized to support per-field validation state and a custom fieldTouched dictionary drives visual state classes via GetFieldClass.
- Business rules run in EvaluateBusinessRules: they set a modal message and showModal flag for conditions (age, construction, propulsion, storage, security, sums insured). CalculateClaimLoad computes the claimLoadPercent.
- Validation combines attribute-based rules (EmailAddress, Range, RegularExpression) and runtime checks (year ranges) implemented by IValidatableObject.
## Styling
- Uses Bootstrap layout and utility classes: container, row, col-md-*, btn, form-select, form-control, alert, badge.
- Custom scoped CSS applies pill-shaped inputs (.form-control-pill) and label spacing.
- Responsive grid relies on Bootstrap columns; form controls use full-width Bootstrap form-control/form-select styles.
## Reuse steps
1. Add the Razor page and MarineQuoteViewModel to a Blazor project (no extra NuGet required for Bootstrap if the site already includes Bootstrap CSS).
2. Ensure _Imports.razor or the page includes: using Microsoft.AspNetCore.Components.Forms; using BlazorApp.Data.
3. Add scoped CSS file next to the Razor page or include stylesheet rules to match .form-control-pill and label overrides.
4. Wire any persistence or API services (e.g., inject a quote service) and replace Console.WriteLine with real save/submit logic.
5. Optionally add unit/integration tests for EvaluateBusinessRules and Model validation.
## Limitations & next steps
- This is a self-contained page generated by Instruct UI and lacks server wiring: authentication, persistence, and API calls must be added.
- Modal is client-side only; modal actions do not block navigation or server requests beyond the local submit guard.
- Field-level touched state is maintained in-memory; consider using EditContext.OnFieldChanged events to track changes more granularly.
- Extend by integrating a backend quote service, remote validation for duplicates, localization for messages, and accessibility improvements (aria attributes, keyboard focus management).