Passage d'une liste d'objets dans une méthode de contrôleur MVC à l'aide de jQuery Ajax

Question

J'essaye de passer un tableau d'objets dans une méthode de contrôleur MVC en utilisant la fonction ajax() de jQuery. Lorsque j'entre dans la méthode de contrôleur C# PassThing(), l'argument "things" est nul. J'ai essayé d'utiliser un type de liste pour les objets suivants pour l'argument, mais cela ne fonctionne pas non plus. Qu'est-ce que je fais de mal ?

<script type="text/javascript">
    $(document).ready(function () {
        var things = [
            { id: 1, color: 'yellow' },
            { id: 2, color: 'blue' },
            { id: 3, color: 'red' }
        ];

        $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: '/Xhr/ThingController/PassThing',
            data: JSON.stringify(things)
        });
    });
</script>

public class ThingController : Controller
{
    public void PassThing(Thing[] things)
    {
        // do stuff with things here...
    }

    public class Thing
    {
        public int id { get; set; }
        public string color { get; set; }
    }
}

Answer 1

En utilisant la suggestion de NickW, j'ai réussi à faire fonctionner ce système en utilisant things = JSON.stringify({ 'things': things }); Voici le code complet.

$(document).ready(function () {
    var things = [
        { id: 1, color: 'yellow' },
        { id: 2, color: 'blue' },
        { id: 3, color: 'red' }
    ];      

    things = JSON.stringify({ 'things': things });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Home/PassThings',
        data: things,
        success: function () {          
            $('#result').html('"PassThings()" successfully called.');
        },
        failure: function (response) {          
            $('#result').html(response);
        }
    }); 
});

public void PassThings(List<Thing> things)
{
    var t = things;
}

public class Thing
{
    public int Id { get; set; }
    public string Color { get; set; }
}

Il y a deux choses que j'ai apprises de cela :

1. Les paramètres contentType et dataType sont absolument nécessaires dans la fonction ajax(). Elle ne fonctionnera pas s'ils sont absents. J'ai découvert cela après de nombreux essais et erreurs.

2. Pour transmettre un tableau d'objets à une méthode du contrôleur MVC, il suffit d'utiliser le format JSON.stringify({ 'things' : things }).

J'espère que cela aidera quelqu'un d'autre !

Answer 2

Tu ne pouvais pas juste faire ça ?

var things = [
    { id: 1, color: 'yellow' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'red' }
];
$.post('@Url.Action("PassThings")', { things: things },
   function () {
        $('#result').html('"PassThings()" successfully called.');
   });

...et marquez votre action avec

[HttpPost]
public void PassThings(IEnumerable<Thing> things)
{
    // do stuff with things here...
}

Answer 3

J'utilise une application Web .Net Core 2.1 et je n'ai pas réussi à faire fonctionner une seule réponse ici. J'ai obtenu soit un paramètre vide (si la méthode a été appelée), soit une erreur de serveur 500. J'ai commencé à jouer avec toutes les combinaisons possibles de réponses et j'ai finalement obtenu un résultat fonctionnel.

Dans mon cas, la solution était la suivante :

script - stringifier le tableau original (sans utiliser une propriété nommée).

    $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: mycontrolleraction,
        data: JSON.stringify(things)
    });

Et dans la méthode du contrôleur, utilisez [FromBody].

    [HttpPost]
    public IActionResult NewBranch([FromBody]IEnumerable<Thing> things)
    {
        return Ok();
    }

Les échecs comprennent :

• Nommer le contenu

  data : { content : nodes }, // Erreur de serveur 500

• Ne pas avoir le contentType = erreur de serveur 500

Notas

• dataType n'est pas nécessaire, malgré ce que disent certaines réponses, car il est utilisé pour l'option réponse décodage (donc non pertinent pour le demande exemples ici).
• List<Thing> fonctionne également dans la méthode du contrôleur

Answer 4

Le formatage de vos données peut être à l'origine du problème. Essayez l'une ou l'autre de ces solutions :

data: '{ "things":' + JSON.stringify(things) + '}',

Ou (de Comment puis-je envoyer un tableau de chaînes de caractères à ASP.NET MVC Controller sans formulaire ? )

var postData = { things: things };
...
data = postData

Answer 5

J'ai une réponse parfaite à tout cela : J'ai essayé tant de solutions que je n'ai pas réussi à les obtenir, mais j'ai finalement réussi à m'en sortir tout seul :

       $.ajax({
            traditional: true,
            url: "/Conroller/MethodTest",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify( 
               [
                { id: 1, color: 'yellow' },
                { id: 2, color: 'blue' },
                { id: 3, color: 'red' }
                ]),
            success: function (data) {
                $scope.DisplayError(data.requestStatus);
            }
        });

Contrôleur

public class Thing
{
    public int id { get; set; }
    public string color { get; set; }
}

public JsonResult MethodTest(IEnumerable<Thing> datav)
    {
   //now  datav is having all your values
  }