Envíar un JSON bien formado asincrónicamente al servidor sin morir en el intento (ASP.NET MVC + AJAX + JSON)

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! :-)