Confirm?

Are you sure you want to proceed?
A
Amy Patterson

Content Management Page Design

Clone & Customize via AI

Bootstrap Content Management shows a responsive Blazor content list with search, folder navigation, and a Bootstrap table with row selection. Uses InputText binding and client-side filtering.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Search bar using Blazor InputText to filter items client-side. - Sidebar navigation with folders and quick-create buttons. - Responsive Bootstrap table that lists content items with checkboxes for row selection and bulk select. - Status badges rendered via a RenderFragment (Published / Draft) with Font Awesome icons. - Actions column with Open/Delete buttons and simple client-side deletion logic. - Inline paging stub (disabled controls for a single page). ## Key components - InputText (Blazor) with @bind-Value for search. - HTML table element (.table) with <thead>/<tbody> and foreach rendering of items. - Standard <input type="checkbox"> with @onchange handlers for ToggleSelectAll and ToggleRowSelection. - RenderFragment RenderStatusBadge producing badge markup. - Model: ContentItemModel and enum ContentStatus. - Collections: List<ContentItemModel> items and HashSet<Guid> selectedIds for selection state. ## How it works - Data is initialized in OnInitialized by GetMockItems() and displayed via a filteredItems property that applies a case-insensitive search against Name and Location. - Search uses @bind-Value on InputText to update searchText; filteredItems recalculates on render. - Row selection updates selectedIds in ToggleRowSelection; ToggleSelectAll adds/removes ids across filteredItems and keeps selectAll state synchronized. - DeleteItem removes the item from the local items list; a real app would call a backend service and show confirmation dialogs. - Status badges are built with a RenderFragment to keep markup generation local and allow easy modification of classes/icons. ## Styling - Uses Bootstrap utility and component classes (container-fluid, row, col-*, btn, table, form-control, badge) for layout and responsiveness. - Font Awesome icons are used for visual affordances (search, folder, file, trash, settings). - Table cells use text-truncate and max-width inline style for simple truncation; responsiveness relies on Bootstrap grid and .table-responsive wrapper. ## Reuse steps 1. Add the .razor and model files to a Blazor project (Server or WebAssembly). Ensure Microsoft.AspNetCore.Components is available (default in Blazor templates). 2. Include Bootstrap CSS and Font Awesome in the host (index.html or _Host.cshtml) or use the project template that already provides Bootstrap. 3. Import the component namespace where required and add a route (/content-management) to navigation if needed. 4. Replace GetMockItems() with an injected service (e.g., IContentService) and call async APIs; update methods to async Task and use proper error handling. 5. Add confirmation dialogs and server-side deletion, and implement paging and sorting on the server for larger datasets. ## Limitations & next steps - This is a single-page example generated by Instruct UI and uses in-memory mock data; backend integration (CRUD, authentication, and authorization) is required for production. - No confirmation dialog is implemented for deletions; add a modal or dialog service for safe operations. - Paging and sorting are client-side stubs; implement server-side paging for large collections. - Accessibility and keyboard navigation improvements are needed (aria attributes, focus management). - Consider extracting the status badge renderer and table row into reusable components for composition across the app.