Pasar una lista de objetos en un método de controlador MVC usando jQuery Ajax

Estoy tratando de pasar una matriz de objetos en un método de controlador MVC utilizando la función ajax () de jQuery. Cuando me meto en el método del controlador C # PassThing (), el argumento “cosas” es nulo. Lo he intentado usando un tipo de lista para el argumento, pero eso tampoco funciona. ¿Qué estoy haciendo 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.stringify(things) }); });  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; } } } 

Utilizando la sugerencia de NickW, pude hacer que esto funcionara usando things = JSON.stringify({ 'things': things }); Aquí está el código completo.

 $(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 things) { var t = things; } public class Thing { public int Id { get; set; } public string Color { get; set; } } 

Hay dos cosas que aprendí de esto:

  1. Los ajustes contentType y dataType son absolutamente necesarios en la función ajax (). No funcionará si faltan. Lo descubrí después de mucho ensayo y error.

  2. Para pasar una matriz de objetos a un método de controlador MVC, simplemente use el formato JSON.stringify ({‘cosas’: cosas}).

¡Espero que esto ayude a alguien más!

¿No podrías hacer esto?

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

… y marca tu acción con

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

Darle formato a tus datos puede ser el problema. Pruebe cualquiera de estos:

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

O ( ¿Cómo puedo publicar una matriz de cadena en el controlador MVC de ASP.NET sin un formulario? )

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

La única forma en que podría hacer que esto funcione es pasar el JSON como una cadena y luego deserializarlo usando JavaScriptSerializer.Deserialize(string input) , lo cual es bastante extraño si ese es el deserializador predeterminado para MVC 4.

Mi modelo tiene listas anidadas de objetos y lo mejor que pude obtener al usar los datos JSON es la lista más alta para tener el número correcto de elementos, pero todos los campos en los ítems eran nulos.

Este tipo de cosas no debería ser tan difícil.

  $.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(json); 

Tengo una respuesta perfecta para todo esto: probé tantas soluciones que no pude finalmente lograr, puedo encontrar la respuesta detallada a continuación:

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

Controler

 public class Thing { public int id { get; set; } public string color { get; set; } } public JsonResult MethodTest(IEnumerable datav) { //now datav is having all your values } 

Este es el código de trabajo para su consulta, puede usarlo.

Controler

  [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.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"); } }); 

Estoy usando una aplicación web .Net Core 2.1 y no pude obtener una sola respuesta aquí para trabajar. O bien obtuve un parámetro en blanco (si se llamó al método en absoluto) o un error de servidor 500. Empecé a jugar con todas las combinaciones posibles de respuestas y finalmente obtuve un resultado de trabajo.

En mi caso, la solución fue la siguiente:

Script – stringify la matriz original (sin usar una propiedad con nombre)

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

Y en el método del controlador, use [FromBody]

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

Las fallas incluyen:

  • Nombrar el contenido

    datos: {contenido: nodos}, // error del servidor 500

  • No tener contentType = Error de servidor 500

Notas

  • dataType no es necesario, a pesar de lo que dicen algunas respuestas, ya que se usa para la deencoding de respuesta (por lo que no es relevante para los ejemplos de solicitud aquí).
  • List también funciona en el método de controlador
  var List = @Html.Raw(Json.Encode(Model)); $.ajax({ type: 'post', url: '/Controller/action', data:JSON.stringify({ 'item': List}), contentType: 'application/json; charset=utf-8', success: function (response) { //do your actions }, error: function (response) { alert("error occured"); } }); 

Si está utilizando ASP.NET Web API, simplemente debe pasar data: JSON.stringify(things) .

Y tu controlador debería verse más o menos así:

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

Modificación 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 string color { get; set; } } public JsonResult MethodTest(IEnumerable datav) { //now datav is having all your values } 

Envuelve su lista de objetos con otro objeto que contiene una propiedad que coincide con el nombre del parámetro que espera el controlador MVC. El bit importante es el envoltorio alrededor de la lista de objetos.

 $(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 string Name { get; set; } }