enriquesroman enriquesroman - 2 months ago 6
Ajax Question

How to pass a custom class with JSON to Controller

I have this two classes in JS:

class Puerta {
constructor(nro, tipo) {
this.nroPuerta = nro;
this.tipoPuerta = tipo;
}
}

class Controladora {
constructor(ip, segundos, puertas) {
this.ipControladora = ip;
this.apuertaSegundosControladora = segundos;
this.listaPuertas = puertas;
}
}


I have this code, that pass ‘Controladora’ correctly, but without any element of the array of ‘Puertas’ in the class ‘Controladora’.

$(document).ready(function (){
var puertas = [];
for(var i = 1;i<=3;i++){
puertas.push(new Puerta(i,"String " + i);
}
var controladora = new Controladora("192.168.1.1", 30, puertas);
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: '/Controladora/Prueba',
data: JSON.stringify({ 'Controladora': controladora }),
success: function () {
},
failure: function (response) {
}
});
});


1

And in the Controller, I get ‘Controladora’ but listaPuertas is null.

What am I doing wrong? Missing something?

EDIT

This are the classes in C#:

public class Puerta
{
public int nroPuerta{ get; set; }
public string tipoPuerta { get; set; }
}

public class Controladora
{
public string ipControladora { get; set; }
public int apuertaSegundosControladora { get; set; }
public List<Puerta> listaPuertas { get; set; }
}

Answer

Your current js code is sending the ajax data like the below structure

{
    "Controladora": {
        "ipControladora": "",
        "listaPuertas": [{  "nroPuerta":  1 },
                         {   "nroPuerta": 2 },
                         {   "nroPuerta": 3 }]
    }
}

Assuming your action method is accepting a parameter of type Controladora class

[HttpPost]
public ActionResult Prueba(Controladora model)
{
    // to do : return something,
}

For model binding to work, you should be sending something like this

To do this, you simply need to send data which matches with the structure of your Controldaora class. No need to specify the parameter name in your json payload.

{
    "ipControladora": "",
    "listaPuertas": [{      "nroPuerta": 1      },
                     {      "nroPuerta": 1      }, 
                     {      "nroPuerta": 1      }]
}

The below code should do it.

var puertas = [];
for (var i = 1; i <= 3; i++) {
    puertas.push({ nroPuerta: 1 });
}
var d = { ipControladora: "192.168.1.1",
                     apuertaSegundosControladora :30,
                     listaPuertas: puertas };


$.ajax({
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    type: 'POST',
    url: '@Url.Action("Prueba","Controladora")',
    data: JSON.stringify(d),
    success: function () {
    },
    failure: function (response) {
    }
});

I replaced the js classes with js objects. But if want to use ECMA 2015 javascript classes, use the same code from your question. It should work.

var puertas = [];
for(var i = 1;i<=3;i++){
    puertas.push(new Puerta(i,"Stringy " + i));
}
var d = new Controladora("192.168.1.1", 30, puertas);
$.ajax({
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    type: 'POST',
    url: '@Url.Action("Prueba","Controladora")',
    data: JSON.stringify(d),
    success: function () {
    },
    failure: function (response) {
    }
});