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.
