Bueno, desde que trabajo con ASP.NET MVC se me ha hecho más que recurrente postear un JSON en el servidor de manera asincrónica utilizando la función $.ajax de jQuery. El problema surge cuando se necesita realizar el binding de tu JSON con un objecto complejo creado en C# que puede tener muchos niveles de profundidad.
He visto en internet muchos artículos en donde cada vez que se necesita crear un objeto json lo hacen de esta manera:
var persona = {
nombre: 'Max',
edad: '24'
};
Lo cual es muy útil cuando tienes un objeto sencillo, pero ¿Qué pasa si necesitamos crear un JSON dinámicamente y a demás complejo de muchos niveles? las probabilidades de que el JSON quede mal formado son muy grandes y lo que tambien es muy probable es que pases mucho rato tratando de solucionar este problema.
¿La solución? ... Objetos y Clases en JavaScript :-)
Para estos casos es muy conveniente utilizar clases y objetos en javascript, bueno comencemos con un ejemplo:
Crearemos entonces algunas clases:
//Definimos nuestras clases.
function Persona(){
this.Nombre = "";
this.Apellido = "";
this.Edad = ""
this.Mascotas = new Array();
}
function Mascota(){
this.Nombre = "";
this.Tipo = "";
this.Edad = "";
}
//Creamos una persona
var persona = new Persona();
persona.Nombre = "Max";
persona.Apellido = "Becerra";
persona.Edad = "24";
//Creamos nuestra primera Mascota
var perrito = new Mascota();
perrito.Nombre = "Pillín";
perrito.Tipo = "Perro";
perrito.Edad = "6";
//Creamos nuestra segunda Mascota
var gatito = new Mascota();
gatito.Nombre = "Tommy";
gatito.Tipo = "Gato";
gatito.Edad = "2";
//Ahora procederemos a asignarle las mascotas a nuestra persona
persona.Mascotas.push(perrito);
persona.Mascotas.push(gatito);
//Bueno el objeto que hemos creado no es tan complejo pero
//al crearse dinámicamente puede adquirir muchos más niveles
//de los que les hemos dado acá.
A estas alturas debes estar preguntandote ¿Y el JSON?, bueno es aquí donde viene lo mejor, utilizaremos la función
JSON.stringify de Javascript que permite pasarle cómo parametro un objeto JavaScript y serializarlo :
var json = JSON.stringify(persona);
Entonces nuestra variable
json almacena un JSON pfectamente serializado y de esta manera nos evitamos tener errores de formato.
Ahora lo que nos falta es enviarlo al servidor asincrónicamente utilizando AJAX:
$.ajax({
type: "POST",
url: url,
data: json,
contentType: 'application/json; charset=utf-8',
success: function (datos) {
if (datos) {
alert("Funciona :-)");
}
else {
alert("No funciona :-(");
}
}
});
Es muy importante no olvidar agregar explicitamente el attributo:
contentType: 'application/json; charset=utf-8' en la función AJAX ya que si no lo haces estarás enviando un JSON al servidor pero este jamás sabrá que lo que envías es un JSON y esto es esencial para que el controller de ASP.NET MVC pueda realizar el binding adecuado entre el JSON y tu objeto complejo.
Hasta la próxima y Happy Coding! :-)
