# Collect User Input > Build forms, validate data, and react to user input in Blazor. USE FOR adding forms, search boxes, filter panels, inline editing, data-entry UI, file uploads, validation (annotations or custom), handling form submissions, and binding input controls. Covers EditForm, built-in input components, DataAnnotationsValidator, custom validation, SSR form patterns (SupplyParameterFromForm, FormName, Antifo… - **Type:** Skill - **Install:** `agentstack add skill-dotnet-skills-collect-user-input` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [dotnet](https://agentstack.voostack.com/s/dotnet) - **Installs:** 0 - **Category:** [Search](https://agentstack.voostack.com/c/search) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [dotnet](https://github.com/dotnet) - **Source:** https://github.com/dotnet/skills/tree/main/plugins/dotnet-blazor/skills/collect-user-input ## Install ```sh agentstack add skill-dotnet-skills-collect-user-input ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Collect User Input ## Step 1 — Read the Project's AGENTS.md Check `AGENTS.md` for **Interactivity Mode** and **Interactivity Scope**. This determines which form patterns apply: | Mode | Form mechanism | |------|---------------| | None (Static SSR) | `EditForm` with `FormName` + `[SupplyParameterFromForm]`. No `@bind`, no `@onchange`. | | Server | `EditForm` with `@bind-Value`. Full interactivity — real-time validation, dynamic UI. | | WebAssembly | Same as Server, but validators needing server data must call APIs. | | Auto | Same as WebAssembly — code must work in both browser and server. | | Scope | Impact | |-------|--------| | Global | All forms are interactive. `FormName` only needed when explicitly opting a page to static SSR. | | Per-page | Forms in static pages use `FormName` + `[SupplyParameterFromForm]`. Forms in `@rendermode` pages use `@bind-Value`. | ## EditForm Setup `EditForm` requires **either** `Model` or `EditContext` — never both. ### Model-based (default) ```razor Name: Employee!.Name" /> Save @code { [SupplyParameterFromForm] private EmployeeModel? Employee { get; set; } protected override void OnInitialized() => Employee ??= new(); private async Task HandleSubmit() { // Save Employee } } ``` This single pattern works in **both** SSR and interactive modes: - In SSR: `FormName` identifies the form, `[SupplyParameterFromForm]` binds POST data, `??=` initializes on GET. - In interactive: `@bind-Value` provides two-way binding, `[SupplyParameterFromForm]` is ignored, `FormName` is harmless. ### EditContext-based (advanced) Use when you need programmatic field tracking, dynamic validation rules, or manual `EditContext.Validate()` calls: ```csharp private EditContext? editContext; private EmployeeModel model = new(); protected override void OnInitialized() { editContext = new EditContext(model); } ``` ```razor ``` ## Submit Handlers | Handler | Fires when | Use when | |---------|-----------|----------| | `OnValidSubmit` | Validation passes | Standard forms with `DataAnnotationsValidator` | | `OnInvalidSubmit` | Validation fails | Need custom handling for invalid state | | `OnSubmit` | Always — validation is manual | Using `EditContext.Validate()` yourself | `OnSubmit` cannot combine with `OnValidSubmit`/`OnInvalidSubmit`. ## Built-in Input Components | Component | Binds to | Notes | |-----------|----------|-------| | `InputText` | `string` | Renders `` | | `InputTextArea` | `string` | Renders `` | | `InputNumber` | `int`, `double`, `decimal` | Renders `` | | `InputDate` | `DateTime`, `DateOnly`, `DateTimeOffset` | Renders `` | | `InputCheckbox` | `bool` | Renders `` | | `InputSelect` | `string`, enums, numeric types | Renders `` | | `InputRadioGroup` | `string`, enums, numeric types | Wraps `InputRadio` children | | `InputFile` | `IBrowserFile` | File upload — interactive modes only | All input components use `@bind-Value` for binding. Always wrap text in a `` or use `id`/`for` attributes for accessibility. ### InputSelect with enum values ```razor -- Select -- @foreach (var value in Enum.GetValues()) { @value } ``` ### InputRadioGroup ```razor @foreach (var p in Enum.GetValues()) { @p } ``` ## Validation ### Data annotations Define validation rules on the model: ```csharp public class EmployeeModel { [Required, StringLength(100)] public string? Name { get; set; } [Required, EmailAddress] public string? Email { get; set; } [Range(18, 99)] public int Age { get; set; } [Required] public string? Department { get; set; } } ``` Add `` inside `EditForm` — without it, annotation attributes are silently ignored. Display errors with: - `` — all errors in a list - ` Model!.FieldName" />` — per-field inline errors ### Custom validator component For server-round-trip validation (uniqueness checks, business rules): ```csharp public class CustomValidator : ComponentBase { [CascadingParameter] private EditContext? EditContext { get; set; } private ValidationMessageStore? messageStore; protected override void OnInitialized() { messageStore = new ValidationMessageStore(EditContext!); EditContext!.OnValidationRequested += (s, e) => messageStore.Clear(); EditContext!.OnFieldChanged += (s, e) => messageStore.Clear(e.FieldIdentifier); } public void DisplayErrors(Dictionary> errors) { foreach (var (field, messages) in errors) { foreach (var message in messages) { messageStore!.Add(EditContext!.Field(field), message); } } EditContext!.NotifyValidationStateChanged(); } public void ClearErrors() { messageStore?.Clear(); EditContext?.NotifyValidationStateChanged(); } } ``` Usage in a form: ```razor @* inputs *@ @code { private CustomValidator? customValidator; private async Task HandleSubmit() { var errors = await RegistrationService.ValidateAsync(Model!); if (errors.Count > 0) { customValidator!.DisplayErrors(errors); return; } // proceed } } ``` ## React to Input Changes (Interactive Only) ### @bind:after Run logic after a bound value changes: ```razor @code { private async Task OnZipCodeChanged() { // Fetch city/state based on new zip code var location = await LocationService.LookupAsync(Model!.ZipCode); Model.City = location?.City; Model.State = location?.State; } } ``` ### @oninput for real-time filtering ```razor @code { private string searchTerm = ""; private List filteredItems = new(); private void OnSearchInput(ChangeEventArgs e) { searchTerm = e.Value?.ToString() ?? ""; filteredItems = allItems.Where(i => i.Name.Contains(searchTerm, StringComparison.OrdinalIgnoreCase)).ToList(); } } ``` ## SSR-Specific Patterns These apply when the form renders in Static SSR (mode = None, or per-page without `@rendermode`). ### SupplyParameterFromForm Binds POST data to a property on form submission: ```csharp [SupplyParameterFromForm] private ContactModel? Contact { get; set; } protected override void OnInitialized() => Contact ??= new(); ``` **Critical:** The `??=` in `OnInitialized` is required. On GET the property is null — `??=` creates the model. On POST the framework populates it — `??=` preserves the posted values. ### FormName — multiple forms on one page Each form needs a unique `FormName`: ```razor ... ... ``` Match `[SupplyParameterFromForm]` to its form: ```csharp [SupplyParameterFromForm(FormName = "search")] private SearchModel? Search { get; set; } [SupplyParameterFromForm(FormName = "contact")] private ContactModel? Contact { get; set; } ``` ### Enhanced navigation for forms Add `Enhance` for SPA-like form submissions without full page reload: ```razor ``` Enhanced forms submit via `fetch`, patch the DOM, and preserve scroll position. The page stays interactive-feeling even in SSR. ### Plain HTML forms When using raw `` instead of `EditForm` in SSR, add the antiforgery token manually: ```razor Send ``` `EditForm` includes the antiforgery token automatically. ## File Upload `InputFile` works in **interactive modes only** — not in Static SSR. ```razor @code { private IBrowserFile? selectedFile; private async Task OnFileSelected(InputFileChangeEventArgs e) { selectedFile = e.File; // Read stream with size limit await using var stream = selectedFile.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024); // Process stream — save to disk, upload to storage, etc. } } ``` Stream size limits: - **Server:** Default ~30 KB SignalR message size. Call `OpenReadStream(maxAllowedSize)` to increase. Large files stream over the circuit. - **WebAssembly:** File is read in the browser. No SignalR limit, but memory constrained. For multiple files: ```razor @code { private async Task OnFilesSelected(InputFileChangeEventArgs e) { foreach (var file in e.GetMultipleFiles(maxAllowedFiles: 10)) { await using var stream = file.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024); // Process each file } } } ``` ## Prevent Double Submission Disable the submit button while processing: ```razor @(isSubmitting ? "Saving..." : "Save") @code { private bool isSubmitting; private async Task HandleSubmit() { isSubmitting = true; try { await SaveService.SaveAsync(Model!); } finally { isSubmitting = false; } } } ``` ## Custom Validation CSS Replace the default `valid`/`invalid` CSS classes: ```csharp public class BootstrapFieldCssClassProvider : FieldCssClassProvider { public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier) { var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any(); return editContext.IsModified(fieldIdentifier) ? (isValid ? "is-valid" : "is-invalid") : ""; } } ``` Apply to the form: ```csharp protected override void OnInitialized() { editContext = new EditContext(model); editContext.SetFieldCssClassProvider(new BootstrapFieldCssClassProvider()); } ``` ## Don'ts - Don't use `@bind` or `@oninput` in Static SSR forms — they require interactivity. Use `[SupplyParameterFromForm]` and `FormName`. - Don't forget `Model ??= new()` in `OnInitialized` — the model is null on GET, populated on POST. - Don't use `OnSubmit` together with `OnValidSubmit`/`OnInvalidSubmit` — they're mutually exclusive. - Don't omit `` — validation attributes are silently ignored without it. - Don't omit `FormName` in SSR when a page has multiple forms — both forms will fire on any submission. - Don't use `InputFile` in Static SSR — it requires an interactive render mode. - Don't use both `Model` and `EditContext` on an `EditForm` — pick one. - Don't forget `` in plain `` elements — the server rejects the POST without it. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [dotnet](https://github.com/dotnet) - **Source:** [dotnet/skills](https://github.com/dotnet/skills) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-dotnet-skills-collect-user-input - Seller: https://agentstack.voostack.com/s/dotnet - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.