ASP.NET MVC-将包含数组的FormData映射到模型类

时间:2019-06-11 16:40:34

标签: javascript c# asp.net vue.js form-data

在前端,我当前正在创建一个FormData对象,该对象包含具有以下属性的数组:“ productName”和“ productQuantity”。我能够将FormData发送到我的服务器端。但是,我无法绑定任何值。如何将FormData中的对象列表正确映射到控制器上的ASP.NET MVC Model类?下面是我当前的代码:

更新我仍在尝试解决此问题,非常感谢您的帮助! Update2 为了清楚起见,我将Vuejs用作客户端框架

客户端

{'a': 1,
 'b': 2,
 'c': 3,
 'd': 4,
 'e': 5,
 'f': 6,
 'g': 7,
 'h': 8,
 'i': 9,
 'j': 10,
 'k': 11,
 'l': 12,
 'm': 13,
 'n': 14,
 'o': 15,
 'p': 16,
 'q': 17,
 'r': 18,
 's': 19,
 't': 20,
 'u': 21,
 'v': 22,
 'w': 23,
 'x': 24,
 'y': 25,
 'z': 26}

服务器端(控制器)

  const formData = new FormData();

  formData.append("Product[0].ProductName", "T-Shirt");
  formData.append("Product[0].Options.Quantity", "1");
  formData.append("Product[1].ProductName", "Shoe");
  formData.append("Product[1].Options.Quantity", "2");

服务器端(模型)

    [HttpPost("verifyCart")]
    public async Task<IActionResult> verifyCart([FromForm] Product[] products)
    {
    }

1 个答案:

答案 0 :(得分:2)

我可以通过更改以下表单数据来使其起作用:

formData.append("Product[0].ProductName", "T-Shirt");
formData.append("Product[0].Options.Quantity", "1");
formData.append("Product[1].ProductName", "Shoe");
formData.append("Product[1].Options.Quantity", "2");

到“产品”的复数

formData.append("Products[0].ProductName", "T-Shirt");
formData.append("Products[0].Options.Quantity", "1");
formData.append("Products[1].ProductName", "Shoe");
formData.append("Products[1].Options.Quantity", "2");

因为您在发布操作中使用的参数是“产品”:

[HttpPost]
public IActionResult VerifyCart([FromForm] Product[] products)
{
}

我用来测试的客户端代码是:

const formData = new FormData();

    formData.append("Products[0].ProductName", "T-Shirt");
    formData.append("Products[0].Options.Quantity", "1");
    formData.append("Products[1].ProductName", "Shoe");
    formData.append("Products[1].Options.Quantity", "2");

    $.ajax({
            type: "POST",
            url: '/Home/VerifyCart',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
            }
     });

更新

我更改了客户端代码以解决数量问题:

const formData = new FormData();

    formData.append("Products[0].ProductName", "T-Shirt");
    formData.append("Products[0].Options[0].Quantity", "1");
    formData.append("Products[1].ProductName", "Shoe");
    formData.append("Products[1].Options[0].Quantity", "2");

    $.ajax({
            type: "POST",
            url: '/Home/VerifyCart',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
            }
     });