Javascript 在XmlHttpRequest中使用FormData将数据发布到asp.net核心web api时出现“400错误请求”

我有一个具有以下操作的ASP.Net核心web API：

    // POST api/TodoList
    [HttpPost]
    public void Post([FromBody] Tache tache)
    {
       TodoListContext.AjouterTache(tache);
    }

以下是Tache实体的代码：

    public class Tache
    {
       public int Id { get; set; }

       [DataType(DataType.MultilineText)]
       [Required, MaxLength(250)]
       public string Description { get; set; }

       [DataType(DataType.Date)]
       public DateTime DateCreation { get; set; }

       [DataType(DataType.Date)]
       public DateTime DateEcheance { get; set; }

       public int Priorite { get; set; }

       public bool Terminee { get; set; }
    }

我从javascript SPA调用该操作，XHR如下所示：

    function ajouterTache() {
       // Construit un objet Tâche à partir des valeurs saisies
       let tache = {}; 
       tache.id = document.getElementById("idTache").value;
       tache.dateCreation = document.getElementById("dateCreation").value;
       tache.dateEcheance = document.getElementById("dateEcheance").value;
       tache.priorite = document.getElementById("priorite").value;
       tache.terminee = document.getElementById("terminee").checked;
       tache.description = document.getElementById("description").value; 
       console.log(tache);

       // Envoie la tâche à l'API
       const req = new XMLHttpRequest();
       req.onload = function () {
          ...
       };

       req.open('POST', uri, true);
       req.setRequestHeader("Content-Type", "application/json");
       req.send(JSON.stringify(tache));
    }

上面的代码可以正常工作，但此代码不能：

    function ajouterTache() {
       data = new FormData(document.getElementById("formEdit"));

       // Envoie la tâche à l'API
       const req = new XMLHttpRequest();
       req.onload = function () {
        ...
       };

       req.open('POST', uri, true);
       req.setRequestHeader("Content-Type", "application/json");
       req.send(data);
    }

表单的每个字段都有正确的名称、已启用并且包含有效的输入

但我总是得到400分：糟糕的请求响应。 Firefox的调试工具在XHR结果中显示以下错误：

输入字符串'-------------18691991225667'不是有效数字。路径，第1行，位置43。 标题：发生了一个或多个验证错误

在发送xhr以查看数据对象的内容之前，我添加了以下代码：

    let formData = new FormData(document.getElementById("formEdit"));
    for (let pair of formData.entries()) {
       console.log(pair[0] + ': ' + pair[1] + ", " + typeof pair[1]);
    }

结果如下：

idTache: 11
dateCreation: 2019-10-08
dateEcheance: 2019-10-22
priorite: 1
terminee: on
description: essai

---

这似乎是正确的。那么，我使用FormData有什么问题呢？

如果您想使用FormData发布数据，那么不应该将内容类型设置为application/json。此外，在操作参数上使用[FromForm]而不是[FromBody]

1.删除js代码中的下一行

req.setRequestHeader("Content-Type", "application/json");

2.使用[FromForm]

[HttpPost]
 public void Post([FromForm] Tache tache)

结果如下：

idTache: 11
dateCreation: 2019-10-08
dateEcheance: 2019-10-22
priorite: 1
terminee: on
description: essai

ID:11 创建日期：2019-10-08 日期含义：2019-10-22 priorite:1 终点站：在 描述：essai

由于您是作为模型类型链接接收数据的，因此需要传递名为id的属性，而不是日志结果中显示的idTache

如果不显示视图代码，我建议您对该输入文本框使用name=id

在我的案例中，正确的日志结果有一个u RequestVerificationToken:，如果您使用：

---

如果希望使用FormData发布数据，则不应将内容类型设置为application/json。此外，在操作参数上使用[FromForm]而不是[FromBody]

1.删除js代码中的下一行

req.setRequestHeader("Content-Type", "application/json");

2.使用[FromForm]

[HttpPost]
 public void Post([FromForm] Tache tache)

结果如下：

idTache: 11
dateCreation: 2019-10-08
dateEcheance: 2019-10-22
priorite: 1
terminee: on
description: essai

ID:11 创建日期：2019-10-08 日期含义：2019-10-22 priorite:1 终点站：在 描述：essai

由于您是作为模型类型链接接收数据的，因此需要传递名为id的属性，而不是日志结果中显示的idTache

如果不显示视图代码，我建议您对该输入文本框使用name=id

在我的案例中，正确的日志结果有一个u RequestVerificationToken:，如果您使用：

---

您是否记录了uri和数据以验证它们是否与您所认为的一样？是的，uri是正确的，数据日志显示在我的帖子末尾。您是否记录了uri和数据以验证它们是否与您所认为的一样？是的，uri是正确的，数据日志显示在我的帖子末尾，我现在更好地理解了FormData的工作原理。非常感谢邹星！它是有效的，我现在更好地理解了FormData的工作原理。非常感谢邹星！