●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Three-column configuration layout for SMS templates: events list, template selector, and message editor.
- Tab navigation with dedicated SMS Template tab and fallback content for other tabs.
- Inline selection controls and a mapping table component for many-to-one mappings.
- Toggle switches and checkboxes to mark active/inactive items and templates.
## Key components
- Blazor input components: InputSelect, InputTextArea, InputText, InputCheckbox.
- Parameterized table component: EventSmsConfigTable.razor (uses [Parameter] properties and EventCallback<int> for delete).
- Model with DataAnnotations: EventSmsMappingModel.cs (Required, StringLength).
- Page lifecycle and handlers: OnInitialized, SetActiveTab, SelectEventForConfig.
- Custom CSS isolation: EventSmsConfigPage.razor.css for layout, sidebar, tabs, and responsive rules.
## How it works
- Two-way binding uses @bind-Value on InputSelect/InputTextArea/InputCheckbox and local fields (selectedEventForConfig, messageContent, isMessageActive).
- OnInitialized seeds availableEvents and availableTemplates into selection controls.
- Event callbacks call methods (SetActiveTab, SelectEventForConfig) to update local state and trigger UI re-render.
- EventSmsConfigTable accepts Items, Events, Templates and exposes OnDeleteMapping as an EventCallback<int> for parent-driven deletion.
- DataAnnotations exist on the model but no EditForm or DataAnnotationsValidator wrapper is present for automatic validation.
## Styling
- Uses Bootstrap utility and form classes (form-select, form-control, btn, table, form-check) for controls and spacing.
- Custom scoped CSS file defines a fixed sidebar, header bar, tab styles, and a responsive CSS grid (.ea-content-grid) with media queries.
- Font Awesome icons are referenced in markup (requires including the icon CSS in the host page).
## Reuse steps
1. Copy the .razor files, model, and EventSmsConfigPage.razor.css into a Blazor project (Pages or Components folder). Ensure CSS isolation file is present.
2. Add Microsoft.AspNetCore.Components.Forms namespace if not global; include Font Awesome or replace icons.
3. Provide data wiring: supply real events, templates, and mapping Items from a service or parent component; hook OnDeleteMapping to remove items.
4. Wrap editable areas with EditForm and add DataAnnotationsValidator to enable model validation using EventSmsMappingModel.
5. Implement persistence by calling an injected HTTP service or repository from button handlers (SAVE/CANCEL) and mapping table callbacks.
## Limitations & next steps
- Validation: DataAnnotations exist on the model but no EditForm/DataAnnotationsValidator is used; add validation to enforce required fields.
- No backend integration: persistence, loading, and delete operations are stubbed; wire services and error handling.
- Authorization and audit are not implemented; add authentication checks and logging for changes.
- UX: add confirmation dialogs on delete, success/error toasts, and server-side validation handling.