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

La seule façon de faire fonctionner ce système est de transmettre le JSON sous la forme d'une chaîne de caractères, puis de le désérialiser en utilisant JavaScriptSerializer.Deserialize<T>(string input) ce qui est assez étrange si c'est le désérialiseur par défaut de MVC 4.

Mon modèle comporte des listes d'objets imbriquées et le mieux que j'ai pu obtenir en utilisant des données JSON, c'est que la liste la plus haute comprenne le nombre correct d'éléments, mais que tous les champs des éléments soient nuls.

Ce genre de chose ne devrait pas être si difficile.

    $.ajax({
        type: 'POST',
        url: '/Agri/Map/SaveSelfValuation',
        data: { json: JSON.stringify(model) },
        dataType: 'text',
        success: function (data) {

    [HttpPost]
    public JsonResult DoSomething(string json)
    {
        var model = new JavaScriptSerializer().Deserialize<Valuation>(json);

Answer 2

Ceci est le code de travail pour votre requête, vous pouvez l'utiliser.

Contrôleur

    [HttpPost]
    public ActionResult save(List<ListName> listObject)
    {
    //operation return
    Json(new { istObject }, JsonRequestBehavior.AllowGet); }
    }

javascript

  $("#btnSubmit").click(function () {
    var myColumnDefs = [];
    $('input[type=checkbox]').each(function () {
        if (this.checked) {
            myColumnDefs.push({ 'Status': true, 'ID': $(this).data('id') })
        } else {
            myColumnDefs.push({ 'Status': false, 'ID': $(this).data('id') })
        }
    });
   var data1 = { 'listObject': myColumnDefs};
   var data = JSON.stringify(data1)
   $.ajax({
   type: 'post',
   url: '/Controller/action',
   data:data ,
   contentType: 'application/json; charset=utf-8',
   success: function (response) {
    //do your actions
   },
   error: function (response) {
    alert("error occured");
   }
   });

Answer 3

C'est ainsi que cela fonctionne bien pour moi :

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: '/Controller/action',
    data: { "things": things },
    success: function () {
        $('#result').html('"PassThings()" successfully called.');
    },
    error: function (response) {
        $('#result').html(response);
    }
});

Avec "ContentType" en "C" majuscule.

Answer 4

Je peux confirmer que sur asp.net core 2.1, la suppression du type de contenu a fait fonctionner mon appel ajax.

function PostData() {
    var answer = [];

    for (let i = 0; i < @questionCount; i++) {
        answer[i] = $(`#FeedbackAnswer${i}`).dxForm("instance").option("formData");
    }

    var answerList = { answers: answer }

    $.ajax({
        type: "POST",
        url: "/FeedbackUserAnswer/SubmitForm",
        data: answerList ,
        dataType: 'json',
        error: function (xhr, status, error) { },
        success: function (response) { }
    });
}

[HttpPost]
public IActionResult SubmitForm(List<Feedback_Question> answers)
{}

Answer 5

Envelopper votre liste d'objets avec un autre objet contenant une propriété qui correspond au nom du paramètre attendu par le contrôleur MVC fonctionne. L'élément important est l'enveloppe autour de la liste d'objets.

$(document).ready(function () {
    var employeeList = [
        { id: 1, name: 'Bob' },
        { id: 2, name: 'John' },
        { id: 3, name: 'Tom' }
    ];      

    var Employees = {
      EmployeeList: employeeList
    }

    $.ajax({
        dataType: 'json',
        type: 'POST',
        url: '/Employees/Process',
        data: Employees,
        success: function () {          
            $('#InfoPanel').html('It worked!');
        },
        failure: function (response) {          
            $('#InfoPanel').html(response);
        }
    }); 
});

public void Process(List<Employee> EmployeeList)
{
    var emps = EmployeeList;
}

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
}