Collect User Input

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)

    
    

    
        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:

private EditContext? editContext;
private EmployeeModel model = new();

protected override void OnInitialized()
{
    editContext = new EditContext(model);
}

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

    -- Select --
    @foreach (var value in Enum.GetValues())
    {
        @value
    }

InputRadioGroup

    @foreach (var p in Enum.GetValues())
    {
        
             @p
        
    }

Validation

Data annotations

Define validation rules on the model:

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):

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:

    
    
    
    @* 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:

@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

@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:

[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:

...
...

Match [SupplyParameterFromForm] to its form:

[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:

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:

    
    
    Send

EditForm includes the antiforgery token automatically.

File Upload

InputFile works in interactive modes only — not in Static SSR.

@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:

@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:

    @(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:

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:

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
• Source: dotnet/skills
• License: MIT

Install and usage instructions live in the source repository linked above.