Razor Pages@foreach循环中提交表单无法获取正确商品ID的问题

问题根源 #

你遇到的问题本质是：同一个<form>中存在多个同名的name="productId"隐藏输入框，浏览器提交表单时只会将第一个该名称的参数值发送给后台，导致后台OnPostAddToCart方法始终接收到第一个商品的ID。

三种可行解决方案 #

方案1：每个商品单独封装一个<form>（最直观） #

把每个商品的展示内容和“Add To Cart”按钮单独放在一个独立的<form>中，这样每个表单内只有一个对应商品ID的隐藏输入框，提交时自然会传递当前商品的ID。

前端代码（.cshtml）：

@foreach (var product in Model.PopularProducts)
{
    <div class="product-card">
        <form method="post" asp-page-handler="AddToCart">
            <!-- 自动生成name="Id"，对应后台参数名 -->
            <input type="hidden" asp-for="@product.Id" />
            <h4>@product.Name</h4>
            <p>Price: $@product.Price</p>
            <button type="submit">Add To Cart</button>
        </form>
    </div>
}

后台代码：

public IActionResult OnPostAddToCart(int id)
{
    // 这里的id就是点击的商品ID，执行添加购物车逻辑
    // ...
    return RedirectToPage();
}

如果习惯用productId作为参数名，只需把隐藏输入框的name手动设为productId，后台参数改为int productId即可。

方案2：利用提交按钮的name和value传递ID（保留单个<form>） #

不需要隐藏输入框，直接给每个“Add To Cart”按钮设置统一的name，并将按钮的value设为对应商品的ID。点击按钮时，浏览器会将该按钮的name和value作为参数提交，后台直接接收即可。

前端代码：

<form method="post" asp-page-handler="AddToCart">
    @foreach (var product in Model.PopularProducts)
    {
        <div class="product-card">
            <h4>@product.Name</h4>
            <p>Price: $@product.Price</p>
            <button type="submit" name="selectedProductId" value="@product.Id">Add To Cart</button>
        </div>
    }
</form>

后台代码：

public IActionResult OnPostAddToCart(int selectedProductId)
{
    // selectedProductId就是当前点击的商品ID
    // ...
    return RedirectToPage();
}

方案3：为输入框设置唯一名称（不推荐，仅作思路参考） #

如果坚持要使用单个<form>+唯一名称的输入框，可以通过FormCollection接收所有表单参数，再结合按钮的value来定位当前选择的商品ID。

前端代码：

<form method="post" asp-page-handler="AddToCart">
    @foreach (var product in Model.PopularProducts)
    {
        <div class="product-card">
            <input type="hidden" name="product_@product.Id" value="@product.Id" />
            <h4>@product.Name</h4>
            <p>Price: $@product.Price</p>
            <button type="submit" name="clickedBtn" value="@product.Id">Add To Cart</button>
        </div>
    }
</form>

后台代码：

public IActionResult OnPostAddToCart(FormCollection form)
{
    // 先获取点击按钮对应的商品ID
    var clickedProductId = form["clickedBtn"];
    if (int.TryParse(clickedProductId, out int productId))
    {
        // 执行添加购物车逻辑
        // ...
    }
    return RedirectToPage();
}

这种方法冗余度较高，不如前两种方案简洁，仅作为特殊场景下的备选。

内容的提问来源于stack exchange，提问作者username952