●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Collapsible sections for product, sender, and receiver details.
- Shipment type and method selection using InputRadioGroup/InputRadio.
- Receiver form built with EditForm and InputText fields (name, address, postal code, city, mobile, email, reference).
- Parcel management table with InputNumber cells, add and remove row actions.
- Action button to "Sjekk frakt" (placeholder) and an import button in the header.
## Key components
- EditForm, InputText, InputNumber, InputRadioGroup, InputRadio
- Event handlers: AddParcel(), RemoveParcel(ParcelDimensionModel), ToggleProduct/Sender/Receiver
- foreach loop for dynamic parcel rows and @bind-Value usage on inputs
- Plain Bootstrap markup and Font Awesome icons
## How it works
- Model binding: OrderShipmentModel instance is bound to EditForm; parcel rows use a List<ParcelDimensionModel> and @bind-Value on each InputNumber.
- Interaction: toggles flip boolean flags (showProduct, showSender, showReceiver) to show/hide sections; AddParcel/RemoveParcel mutate the parcels list causing UI updates.
- Validation: models include DataAnnotations ([Required]) but the EditForm does not include DataAnnotationsValidator or ValidationMessage components, so client-side validation messages are not rendered by default.
- Actions: CheckShipment currently contains a placeholder; import button has no handler in this page and requires wiring to a service.
## Styling
- Uses Bootstrap utility and component classes (container-fluid, row, col-*, btn, table, form-control, card).
- Custom styles live in app.css (focused input border, card hover, button transitions, responsive card-body padding).
- Layout is responsive via Bootstrap grid; cards and tables adjust across breakpoints with media query tweaks in app.css.
## Reuse steps
1. Add the Razor files and model classes to a Blazor project and include Bootstrap CSS and Font Awesome in index.html/_Host.cshtml.
2. Reference the app.css file (import in site stylesheet) and ensure Bootstrap variables are available if theming is required.
3. Register any backend services for rate lookup, address validation, or import in Program.cs and inject them into the page.
4. Add DataAnnotationsValidator and ValidationMessage components inside EditForm to enable validation and show errors from OrderShipmentModel.
5. Replace CheckShipment and import button placeholders with calls to injected services that compute rates or submit shipments.
## Limitations & next steps
- Validation is incomplete: add <DataAnnotationsValidator /> and per-field ValidationMessage components to surface required-field errors.
- No backend integration: shipping rate lookup, import processing, and authentication are not implemented and require service wiring.
- Accessibility: ensure form labels are associated with inputs via id/for attributes and add aria attributes for dynamic sections.
- Consider moving parcel row handling to a child component for reuse and unit testing, and add client/server-side validation for numeric ranges and phone/email formats.