Passer une liste d’objects dans une méthode de contrôleur MVC à l’aide de jQuery Ajax

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

 $(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.ssortingngify(things) }); });  public class ThingController : Controller { public void PassThing(Thing[] things) { // do stuff with things here... } public class Thing { public int id { get; set; } public ssortingng color { get; set; } } } 

En utilisant la suggestion de NickW, j’ai été capable de faire fonctionner ceci avec things = JSON.ssortingngify({ '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.ssortingngify({ '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 things) { var t = things; } public class Thing { public int Id { get; set; } public ssortingng Color { get; set; } } 

Il y a deux choses que j’ai apsockets de ceci:

  1. Les parameters contentType et dataType sont absolument nécessaires dans la fonction ajax (). Cela ne marchera pas s’ils manquent. Je l’ai découvert après beaucoup d’essais et d’erreurs.

  2. Pour transmettre un tableau d’objects à une méthode de contrôleur MVC, utilisez simplement le format JSON.ssortingngify ({‘things’: things}).

J’espère que ça aidera quelqu’un d’autre!

Tu ne peux 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 marque ton action avec

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

Formater vos données peut être le problème. Essayez l’un des deux:

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

Ou (à partir de Comment puis-je poster un tableau de chaîne vers ASP.NET MVC Controller sans formulaire? )

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

La seule façon de faire fonctionner ceci est de passer le JSON sous forme de chaîne, puis de le désérialiser en utilisant JavaScriptSerializer.Deserialize(ssortingng input) , ce qui est assez étrange si c’est le désérialiseur par défaut de MVC 4.

Mon modèle a des listes nestedes d’objects et le mieux que je puisse obtenir en utilisant des données JSON est la liste la plus haute pour avoir le nombre correct d’éléments, mais tous les champs des éléments étaient nuls.

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

  $.ajax({ type: 'POST', url: '/Agri/Map/SaveSelfValuation', data: { json: JSON.ssortingngify(model) }, dataType: 'text', success: function (data) { [HttpPost] public JsonResult DoSomething(ssortingng json) { var model = new JavaScriptSerializer().Deserialize(json); 

J’ai une réponse parfaite pour tout cela: j’ai essayé tellement de solutions que je ne pouvais pas enfin me gérer, veuillez trouver ci-dessous une réponse détaillée:

  $.ajax({ traditional: true, url: "/Conroller/MethodTest", type: "POST", contentType: "application/json; charset=utf-8", data:JSON.ssortingngify( [ { 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 ssortingng color { get; set; } } public JsonResult MethodTest(IEnumerable datav) { //now datav is having all your values } 

J’utilise une application Web .Net Core 2.1 et je n’ai pas pu obtenir une seule réponse ici pour travailler. J’ai soit un paramètre vide (si la méthode a été appelée du tout) ou une erreur de serveur 500. J’ai commencé à jouer avec toutes les combinaisons de réponses possibles et j’ai finalement obtenu un résultat positif.

Dans mon cas, la solution était la suivante:

Script – chaîne le tableau d’origine (sans utiliser de propriété nommée)

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

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

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

Les échecs incluent:

  • Nommer le contenu

    data: {content: nodes}, // erreur serveur 500

  • Ne pas avoir le contentType = Erreur serveur 500

Remarques

  • dataType n’est pas nécessaire, malgré ce que certaines réponses disent, car il est utilisé pour le décodage des réponses (donc pas pertinent pour les exemples de requêtes ici).
  • List fonctionne également dans la méthode du contrôleur

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

Contrôleur

  [HttpPost] public ActionResult save(List 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.ssortingngify(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"); } }); 
  var List = @Html.Raw(Json.Encode(Model)); $.ajax({ type: 'post', url: '/Controller/action', data:JSON.ssortingngify({ 'item': List}), contentType: 'application/json; charset=utf-8', success: function (response) { //do your actions }, error: function (response) { alert("error occured"); } }); 

Si vous utilisez l’API Web ASP.NET, vous devez simplement transmettre des data: JSON.ssortingngify(things) .

Et votre contrôleur devrait ressembler à ceci:

 public class PassThingsController : ApiController { public HttpResponseMessage Post(List things) { // code } } 

Modification de @veeresh i

  var data=[ { id: 1, color: 'yellow' }, { id: 2, color: 'blue' }, { id: 3, color: 'red' } ]; //parameter var para={}; para.datav=data; //datav from View $.ajax({ traditional: true, url: "/Conroller/MethodTest", type: "POST", contentType: "application/json; charset=utf-8", data:para, success: function (data) { $scope.DisplayError(data.requestStatus); } }); In MVC public class Thing { public int id { get; set; } public ssortingng color { get; set; } } public JsonResult MethodTest(IEnumerable datav) { //now datav is having all your values } 

Enveloppez votre liste d’objects avec un autre object contenant une propriété correspondant au nom du paramètre attendu par le contrôleur MVC. Le bit important étant le wrapper autour de la liste d’objects.

 $(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 EmployeeList) { var emps = EmployeeList; } public class Employee { public int Id { get; set; } public ssortingng Name { get; set; } }