Confirm?

Are you sure you want to proceed?
M
Marcus Flores

Email Composition Form Redesign

Clone & Customize via AI

MudBlazor Email Campaign provides a composer for scheduled broadcasts with company selection, recipient filters, attachments and a preview toggle. Uses MudBlazor components and MudFileUpload.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Company selector with logo preview and default company set on initialization - Recipient selection with conditional agent-only filters (Rank Type, distance, zip) and agent count display - Template selector, send scheduling (MudDatePicker), and send-by channel selector - Message subject and multi-line message editor with Editor / Preview toggle - Attachments area using MudFileUpload with selected file list and simple client-side file handling - Action buttons for adding attachments, uploading to S3 placeholder, and a SEND EMAIL NOW action ## Key components - MudGrid, MudItem, MudPaper for layout - MudSelect, MudSelectItem for dropdowns - MudImage for logo preview - MudDatePicker for scheduling - MudCheckBox for header/footer toggle - MudTextField for Subject, Distance, Zip, Message (multi-line) - MudFileUpload for attachments and file callbacks - MudButtonGroup, MudButton for Editor/Preview toggle and actions - MudText for inline labels and counts ## How it works - A simple EmailCampaignModel instance holds form state and is bound with @bind-Value and @bind-Date to MudBlazor inputs. - Conditional UI (IsAgentsSelected) shows extra filter controls when Recipients == "Agents". - File selection is handled via FilesChanged -> OnFilesChanged which stores IReadOnlyList<IBrowserFile> and calls StateHasChanged. - Preview mode toggles IsPreview; preview renders Model.MessageBody inside MudPaper. - OnInitialized sets sensible defaults; SendEmail is a placeholder where server-side logic should be implemented. ## Styling and responsiveness - Uses MudBlazor component styles and grid system (xs/md breakpoints) for responsive layout. - No Tailwind or Bootstrap classes present; spacing relies on MudBlazor (pa-4, px-4, etc.). - Visual density set via Dense and Variant=Outlined for compact form controls. ## Reuse steps 1. Add MudBlazor NuGet and register services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespace in _Imports.razor and include MudBlazor CSS/theme in layout. 3. Copy EmailCampaignModel and EmailCampaignPage.razor into the project and adjust route. 4. Provide concrete implementations for SendEmail and file upload (S3) services and inject them into the page. 5. Optionally add validation (EditForm + DataAnnotationsValidator) and replace simple @bind checks with model validation. ## Limitations & next steps - No EditForm or DataAnnotationsValidator is present; server-side and client-side validation must be added. - SendEmail is a stub; integrate an email service or API and handle async operations and error states. - File upload UI uses MudFileUpload selection only; implement actual upload, progress, and size/type validation on the server. - Authentication, authorization and API wiring are out of scope and must be added per application requirements. - Accessibility improvements, i18n and richer template preview rendering could be added. This page is a single MudBlazor-based UI screen generated by Instruct UI and intended as an editable starter for integration into a larger .NET app.