Comment transmettre un tableau d'objets à un contrôleur MVC à l'aide de jQuery AJAX ?

Utiliser jQuery AJAX pour envoyer un tableau d'objets à un contrôleur MVC

Lors de l'envoi d'un tableau d'objets à un contrôleur MVC à l'aide de la méthode ajax() de jQuery, un problème courant est la réception d'une valeur null pour le tableau dans le contrôleur. Cela peut se produire même lorsque le paramètre du contrôleur est correctement défini comme List<T>.

La solution implique deux ajustements clés :

1. Spécifiez le type de données JSON : L'appel ajax() doit explicitement définir contentType et dataType sur 'application/json; charset=utf-8'.

2. Sérialiser les données avec JSON.stringify() : Le tableau d'objets JavaScript doit être converti en chaîne JSON à l'aide de JSON.stringify(). Surtout, cette chaîne doit encapsuler le tableau dans une propriété (par exemple, « choses »).

Voici le code corrigé implémentant ces changements :

<code class="language-javascript">$(document).ready(function () {
    const things = [
        { id: 1, color: 'yellow' },
        { id: 2, color: 'blue' },
        { id: 3, color: 'red' }
    ];      

    const data = JSON.stringify({ things: things });

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

Et la méthode du contrôleur C# correspondante :

<code class="language-csharp">public void PassThings(List<Thing> things)
{
    // Access the 'things' array here
}

public class Thing
{
    public int Id { get; set; }
    public string Color { get; set; }
}</code>

En suivant ces étapes, vous réussirez à transmettre le tableau d'objets à votre méthode de contrôleur MVC via jQuery AJAX. Notez le changement de failure à error dans l'appel AJAX pour une meilleure gestion des erreurs, affichant le texte de réponse à des fins de débogage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!