WebFormsForm — Interactive Mode

This sample demonstrates the <WebFormsForm> component that captures form data via JS interop in interactive mode, then populates Request.Form through SetRequestFormData. This gives you the same Request.Form["field"] API from Web Forms — but in a fully interactive Blazor page.

⚡ Interactive Mode: Unlike the SSR Request.Form demo, this page runs in interactive render mode. The <WebFormsForm> component intercepts the HTML form submit, reads all field values via JavaScript interop, and delivers them to your C# handler as FormSubmitEventArgs.

Try It — Submit the Form

Fill in the fields below and click Submit Form. The handler calls SetRequestFormData(e) so that Request.Form["field"] works exactly like Web Forms.

User Profile Form

Before / After Code Comparison

1. Form Markup

Before (Web Forms)
<form runat="server">
    <asp:TextBox ID="txtUsername" runat="server" />
    <asp:Button ID="btnSubmit" runat="server"
        OnClick="btnSubmit_Click" Text="Submit" />
</form>
After (Blazor with BWFC)
<WebFormsForm OnSubmit="HandleFormSubmit">
    <input type="text" name="username" />
    <button type="submit">Submit</button>
</WebFormsForm>

2. Reading Form Values in the Handler

Before (Web Forms)
protected void btnSubmit_Click(object sender, EventArgs e)
{
    string username = Request.Form["username"];
    string email = Request.Form["email"];
    if (username != null)
    {
        lblGreeting.Text = "Hello, " + username;
    }
}
After (Blazor with BWFC)
private void HandleFormSubmit(FormSubmitEventArgs e)
{
    SetRequestFormData(e);
    string username = Request.Form["username"];
    string email = Request.Form["email"];
    if (username != null)
    {
        greeting = "Hello, " + username;
    }
}

3. Multi-Value Fields (GetValues)

Before (Web Forms)
// Get all selected checkbox values
string[] colors = Request.Form.GetValues("colors");
if (colors != null)
{
    foreach (string color in colors)
    {
        // process each selected color
    }
}
After (Blazor with BWFC)
// Same call works after SetRequestFormData!
string[] colors = Request.Form.GetValues("colors");
if (colors != null)
{
    foreach (string color in colors)
    {
        // process each selected color
    }
}
// TODO(bwfc-general): Migrate to @bind with
// List<string> for interactive checkbox groups.

Migration Guidance

The <WebFormsForm> component is the interactive counterpart to the SSR-based Request.Form shim. Together they form a progression:

Migration Path: Forms
Stage Technique Render Mode How It Works
1. SSR Form <form method="post"> + Request.Form Static SSR Real HTTP POST; form data in IFormCollection. See Request.Form demo.
2. WebFormsForm <WebFormsForm OnSubmit> + SetRequestFormData Interactive JS interop reads DOM; populates Request.Form in C#. (This page.)
3. EditForm <EditForm Model> + @bind-Value Interactive Full Blazor model binding with validation. (Target state.)
When to Use Each
  • Stage 1 (SSR): Use when pages can stay in static rendering — simplest migration with zero JS.
  • Stage 2 (WebFormsForm): Use when you need interactive render mode but aren't ready to rewrite form handling to EditForm. Your existing Request.Form["key"] code keeps working.
  • Stage 3 (EditForm): The target state. Migrate here when you're ready for full Blazor model binding, validation, and two-way binding.

Tip: Add // TODO(bwfc-general): Migrate to EditForm + @bind comments alongside your WebFormsForm code to track what still needs updating.

Source Code

@page "/migration/webforms-form"
@using BlazorWebFormsComponents
@inherits WebFormsPageBase

<WebFormsForm OnSubmit="HandleFormSubmit">
    <input type="text" name="username" />
    <input type="text" name="email" />
    <input type="checkbox" name="colors" value="Red" />
    <button type="submit">Submit</button>
</WebFormsForm>

@code {
    private bool isPostBack;
    private string? submittedUsername;

    private void HandleFormSubmit(FormSubmitEventArgs e)
    {
        SetRequestFormData(e);
        isPostBack = true;
        submittedUsername = Request.Form["username"];
        // Request.Form.GetValues("colors") for multi-value
    }
}