●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Left-hand MudDataGrid listing menu items with selection.
- Right-hand detail editor in MudTabs with a primary "Load Through" tab and multiple placeholder tabs (Modifiers, Depletion, Screens, etc.).
- Numerous input fields: MudTextField, MudNumericField, MudSelect, MudCheckBox.
- Grouped panels using MudPaper and MudGrid for responsive layout.
- Toolbar actions (Add, Copy, Refresh, Save) and icon buttons for image/barcode areas.
## Key components
- MudDataGrid<T> (MenuItemViewModel) with SelectedItem and SelectedItemChanged handler
- MudTabs / MudTabPanel
- MudTextField, MudNumericField, MudSelect, MudCheckBox
- MudPaper, MudGrid, MudItem, MudToolBar, MudIconButton, MudButton
- View model: MenuItemViewModel class
## How it works
- The page initializes a simple in-memory List<MenuItemViewModel> and sets _selectedItem to the first item.
- MudDataGrid binds Items to the list and fires SelectedItemChanged to set the selected detail model.
- Form fields use @bind-Value to edit properties on the selected MenuItemViewModel instance (e.g., @bind-Value="_selectedItem.ItemName").
- Tabs separate logical areas; only the Load Through tab contains a full editor. Other tabs are placeholders.
- No explicit EditForm or DataAnnotationsValidator is present; validation is not implemented in the sample.
## Styling
- Uses MudBlazor components and layout primitives (MudGrid, MudPaper) for responsive behavior.
- Controls use Dense/Outlined variants for compact form presentation and rely on MudBlazor theming.
- Inline styles set scrollable areas (e.g., height: calc(100vh - 260px)) to keep grids and editors usable on tall viewports.
## Reuse steps
1. Add MudBlazor NuGet and register MudBlazor services in Program.cs (builder.Services.AddMudServices()).
2. Import MudBlazor namespace in _Imports.razor and include MudBlazor CSS in the project.
3. Copy MenuItemViewModel and the razor page into the project; adjust namespaces.
4. Replace the in-memory list with an injected data service (CRUD) and wire persistence for Save/Refresh actions.
5. Add an EditForm and DataAnnotationsValidator on the detail panel if server- or client-side validation is required.
## Limitations & next steps
- Sample uses in-memory data; connect to backend services or API for real data, paging, and filtering.
- No validation or change tracking is implemented—add EditForm, Validation attributes, and save confirmation flows.
- Authentication and authorization for security-related selects are not wired; integrate role-based services for security fields.
- Additional tabs are empty placeholders and need implementation (Modifiers, Pricing, POS Info, etc.).
This page is generated by Instruct UI and is editable; it demonstrates component composition and binding patterns but requires application wiring for production use.