●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Multi-section edit form for site/ATM security data (top toolbar, site header, bandit details, alarm details, planning permission, CCTV, miscellaneous).
- Inline lists displayed as table grids: Bandit History, Key Holders, Security Team Visits.
- Input controls covering selects, dates, textareas, checkboxes and small toolbar actions (save, add, edit, undo).
## Key components
- EditForm
- InputText, InputTextArea, InputSelect, InputDate, InputCheckbox
- Standard HTML tables inside .table-responsive containers
- Razor foreach rendering for list rows
- Page-scoped CSS (SiteSecurityPage.razor.css)
## How it works
- Model-driven UI uses a SiteSecurityInfoModel instance bound to EditForm; fields use @bind-Value to synchronize UI and model.
- Lists (BanditHistory, KeyHolders, SecurityTeamVisits) are rendered with @foreach into table rows; toolbar buttons are present but have no event handlers in the sample.
- Date inputs use InputDate bound to nullable DateTime properties; checkboxes map to bool properties.
- No explicit validation attributes or DataAnnotationsValidator are present; EditForm is used mainly for model grouping rather than validation in this sample.
## Styling
- Uses Bootstrap utility and form classes (container-fluid, row, col-*, card, form-control, form-select, btn) for layout and responsive grid.
- Custom CSS sets .table-responsive max-height and styles card headers and toolbar font size.
- The layout targets desktop and collapses via Bootstrap grid on smaller screens; tables use overflow-y for long lists.
## Reuse steps
1. Add a Blazor page and the provided model classes to the project.
2. Ensure Bootstrap CSS is included (default Blazor templates or add CDN/local files).
3. Import namespaces if needed and place SiteSecurityPage.razor and SiteSecurityPage.razor.css in a Pages/components folder.
4. Wire toolbar actions (click handlers) to save, add, delete and navigation logic; implement async data services to load/save models.
5. (Optional) Add DataAnnotations on the model and include DataAnnotationsValidator inside EditForm for validation; add confirmation dialogs for deletes.
## Limitations & next steps
- The sample is a single page scaffold generated by Instruct UI and demonstrates UI structure only; persistence, API services, authentication and authorization are not implemented.
- No validation components (DataAnnotationsValidator) or error display are included; add validation attributes and validation UI for production.
- Table actions have no event handlers; implement add/edit/delete flows, paging or virtualization for large lists and server-backed filtering.
- Consider extracting repeated UI blocks into reusable components (KeyHolderList, HistoryTable) and introduce ViewModels or state containers for complex interactions.