Confirm?

Are you sure you want to proceed?
a
ayodahunsi

Inventory Application

Clone & Customize via AI

Blazor Inventory Manager presents a Bootstrap-styled product list delivered with QuickGrid, sortable PropertyColumns and pagination. Includes image thumbnails, status badges and a search filter bound with @bind-Value.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Product list table with image thumbnails, SKU, category, quantity and price columns. - Client-side search filter (oninput) and LINQ-based filtering over an IQueryable source. - Sortable columns via QuickGrid PropertyColumn and server-like pagination via PaginationState + Paginator. - Status badges computed from stock levels and action buttons for edit/delete (UI only). ## Key components - QuickGrid, PropertyColumn, TemplateColumn, TemplateColumn (image and actions) - InputText with @bind-Value and @bind-Value:event="oninput" - Paginator and PaginationState - img elements, Bootstrap buttons and badges - LINQ/IQueryable filtering in the component code-behind ## How it works - The page stores an in-memory List<ProductViewModel> (allProducts) and exposes FilteredProducts as an IQueryable to QuickGrid. - Search uses InputText bound with @bind-Value and oninput to update searchString and the grid source. - QuickGrid PropertyColumn Sortable="true" enables client-side sorting; PaginationState controls page size and current page while Paginator renders controls. - TemplateColumn renders custom cells (image thumbnail, status badge, action buttons). Action buttons have no click handlers in the sample. ## Styling - Uses Bootstrap layout and utilities: container-fluid, card, card-header, card-body, table-responsive, form-control, btn, badge. - Table styling leverages QuickGrid with Class="table table-hover" for native Bootstrap table styles. - Responsive behavior is handled via .table-responsive and Bootstrap grid classes; image thumbnails use object-fit for consistent sizing. ## Reuse steps 1. Add the QuickGrid package (Microsoft.AspNetCore.Components.QuickGrid) and ensure Bootstrap CSS is included (index.html/_Host.cshtml). 2. Import the QuickGrid namespace in the component: @using Microsoft.AspNetCore.Components.QuickGrid. 3. Copy ProductViewModel and the .razor markup; adapt the data source to an injected service or API call. 4. Wire click handlers for Add/Edit/Delete and replace the in-memory list with async calls returning IQueryable or IEnumerable. 5. Optional: add EditForm with validation, authorization checks, and server-side paging if dataset is large. ## Limitations & next steps - This is a single-page Instruct UI sample with in-memory seeded data; no persistence or API wiring is included. - Edit and Delete actions are UI-only and require event handlers and service integration. - No authentication, authorization, or model validation is implemented; add EditForm and data annotations for forms. - Consider server-side paging and filtering for large product catalogs and integrate image uploads and product details pages.