Confirm?

Are you sure you want to proceed?
r
rens van den brekel

Tournooi Overzicht Pagina

Clone & Customize via AI

Bootstrap Tournament Overview displays a list of tournaments using Bootstrap cards with InputText search and InputSelect location filters. Uses Blazor @bind for client-side filtering and responsive Bootstrap layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Tournament listing page with Bootstrap card per item and responsive row/column layout. - Client-side search input (InputText) and location filter (InputSelect) with clear action. - Card header with participant count and action buttons (view/join). - Card body with poster image, title, location/date metadata and truncated description. - Empty-state UI when no results match filters. ## Key components - Blazor components: InputText, InputSelect, button elements, foreach rendering, img tag. - Data/model: TournamentModel sample data provider. - Lifecycle/interaction: @bind-Value, StateHasChanged, local filtering LINQ expression. ## How it works - The page loads a static list from TournamentModel.SampleTournaments() and computes filteredTournaments via LINQ using searchName and selectedLocation. - Inputs use @bind-Value to update component state; ApplySearch calls StateHasChanged to force re-evaluation (filters run on property access). - Each tournament renders inside a Bootstrap .card with a header row (participants + action buttons) and a two-column body (image + details). - Conditional rendering shows either the cards list or a no-results placeholder when filteredTournaments is empty. ## Styling - Uses Bootstrap utility and layout classes (container, row, col-md-*, btn, form-control, form-select) for responsive layout. - Component-scoped CSS (TournamentOverview.razor.css) adds .cards-row spacing, .text-truncate-2 multiline clamp, and object-fit cover rules for images. - Font Awesome icons are used in markup (fa- classes) and require the icon CSS to be included in the host app. ## Reuse steps 1. Add a Blazor project and ensure Bootstrap CSS and Font Awesome are referenced in index.html/_Host.cshtml. 2. Place TournamentOverview.razor and TournamentOverview.razor.css in a Pages/ or Components/ folder and include TournamentModel.cs in the project. 3. Import Microsoft.AspNetCore.Components.Forms namespace if not already available. 4. Replace the sample data with an injected data service (e.g., ITournamentService) and use NavigationManager to navigate to details. 5. Adjust image sizing, paging, or add server-side filtering for large datasets. ## Limitations & next steps - This is a single-page UI generated by Instruct UI and uses in-memory sample data; no persistence or HTTP service is wired. - No paging or sorting is implemented; large lists may need virtualization or server-side filtering. - Actions (ViewTournament, JoinTournament) are placeholders and require NavigationManager or a service to implement navigation and registration. - Accessibility improvements: keyboard focus states, aria-labels for action buttons, and more descriptive image alt text based on data.