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!