1

I have a ASP.Net Core web API with this action :

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

Here is the code of the Tache entity :

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

I call the action from a javascript SPA, with XHR like this :

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

The code above works fine, but this one does not :

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

Each field of the form has a correct name, is enabled and contains valid input.

But I always get à "400 : bad request" response.
Debug tools of Firefox show the following error in the XHR result :

Input string '-----------------------------18691991225667' is not a valid number. Path '', line 1, position 43.
title : One or more validation errors occurred

I added this code before sending the xhr to watch the content of the data object :

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

Here is the result :

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

It seems to be correct. So what is wrong with my using of FormData ?

2
  • Have you logged uri and data to verify that they are what you they think are? Commented Oct 8, 2019 at 13:33
  • 1
    Yes, uri is correct and log of data is shown at the end of my post Commented Oct 8, 2019 at 13:57

1 Answer 1

4

If you would like to post data with FormData, then you should not set Content-Type to application/json.Besides, use [FromForm] instead of [FromBody] on your action parameter.

1.Remove below line in js code

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

2.Use [FromForm]

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

Here is the result :

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

Since you receive the data as a model Type Tache, you need to pass a property named id instead of idTache shown in your log result.

You do not show your view code,I suggest that you use name="id" for that input textbox.

The correct log result in my case has a __RequestVerificationToken:,it is also expeted if you use <form id="formEdit">:

id: 11
dateCreation: 2019-10-08
dateEcheance: 2019-10-22
priorite: 1
terminee: on
description: essai
__RequestVerificationToken:xxxxxxxx
Sign up to request clarification or add additional context in comments.

1 Comment

It works and I now better understand how FormData works. Thank you very much Xing Zou !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.