Confirm?

Are you sure you want to proceed?
A
Abood

CSharp Windows Form CRUD

Clone & Customize via AI

Two-column Blazor Item Manager that pairs a Bootstrap list-group selection with an EditForm details panel. Demonstrates EditForm validation and Bootstrap form controls with basic in-memory CRUD.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Two-column layout: Bootstrap list-group for saved items (left) and a card with an EditForm details form (right). - Item CRUD actions: Save (create), Edit (update selected), Cancel (reset form), Delete (remove selected). - Selection and double-click to load an item into the form for editing. - Client-side validation using DataAnnotations with ValidationSummary and field-level ValidationMessage. ## Key components - EditForm, DataAnnotationsValidator, ValidationSummary - InputSelect (company), InputText (description), InputNumber (price), InputDate (date) - ValidationMessage For(...) for per-field errors - list-group items rendered as buttons with @onclick (select) and @ondblclick (load to form) - ItemModel class with DataAnnotations (Required, StringLength, Range) ## How it works - Inputs use @bind-Value to two-way bind to formModel properties. EditForm triggers DataAnnotations validation on submission or programmatic checks. - An in-memory List<ItemModel> (items) holds saved items. SelectItem sets selectedItem; LoadItemToForm copies values to formModel for editing. - OnSave constructs a new ItemModel from formModel and adds it to items; OnEdit updates the selectedItem fields; OnDelete removes selectedItem. - UI interactions use @onclick and @ondblclick for selection and load; button disabled states depend on selectedItem being null. ## Styling - Uses Bootstrap classes: container, row, col-*, card, form-control, btn, list-group, badge. - FontAwesome icon classes are present in headings and buttons (project should include FontAwesome or substitute icons). - Responsive behavior relies on Bootstrap grid (col-md breakpoints) and simple max-height on the list for vertical scrolling. ## Reuse steps 1. Add the Razor component and ItemModel to a Blazor WebAssembly or Server project. 2. Ensure Bootstrap CSS is present (default Blazor templates include it) and add FontAwesome if icons are required. 3. Keep System.ComponentModel.DataAnnotations referenced for model validation attributes. 4. Replace the in-memory List<ItemModel> with an injected repository or API service and register services in Program.cs. 5. Add an Id on ItemModel, implement persistence (EF Core or API), and add confirmation dialogs for destructive actions. ## Limitations & next steps - Current storage is in-memory; persistence, concurrency, and server-side validation are not implemented. - No unique identifier exists on items; add an Id property for reliable updates/deletes across sessions. - No authentication/authorization or centralized state management is wired; integrate services and policies as needed. - For large lists consider paging or virtualization, and add sorting/filtering features and delete confirmations.