Confirm?

Are you sure you want to proceed?
В
Владимир Потапов

Catalog of Dashboards

Clone & Customize via AI

MudBlazor Dashboard Catalog presents a responsive gallery of dashboard tiles using MudGrid and MudCard. It renders image placeholders, titles, descriptions and View Dashboard links.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - A catalog page that lists dashboards as cards in a responsive grid. - Card tiles include an image (placeholder), title, description and a "View Dashboard" link button. - Client-side initialization of a simple DashboardViewModel collection. ## Key components - MudContainer, MudText - MudGrid, MudItem - MudCard, MudCardMedia, MudCardContent, MudCardActions - MudButton - C# view model: DashboardViewModel ## How it works - The page uses a private List<DashboardViewModel> (_dashboards) populated in OnInitialized() via Enumerable.Range for demo data. - A foreach renders MudItem cards inside a MudGrid; each MudCard binds to DashboardViewModel properties (ImageUrl, Title, Description, Href). - Buttons use Href/Target to open the linked dashboard route; no server calls or navigation service is wired. - Interaction is read-only in this demo; replace the initialization with an injected service or API call to load real data. ## Styling - Uses MudBlazor components and theme styling rather than utility CSS. - Responsive behavior derives from MudGrid/MudItem breakpoints (xs, sm, md, lg) and MudCard sizing. - Images are shown via MudCardMedia with fixed Height; placeholder images are used in the demo. ## Reuse steps 1. Install MudBlazor NuGet and add services in Program.cs: builder.Services.AddMudServices(); 2. Import MudBlazor namespace in _Imports.razor and add MudBlazor theme wrapper in MainLayout if needed. 3. Copy DashboardCatalog.razor and DashboardViewModel.cs into the project and add a route entry (e.g., /dashboard-catalog). 4. Replace OnInitialized demo data with an injected data service or HTTP client to fetch real dashboards. 5. Create destination routes/pages for the Href values and add authentication/authorization as required. ## Limitations & next steps - Demo uses static, generated data and placeholder images; backend service, API, or DB integration is required for real content. - No paging, filtering, or search is implemented; add MudTable or server-side paging for large collections. - No accessibility or image-loading optimization is implemented; consider alt texts, lazy-loading, and aria attributes. - Authentication, routing guards, and detailed dashboard views must be wired separately for a complete app.