多提交按钮同Action的购物车表单技术实现咨询

针对你购物车表单的需求，我给你梳理两个问题的解决方向，都是基于ASP.NET Core原生的模型绑定和表单提交机制：

问题1：传递删除指令及商品ID（不显示ID在按钮上） #

你不想把ID放在按钮的value里显示，那可以用隐藏输入字段+按钮的name/value区分操作的方案：

1. 在每个删除按钮所在的表格行里，添加一个隐藏输入框存储商品ID：

<td>
  <input type="hidden" name="productId" value="@item.ProductId" />
  <button type="submit" name="action" value="delete">Delete</button>
</td>

2. 给表单统一设置目标Action：

<form asp-action="CartManage" method="post">

这样提交删除请求时，表单会把action=delete和对应的productId一起发给后端。按钮上只会显示"Delete"，完全看不到ID。

问题2：提交所有数量输入框的数组并匹配对应ID #

要让后端能正确关联每个数量和商品ID，关键是让输入框的name属性能被ASP.NET Core的模型绑定识别，这里推荐用强类型视图模型+for循环（不要用foreach，因为它无法生成带索引的name）：

第一步：准备视图模型 #

先定义两个模型类（示例）：

public class ShoppingCartViewModel
{
    public List<CartItemViewModel> CartItems { get; set; }
    public decimal TotalSum { get; set; }
}

public class CartItemViewModel
{
    public int ProductId { get; set; }
    public string ProductTitle { get; set; }
    public decimal ProductPrice { get; set; }
    public int Quantity { get; set; }
    public decimal LineSum { get; set; }
}

第二步：修改视图中的循环方式 #

把原来的foreach改成for循环，这样生成的输入框会带有索引，方便模型绑定：

@for (int i = 0; i < Model.CartItems.Count; i++)
{
    <tr>
        <td nowrap>
            <a asp-action="Details" asp-route-id="@Model.CartItems[i].ProductId">
                @Model.CartItems[i].ProductTitle
            </a>
        </td>
        <td nowrap>@Model.CartItems[i].ProductPrice</td>
        <td nowrap>
            <!-- 数量输入框，自动生成带索引的name -->
            <input asp-for="@Model.CartItems[i].Quantity" />
            <!-- 隐藏字段传递商品ID，确保后端能关联数量 -->
            <input type="hidden" asp-for="@Model.CartItems[i].ProductId" />
        </td>
        <td nowrap>@Model.CartItems[i].LineSum</td>
        <td>
            <input type="hidden" name="productId" value="@Model.CartItems[i].ProductId" />
            <button type="submit" name="action" value="delete">Delete</button>
        </td>
    </tr>
}

第三步：更新按钮的设置 #

给底部的更新按钮也加上name和value，明确操作类型：

<button type="submit" name="action" value="update">Update quantities</button>

后端Action的处理方向 #

你的Action可以通过接收action参数判断是删除还是更新操作，同时接收对应的参数：

[HttpPost]
public IActionResult CartManage(string action, int? productId, ShoppingCartViewModel model)
{
    switch (action)
    {
        case "delete":
            if (productId.HasValue)
            {
                // 执行删除逻辑：根据productId移除购物车中的商品
            }
            break;
        case "update":
            if (model?.CartItems != null)
            {
                // 执行更新逻辑：遍历model.CartItems，每个元素都有ProductId和对应的Quantity
                foreach (var item in model.CartItems)
                {
                    // 更新该商品的数量
                }
            }
            break;
    }
    // 重定向回购物车页面，刷新数据
    return RedirectToAction(nameof(CartManage));
}

这样整个表单的所有按钮都指向同一个Action，通过action参数区分操作类型，完美解决你的需求。

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