Transformando mi código MVC2 gracias jQuery, JSON y Ajax

Por varios años, mi experiencia en desarrollo web, dentro de .NET, ha estado atiborrada de frases y términos como “postback”, “ciclo de eventos”,”viewstate”, etc, etc. Incluso algunas de mis certificaciones las obtuve con exámenes de lo que ahora se conoce como ASP.NET WebForms. Recientemente he decidido encarar un nuevo proyecto, con nuevas tecnologías, entre ellas Windows Identify Foundation (en algún momento escribiré algo acerca de esto) y ASP.NET MVC2. Esta última me ha remontado al pasado, al recordarme mi relación con PHP, pero esta también es otra historia.

La necesidad de pensar de otra manera evitando la simplicidad “engañosa” que ofrece el postback, me ha llevado a decidir “ajaxificar” toda o la mayor parte mi relación con MVC2, en este camino me he encontrado con algunos problemillas, como el siguiente:

 

  1. Necesito una forma de que un Action Controller, devuelva una lista de datos, para esto he pensado retornar un JsonResult, que será tomado por el browser.
  2. Una vez el browser reciba este conjunto de datos JSON, los procesara de alguna manera, que no es relevante mencionarla ahora, este procesamiento se lo hara vía javascript.
  3. Luego que termine este procesamiento el conjunto de datos JSON transformado, debe ser retornado a otro Action Controller, que finalmente lo recibirá, serializado y listo para ser guardado en una base de datos.

Los pasos mencionados anteriormente son una simplificación conveniente de todo lo que hace mi aplicación, pero se enfocan en los problemas que encontré al trabajar con ajax y json combinándolo con MVC2.

Los primeros dos pasos, no significaron un gran desafío, en lo absoluto:

Para retornar desde un Action Controller un resultado JSON solo se debe usar un código similar al siguiente (ninguna cosa del otro mundo):

Invocar este Action Controller, desde javascript, tampoco representa un gran desafío, al menos no con jQuery:

Obsérvese en el anterior código, lo importante que es que el segundo parámetro del método $.post, tenga el mismo nombre que el parámetro del action controller, en este caso hablamos del parámetro “packageKey”.

Hasta aquí ningún problema, este apareció cuando quise hacer efectivo el tercer paso, es decir pasar el JSON manipulado, siguiendo el ejemplo lo que está contenido en _selectedUsers, a un otro action controller. Recuerden que _selectedUsers fue retornado, por el action controller GetSelectedUsers.

Intente muchas cosas, bastantes para ser exactos, muchas recomendaciones, probé código y lo que me funciono mejor fue implementar un custom model binder como un atributo, llamado JsonBindderAttribute, el código es el siguiente:

Observe como estoy utilizando el JsonBinderAttribute, en la declaración del parámetro, que intencionalmente he llamado xx, para denotar su singularidad. Este artículo no estaria completo sin el código de este atributo que es lo que más me ha costado encontrar y probar, pues reitero parece que muy pocos estan usando esta técnica de pasar JSON a un Action Controller. Sin mas palabras aquí el código del atributo:

Parecería que lo tenemos todo, sin embargo falta lo que muchos autores se han olvidado mencionar, quizá la cereza de este articulo 🙂 y eso es….. ¿Cómo se invoca al action controller GetAvailableUsers? Algunos pueden precipitarse a responder, pero mejor les paso el código:

Aquí podemos apreciar la sutil diferencia con la invocación del Action Controller GetSelectedUsers, el parámetro xx que recibe el List<SomeDto> es serializado a un string JSON con la funcion stringify de la librería JSON2, que puede ser descargada aquí. Sin esta instrucción se recibe permanentemente la lista en null o con elementos vacíos.

Esta técnica de usar JSON entre llamadas, bien podría ser utilizada como una técnica de mantenimiento de estado, que es lo que precisamente hago yo, es decir mantengo el estado entre llamadas a los Action Controller dentro del contenedor JSON, funciona a la perfección.

Espero que esto le pueda servir a alguien, tanto como me sirvió a mí.

Un saludo!

7 comentarios en “Transformando mi código MVC2 gracias jQuery, JSON y Ajax

  1. Desde mi ignorancia me pregunto si no es erroneo la propia necesidad de mantener el estado. Es una duda. Ya uqe de aquí a el viewstate y los postback hay unos pocos pasos, no?

    Gracias por compartir tus conocimientos con los lectores.

  2. En mi caso particular necesito hacer unas operaciones sobre _selectedUsers, si estas operaciones las haria en el servidor, requeriria hacer postbacks continuos para mandar los datos, pero como ya ibtuve los datos en JSON, los proceso mediante javascript dentro del browser, sin enviar nada hacia el servidor, solo cuando estoy seguro de guardar paso los datos JSON al Action Controller. Saludos

  3. Buenas!!! 😀
    Un consejo (si me lo permites)

    En lugar de usar un Custom Model Binder para bindear los datos post en json a tu modelo, en mi opinión, es mejor crear un custom value provider, que procese los datos post en json y de esta manera el DefaultModelBinder estándard funciona.
    Según “la filosofía” de MVC2, los value providers son los encargados de procesar los datos de la request y dejarlos en un “sitio común”, mientras que los ModelBinders son los encargados de coger los datos de “este sitio común” y decidir como crear, a partir de ellos, los parámetros de las acciones de los controladores.
    MvcFutures viene con un Value Provider preparado para datos post en json, y de hecho su uso es tan recomendable (y usual) que en MVC3 dicho value provider viene ya “built-in”… 🙂

    Te dejo un enlace a un post en mi blog donde hablo, precisamente, de esto:
    http://geeks.ms/blogs/etomas/archive/2010/06/01/asp-net-mvc-custom-model-binders-vs-valueproviders-y-un-ejemplo-con-json.aspx

    Un saludo y un post excelente!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *