Skip to content

Blazor forms with @formname set from Razor expressions cannot be submitted #50882

@DamianEdwards

Description

@DamianEdwards

Found when updating an app from an rc.2 build to latest rtm build.

Info

SDK version: 8.0.100-rtm.23471.13

Repro

  1. Create a new Blazor Web App

  2. Update the Home.razor to the following:

    @page "/"
    
    <PageTitle>Home</PageTitle>
    
    <h1>Hello, world!</h1>
    
    Welcome to your new app.
    
    @if (items is not null)
    {
        @foreach (var item in items)
        {
            <form method="post" @formname="@($"addtocart-{item.Id}")" @onsubmit="HandleAddToCart">
                <input type="hidden" name="ItemId" value="@item.Id" />
                <input type="hidden" name="ItemName" value="@item.Name" />
                <AntiforgeryToken />
    
                <strong>@item.Name</strong> <button type="submit">Add to cart</button>
            </form>
        }
    }
    else
    {
        <p>Loading...</p>
    }
    
    @if (!string.IsNullOrEmpty(message))
    {
        <p>@message</p>
    }
    
    @code {
        private List<Item>? items;
        private string? message;
    
        [SupplyParameterFromForm]
        public int? ItemId { get; set; }
    
        [SupplyParameterFromForm]
        public string? ItemName { get; set; }
    
        protected override void OnInitialized()
        {
            // Load items
            items = [new(1, "Item 1"), new(2, "Item 2"), new(3, "Item 3")];
        }
    
        private void HandleAddToCart()
        {
            message = $"Added {ItemName} with id {ItemId} to cart";
        }
    
        record Item(int Id, string Name);
    }
  3. Run the app and try to click one of the "Add to cart" buttons

Expected

The form can be submitted successfully and the form handler runs.

Actual

An error message is shown in the browser:

The POST request does not specify which form is being submitted. To fix this, ensure <form> elements have a @formname attribute with any unique value, or pass a FormName parameter if using <EditForm>.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions