●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Full task creation form with validation and success feedback.
- Text inputs (task name, tags), textarea (description), date picker, priority select.
- Status radio group, assignee select populated from a local dictionary.
- File attachment input with client-side file name preview.
- Notify checkbox and cancel/create action buttons.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputTextArea, InputDate, InputSelect
- InputRadioGroup, InputRadio, InputCheckbox
- InputFile and IBrowserFile handling
- Model-based validation via data annotations and a custom FutureDateAttribute
## How it works
- The page binds a CreateTaskModel instance to EditForm and uses @bind-Value on inputs for two-way binding.
- DataAnnotationsValidator and ValidationMessage components show server-side or attribute validation errors (EditForm validation).
- HandleValidSubmit() toggles a success flag; HandleFileSelected(InputFileChangeEventArgs) stores the IBrowserFile into the model and sets uploadedFileName for display.
- Available assignees are provided from a local Dictionary and rendered as <option> elements; no external data service is wired.
## Styling
- Uses Bootstrap layout classes (container, row, col-*, form-control, form-select, btn) for responsive grid and form styling (Bootstrap form-control).
- Component-specific styles live in CreateTaskPage.razor.css: gradient background, rounded card, blue header, focus states, custom button styles and validation message rules (::deep selectors for scoped styles).
- Responsive adjustments provided via a mobile media query for compact padding and header sizing.
## Reuse steps
1. Add the Razor page and CreateTaskModel to a Blazor project and include the CSS file (CreateTaskPage.razor.css).
2. Ensure Bootstrap CSS is referenced in index.html/_Host.cshtml or include a custom stylesheet matching the classes used.
3. Register any server API endpoints for persisting tasks and file uploads; handle IBrowserFile server transfer in an upload controller or API.
4. Adjust CreateTaskModel and validation attributes to match backend DTOs and business rules.
5. Wire availableAssignees to a data source (service injection) and replace the in-memory dictionary with an injected service.
## Limitations & next steps
- This is a single-page UI example: persistence, server-side upload handling, and authentication/authorization are not implemented.
- Assignees are hard-coded; replace with a service call and error handling for real data.
- File handling stores only the client file reference; implement server upload limits, streaming, and storage.
- Tags are a simple string; consider a tag input component or token list for better UX.
- Add client-side validation summaries or per-field async validation as needed.
Notes: the UI relies on Bootstrap classes and Blazor input components; validate max upload size and wire back-end APIs when integrating into a production app.