Confirm?

Are you sure you want to proceed?
J
Jean Reinhold

Shipping Order Form Design

Clone & Customize via AI

Bootstrap Opname Form renders a print-friendly inventory/opname report with editable quantities and line totals. Uses Blazor InputNumber binding and a Bootstrap table layout with sample model data.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Header block with opname number, customer and shipment metadata and a status box. - Print-friendly line items table using Bootstrap table classes with multiple header rows. - Editable quantity inputs per line using Blazor InputNumber controls. - Calculated totals in the table footer (M3 sum). - Sample in-memory model population via a CreateSample factory method. ## Key components - Razor markup with a foreach over model.Lines to render rows. - Blazor InputNumber with `@bind-Value` for AantalGeladen. - Plain Bootstrap classes: `container-fluid`, `row`, `col-*`, `table`, `form-control`. - Model classes OpnameFormModel and OpnameFormLineModel with a `[Required]` attribute. - Lifecycle method: `OnInitialized()` to load sample data. ## How it works - The page uses a private `OpnameFormModel model` initialized in `OnInitialized()` by `CreateSample()`. - Rows are rendered by `@foreach (var line in model.Lines)` and empty rows are added to reach 7 rows. - Editable numeric field uses `<InputNumber @bind-Value="line.AantalGeladen" />` so updates propagate to the model instantly. - Totals are computed client-side in Razor via `model.Lines.Sum(l => l.M3).ToString("0.00")`. - DataAnnotations (`[Required]`) exist on line properties but no EditForm or validation UI is present in the page, so validation is not currently enforced/displayed. ## Styling - Uses Bootstrap utility and layout classes for grid and spacing. - Component-level CSS in `OpnameFormPage.razor.css` sets typography, sizes, the status box, table row spacing and a print media query for page formatting. - The layout is designed for print (page header, lines, a footer total) and uses `@media print` to remove extra padding and set container to full width. - Table header and footer use borders to mimic a printed form style. ## Reuse steps 1. Add the Razor file and the model classes to a Blazor project (no extra NuGet required for Bootstrap if the app layout already includes Bootstrap CSS). 2. Ensure the page is reachable (add routing or a nav link) and import model namespace if placed in a different folder. 3. Replace `CreateSample()` with a service call to load real data; inject the service into the component and call it in `OnInitializedAsync()`. 4. Wrap input elements in an `EditForm` with a `DataAnnotationsValidator` and `ValidationSummary` to enable and show validation based on the attributes on `OpnameFormLineModel`. 5. Add save/post logic (button and handler) to persist changes to an API or server-side service. ## Limitations & next steps - No EditForm/Validation UI: `[Required]` attributes exist but are not wired to an EditForm or validation messages. - No persistence: page uses an in-memory sample model; services or HTTP clients must be added to save or load real data. - Accessibility & localization not addressed: table headers, form controls and labels may need ARIA attributes and resource strings. - Consider paging/virtualization for large line counts and client-side totals recalculation when quantities change. - Add unit tests for model calculations and integration tests for save/load behavior.