skills.rest
ecoDriverltd
ecoDriverltdOFFICIAL
Explore all skills by this author →
WebsiteGitHub

collect-user-input

Build and validate Blazor forms across SSR and interactive render modes.

Updated Jul 2, 2026
Search Tags:#validation#forms#ssr#blazor#file-upload#data-binding#editform
One-click install
npx skills add https://github.com/ecoDriverltd/FoundryAgentsExperiment --skill collect-user-input-ecodriverltd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: collect-user-input
Source: https://github.com/ecoDriverltd/FoundryAgentsExperiment/tree/main/.agents/skills/collect-user-input
Command: npx skills add https://github.com/ecoDriverltd/FoundryAgentsExperiment --skill collect-user-input-ecodriverltd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Blazor developers often struggle to choose the correct form pattern for their render mode, leading to broken bindings, ignored validation attributes, and double submissions. This Skill provides the correct EditForm, binding, and validation patterns for Static SSR, Server, WebAssembly, and Auto modes. ## Core Features & Use Cases - EditForm Patterns: Model-based and EditContext-based form setup with correct use of FormName, SupplyParameterFromForm, and Enhance for SSR scenarios. - Validation: DataAnnotationsValidator, custom validator components with ValidationMessageStore, and custom CSS class providers for styling valid/invalid fields. - Input Handling: Built-in input components (InputText, InputSelect, InputFile, etc.), @bind:after reactions, real-time filtering with @oninput, and file upload with stream size limits. - Use Case: You need a registration form on a static SSR page with server-side uniqueness validation. The Skill guides you to use FormName, SupplyParameterFromForm with ??= initialization, and a CustomValidator component to display server errors. ## Quick Start Add a validated employee registration form to my Blazor page using EditForm with data annotations.

Frequently Asked Questions about collect-user-input

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a form in Blazor with validation?▼

Use EditForm with a Model, add DataAnnotationsValidator inside it, and bind inputs with @bind-Value. Define rules with attributes like Required and StringLength on the model, then display errors with ValidationSummary or ValidationMessage.

How do Blazor forms work in Static SSR mode?▼

In Static SSR, use EditForm with a unique FormName and bind POST data via a property decorated with SupplyParameterFromForm. Initialize the model with ??= in OnInitialized, since @bind and @onchange require interactivity and will not work.

Why is my Blazor form validation not working?▼

Validation attributes are silently ignored unless DataAnnotationsValidator is placed inside the EditForm. Also verify you are not mixing OnSubmit with OnValidSubmit, and that the model is initialized rather than null.

Can I use InputFile for uploads in Blazor Static SSR?▼

No, InputFile requires an interactive render mode such as Server or WebAssembly. In Server mode, call OpenReadStream with maxAllowedSize to raise the default SignalR message size limit for larger files.

How do I handle multiple forms on one Blazor page?▼

Give each EditForm a unique FormName and match each model property with SupplyParameterFromForm using the same FormName value. Without unique names, both forms fire on any submission.

When should I use EditContext instead of Model in EditForm?▼

Use EditContext when you need programmatic field tracking, dynamic validation rules, manual Validate calls, or a custom FieldCssClassProvider. Never supply both Model and EditContext on the same EditForm.

Related Skills

Explore More Software Engineering Skills→
dotnetdotnet
5.3k

create-blazor-project

Scaffold new Blazor web applications with the correct render mode and project structure.

Official
Intermediate
vallafedericovallafederico

solidstart-data-mutation

Manage data mutations in SolidStart applications using actions.

Community
Advanced
SparkymodSparkymod
1

blazor-prerender-lifecycle

Resolve Blazor prerender errors and lifecycle issues for server-side rendering.

Community
Intermediate
ojrojasojrojas

use-js-interop

Manage JavaScript interop in Blazor components with lifecycle timing and typed wrappers.

Community
Advanced