●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Responsive product grid using Bootstrap row/col and card components.
- Image thumbnails with fixed height and object-fit via ProductPage.razor.css (.card-img-top).
- Product listing populated in OnInitialized with a sample ProductViewModel list.
- AddToCart action wired to a button using @onclick and @onclick:preventDefault.
## Key components
- Razor page with route: @page "/products".
- ProductViewModel class (Id, Name, Description, Price, ImageUrl).
- Bootstrap markup: container, row, col-*, card, btn, card-img-top.
- Blazor features: @foreach rendering, @onclick handler, component-scoped CSS (ProductPage.razor.css).
## How it works
- OnInitialized creates an in-memory List<ProductViewModel> and assigns it to a private field `products`.
- The UI iterates products with @foreach to render a Bootstrap card per product; image src binds to product.ImageUrl and alt to product.Name.
- AddToCart uses a local method AddToCart(int productId) invoked from the anchor button via @onclick; @onclick:preventDefault prevents navigation.
- No EditForm or data annotations are present; no server/API calls or DI services are wired in the sample.
## Styling
- Uses Bootstrap utility and layout classes (container, row, col-*, card, btn, fs-5, fw-bold).
- Component-scoped CSS sets .card-img-top to fixed height and object-fit: cover for consistent thumbnails.
- Layout is responsive through Bootstrap columns (col-12, col-md-6, col-lg-4); card bodies use flex to push the action button to the bottom.
## Reuse steps
1. Add ProductViewModel.cs to the project and place ProductPage.razor and ProductPage.razor.css in a Pages or Components folder.
2. Ensure Bootstrap and FontAwesome are referenced in index.html/_Host.cshtml (Bootstrap CSS/JS and optional icons).
3. Replace sample data in OnInitialized with an HttpClient API call or inject a repository service (e.g., builder.Services.AddScoped<IProductService, ProductService>).
4. Implement and register a cart service (e.g., CartService) and call it from AddToCart instead of Console.WriteLine.
5. Add accessibility improvements and server integration: proper alt text, price localization, and error handling for images/requests.
## Limitations & next steps
- This is a single-page UI generated by Instruct UI with static sample data; persistence, authentication, and API wiring are not implemented.
- No form validation or EditForm usage is present because the page is read-only with an action handler.
- Next steps include injecting HttpClient or a product service, adding a scoped CartService with state management, and implementing server-side endpoints for product data and cart operations.