如何使用minicart.js将fieldset值传递至MVC控制器

我来帮你梳理清楚整个数据传递的流程和实现方式，结合你给出的代码片段，一步步来：

1. 先理解minicart.js的默认提交逻辑 #

从你提供的minicart配置代码可以看到，它已经默认把结账表单的提交地址设为了/Home/CheckOut。当用户点击结账按钮时，minicart会自动生成一个包含所有购物车商品的表单——它会把你通过fieldset添加的item_name、amount等字段，转成带索引的隐藏字段（比如item_name_1、amount_1），然后以POST请求的方式提交到你的MVC控制器。

你不需要额外写复杂的JS来手动收集数据，minicart已经帮你处理了这部分工作。

2. 编写MVC控制器接收数据 #

你有两种方式来接收这些提交的数据，推荐用模型绑定的方式，更简洁易维护：

方式一：使用模型类（推荐）

首先创建一个对应购物车商品的模型类，字段要和minicart生成的表单字段对应：

public class CartItem
{
    // 对应minicart里的item_name_{index}
    public string ItemName { get; set; }
    // 对应amount_{index}
    public decimal Amount { get; set; }
    // 对应quantity_{index}
    public int Quantity { get; set; }
    // 如果需要其他字段，比如currency_code、business，也可以加上
    public string CurrencyCode { get; set; }
}

然后在HomeController里写POST方法，直接用List<CartItem>接收列表数据：

[HttpPost]
public ActionResult CheckOut(List<CartItem> cartItems)
{
    // 这里cartItems就包含了所有购物车商品的数据
    foreach (var item in cartItems)
    {
        // 处理单个商品：比如保存到数据库、计算总价等
        var productName = item.ItemName;
        var price = item.Amount;
        var count = item.Quantity;
    }

    // 后续操作：比如跳转到订单确认页
    return View("CheckOutConfirmation");
}

MVC的模型绑定会自动识别带索引的表单字段（比如item_name_1、item_name_2），并把它们映射到List<CartItem>的对应元素中。

方式二：直接读取Request.Form（适合简单场景）

如果不想创建模型类，也可以直接从Request.Form里手动提取数据：

[HttpPost]
public ActionResult CheckOut()
{
    var cartItems = new List<CartItem>();
    int itemIndex = 1;

    // 循环读取所有商品数据，直到找不到对应索引的字段
    while (!string.IsNullOrEmpty(Request.Form["item_name_" + itemIndex]))
    {
        var item = new CartItem
        {
            ItemName = Request.Form["item_name_" + itemIndex],
            Amount = decimal.Parse(Request.Form["amount_" + itemIndex]),
            Quantity = int.Parse(Request.Form["quantity_" + itemIndex]),
            CurrencyCode = Request.Form["currency_code"]
        };
        cartItems.Add(item);
        itemIndex++;
    }

    // 处理逻辑...
    return View();
}

3. 额外：添加自定义数据（可选） #

如果你需要在结账时传递一些额外的自定义数据，可以在checkout事件里给表单添加隐藏字段：

paypal.minicart.cart.on('checkout', function (evt) {
    var checkoutForm = evt.target; // 获取minicart生成的结账表单
    
    // 创建自定义隐藏字段
    var customField = document.createElement('input');
    customField.type = 'hidden';
    customField.name = 'UserEmail';
    customField.value = 'user@example.com'; // 替换成实际的自定义值
    
    checkoutForm.appendChild(customField);
});

之后在控制器里就可以通过Request.Form["UserEmail"]获取这个值。

4. 验证数据是否正确传递 #

你可以在控制器方法里打个断点，查看Request.Form集合里的所有字段，确认从fieldset添加的item_name、amount等数据都被正确提交到了后端。

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