«400 неверных запросов» при публикации данных в основной веб-API asp.net с FormData в XmlHttpRequest - PullRequest
Новая
       33

«400 неверных запросов» при публикации данных в основной веб-API asp.net с FormData в XmlHttpRequest

0 голосов
/ 08 октября 2019

У меня есть веб-API ASP.Net Core с этим действием: 

    // 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; }
    }

Я вызываю действие из javascriptSPA, с 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. title: Произошла одна или несколько ошибок проверки

Я добавил этот код перед отправкой 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?

1 Ответ

1 голос
/ 10 октября 2019

Если вы хотите разместить данные с FormData, то вам не следует устанавливать Content-Type на 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 приоритет: 1 термин: в описании: essai

Поскольку вы получаете данные в качестве модели Тип Tache, вам необходимо передать свойствос именем id вместо idTache, отображаемым в результатах вашего журнала.

Вы не показываете свой код представления, я предлагаю использовать name="id" для этого ввода.

Правильнов моем случае лог-файл имеет __RequestVerificationToken:, он также исключается, если вы используете <form id="formEdit">: 

id: 11
dateCreation: 2019-10-08
dateEcheance: 2019-10-22
priorite: 1
terminee: on
description: essai
__RequestVerificationToken:xxxxxxxx
...