Confirm?

Are you sure you want to proceed?
d
david smith

User Admin Page

Clone & Customize via AI

Blazor User Admin implements a paged, sortable user list using QuickGrid and Bootstrap table styling. Includes action buttons and client-side pagination via PaginationState.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Paged and sortable user list rendered with Microsoft.AspNetCore.Components.QuickGrid (QuickGrid). - Table layout with ID, Name, Email, Role columns and an Actions column with Edit/Delete buttons. - Client-side pagination via PaginationState and a Paginator control. - Hard-coded sample data to demonstrate row rendering and actions. ## Key components - QuickGrid, PropertyColumn, TemplateColumn, Paginator - PaginationState for client-side paging - Bootstrap classes: container, table, btn, btn-primary, btn-secondary, btn-danger - Support model: UserViewModel (Id, Name, Email, Role) ## How it works - Users are loaded into a List<UserViewModel> and exposed as an IQueryable for QuickGrid (usersQueryable = users?.AsQueryable()). - PropertyColumn binds directly to model properties (u => u.Id, u => u.Name, etc.) and enables sorting where specified. - TemplateColumn provides per-row action buttons that invoke EditUser or DeleteUser with the context.Id. - PaginationState configures ItemsPerPage; Paginator consumes that state to render paging UI. - AddNewUser, EditUser, DeleteUser are stubbed to log actions; removal of items is shown as a commented example. ## Styling - Uses Bootstrap utility and component classes for layout and controls. - Page-scoped CSS (UserAdminPage.razor.css) adds overflow-x:auto for the grid and custom header/button tweaks using ::deep selectors to target QuickGrid output (table, th, td). - Table uses responsive scrolling for small screens; Bootstrap table classes ensure basic responsiveness and hover/striped rows. ## Reuse steps 1. Add package reference to Microsoft.AspNetCore.Components.QuickGrid and ensure Bootstrap CSS is included in the project. 2. Import QuickGrid namespace: @using Microsoft.AspNetCore.Components.QuickGrid. 3. Copy UserViewModel and the Razor component into a Pages or Components folder. 4. Replace LoadUsers with a service call (inject a user service) and bind the returned IEnumerable/IQueryable to usersQueryable. 5. Implement modal or navigation for AddNewUser/EditUser and confirm in DeleteUser; call StateHasChanged() after mutating data. ## Limitations & next steps - This file is a single-page example generated by Instruct UI and uses in-memory sample data; server-side data retrieval, persistence, and error handling are not implemented. - No authentication or authorization checks are present; integrate ASP.NET Core Identity or custom auth for production. - Consider adding EditForm with DataAnnotationsValidator for user creation/editing and confirmation dialogs for deletes. - Extend filtering, server paging, and column formatting for large datasets and multi-column sorting as needed.