●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Add / edit form with validation and reset
- Filterable/searchable table of articles with image thumbnails
- Category filter, immediate search, and sample data seeding
- Row actions: edit and delete with JS confirmation
## Key components
- MudForm, MudTextField, MudSelect, MudButton
- MudTable, MudGrid, MudItem, MudPaper, MudDivider
- MudIconButton, MudSpacer, MudText
- ArticleModel POCO used as in-memory data model
## How it works
- Data stored in a local List<ArticleModel> and exposed to MudTable via the FilteredArticles LINQ property.
- Two-way binding uses @bind-Value on MudTextField and MudSelect; _isEditing toggles add vs update flows.
- SaveArticle validates the MudForm (await _form.Validate()) and either updates the existing item or adds a new one.
- Search and category filtering apply client-side in FilteredArticles with StringComparison.OrdinalIgnoreCase.
- Delete uses IJSRuntime.InvokeAsync("confirm", ...) for a native browser confirmation; seeding populates sample items.
## Styling and responsiveness
- Uses MudBlazor components and utility classes (pa-*, mt-*, me-3, ms-2, d-flex) for spacing and layout.
- Layout built with MudGrid and MudItem for responsive columns (form 4/12, list 8/12 on sm+).
- Image thumbnails use inline styles (width/height/object-fit) inside MudTable rows.
## Reuse steps
1. Install MudBlazor NuGet and register services (builder.Services.AddMudServices()).
2. Import MudBlazor namespace and include MudBlazor CSS in host file.
3. Add ArticleManager.razor and ArticleModel class to project and adjust routes.
4. Replace in-memory List<ArticleModel> with an injected data service or API client for persistence.
5. Optionally replace JS confirm with MudDialog for consistent UI, add file upload for images, and add server-side validation.
## Limitations & next steps
- This page is a single, self-contained Instruct UI generated example using in-memory data; persistence, authentication, and authorization are not implemented.
- Validation relies on MudForm component attributes; add DataAnnotations and server validation when wiring APIs.
- Consider replacing browser confirm with MudDialog, add image upload, paging, sorting on the table, and integrate localization and unit tests.