Vinculando AJAX + ASP.NET MVC + jQuery

La forma fácil de bindear datos entre jQuery y ASP.NET MVC. DataBinders

Una de las ventajas de ASP.NET MVC es la capacidad de los DataBinders, que no son más que piezas de código que permiten relacionar la información que llega a una acción de un controlador con los parámetros del controlador, esto es, si desde una página llega un campo por POST con cierto nombre, etc cómo se convierte en un parámetro de la acción del controlador, a través de un DataBinder. Si bien podemos crear nuestros propios DataBinders de manera sencilla, con lo que viene por defecto con ASP.NET MVC resuelve la mayoría de los problemas, tanto es así que esta pequeña pieza de códiigo va a intentar vincular los datos con los parámetros de una acción haciendo su mejor esfuerzo desligandonos de tal problema.

Usando Objetos en los parámetros de las acciones

La gracia de usar objetos como parámetros de las acciones es mucha, es decir, si la acción recibe los datos de un formulario de alta de un usuario por qué no crear un tipo de datos RegisterForm usarlo como parámetro y ver cómo hacemos para que nuestras páginas puedan "bindear" sus datos al parámetro. No, en principio no hay que escribir un DataBinder, porque podemos aprovechar la intereporabilidad entre jQuery y ASP.NET MVC y no hacer absolutamente nada raro para que esto ocurra.

Cómo hacer el binding automático si usamos AJAX con jQuery?

Esta es la parte divertida del asunto, imaginemos que tenemos un formulario con un panel para que usuario ingrese al sistema, pero es una aplicación bien "ajaxificada" y el formulario envía los datos asincrónicamente y la respuesta llega del mismo modo, todo sin cambiar de página,

    <div style="width: 180px">
    <form id="formulario">
    <fieldset>
    <input type="text" id="NOMBRE" name="NOMBRE" />
    <input type="text" id="APELLIDO" name="APELLIDO"/>
    <input type="text" name="EDAD" id="EDAD" />
    <input type="text" id="EMAIL" name="EMAIL" /><br /> 
    <input type="checkbox" id="TERMINOS" name="TERMINOS" /><span>Aceptar términos</span>  <br /> 
    <input type="button" id="enviar" value="Enviar" />
    </fieldset>
    </form>
    </div>

Bien, este el es formulario, como vemos hay varios campos, entonces definamos una clase simplemente para mapear las propiedades de éste

public class RegisterForm
{
    public string Nombre { get; set; }
    public string Apellido { get; set; }
    public int Edad { get; set; }
    public string Email { get; set; }
    public string Terminos { get; set; }

}

Perfecto, ahora hacemos una acción en nuestro controller para que tome los datos del formulario

public ActionResult BindingTest(RegisterForm registerForm)
{
    return Json(registerForm);
}

Esta acción siemplemente toma los datos y los devuelve en JSON como para verlos en el cliente nomás, a modo de prueba, la idea es por supuesto hacer algo con ellos, entonces, cómo hacemos para invocar con AJAX la acción y de paso que todos los datos del formulario se "bindeen" o vinculen con el parámetro, así:

<script language="javascript" type="text/javascript">
    $(function() {
        $("#enviar").click(sendData);
    });
    
    function sendData() {
        $.get("/home/BindingTest/", $("#formulario").serialize(), function(data) {
            alert(data);
        });        
    }
</script>

Estoy usando jQuery, y como verán es un simple get con AJAX, el truco está en la función serialize(), que seriliza el formulario, o sea, transforma el objeto y su estado de modo que se pueda transportar o guardar, en este caso como un querystring que es perfectamente comprensible por ASP.NET MVC y sobre todo por el ModelBinder por defecto, como resultado vemos lo que funciona de pelos, porque imprimimos la respuesta de la acción en un alert y comprobamos que el objeto se cargó y luego fue devuelto por la accion en formato JSON, mágico

Hasta la próxima.