●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Monthly expense list rendered in a responsive Bootstrap table with a totals footer.
- Month navigation controls (previous/next) that filter the shown expenses.
- Modal form to add expenses using Blazor EditForm with DataAnnotations-based validation.
- Inline delete action per row that updates the in-memory list and UI.
## Key components
- EditForm, DataAnnotationsValidator, ValidationSummary, ValidationMessage
- InputDate, InputText, InputSelect, InputNumber
- Bootstrap modal markup (data-bs-toggle, data-bs-target) and table classes (table, table-striped, table-hover)
- @bind-Value bindings and @onclick handlers
## How it works
- Expenses are stored in a private List<ExpenseModel> initialized in OnInitialized. FilteredExpenses enumerates items for the selectedMonth.
- The Add Expense modal contains an EditForm bound to newExpense; OnValidSubmit calls HandleValidSubmit which creates an Id and adds the item then resets the form model.
- Validation uses DataAnnotations on ExpenseModel and is surfaced via DataAnnotationsValidator, ValidationSummary and ValidationMessage components.
- Month navigation changes selectedMonth (AddMonths) and the UI re-evaluates FilteredExpenses; RemoveExpense removes items by Guid and calls StateHasChanged for immediate update.
- Bootstrap classes provide layout and responsiveness; the modal relies on Bootstrap JS for show/hide behavior.
## Styling
- Uses Bootstrap utility and component classes (container, d-flex, btn, table, modal, form-control, form-select, input-group).
- Component-scoped CSS (.razor.css) tweaks validation-message and table footer weight. Responsive behaviors rely on Bootstrap grid and utility classes.
## Reuse steps
1. Add a Blazor page and paste the Razor markup and component-scoped CSS; include ExpenseModel class in the project.
2. Ensure Bootstrap CSS and JS are loaded in the host (index.html/_Host.cshtml) so modal and utilities work.
3. No special NuGet packages required for Bootstrap usage; for other UI libs add their packages and registration steps instead.
4. Adjust ExpenseModel and validation attributes to match domain rules; wire persistence by replacing the in-memory List with a service (e.g., EF Core or an API client).
5. Import required namespaces (System.ComponentModel.DataAnnotations, System.Globalization) where needed and add any localization or currency formatting logic.
## Limitations & next steps
- Data is in-memory on the page; no persistence or server API integration is implemented.
- Bootstrap modal relies on Bootstrap JS—ensure the host loads the correct scripts and Popper if required.
- No authentication, authorization, or multi-user concerns are addressed.
- Suggested extensions: connect to a backend service or local storage, add edit/update flows with an edit modal, add category CRUD, confirmation on delete, and client-side filtering/sorting or paging for large lists.