Serialización y deserialización Json en MVC 3

ASP.NET MVCHace unos días hablaba de ObjectInfo y ServerInfo, dos helpers presentes en System.Web.Helpers, un componente compartido por ASP.NET MVC 3 y WebPages. Hoy vamos a revisar la clase estática Json, también definida en dicho espacio de nombres, que podemos utilizar para codificar objetos en formato JSON (JavaScript Object Notation) y viceversa, crear instancias de objetos partiendo de un texto JSON.

El primero de los sentidos, CLR—>JSON, no es algo que no pudiéramos hacer antes utilizando los serializadores Javascript, pero este componente nos lo pone algo más fácil. Por ejemplo, dada la siguiente clase del Modelo:

Clase del Modelo
… y un controlador en el que suministramos a la vista una instancia de dicha clase:

Código del Controlador

En la Vista podríamos introducir un código como el siguiente para volcar sobre la salida la representación JSON del objeto del modelo. Observad que hasta ahora para conseguir lo mismo teníamos que escribir bastante más código:

Código de la Vista

Fijaos asimismo que el resultado de Json.Encode (bueno, y la alternativa anterior también), debemos pasarlo por una llamada a Html.Raw() para evitar que sea codificado a HTML antes de enviarlo al cliente. En cualquier caso, el resultado puede ser asignado directamente a una variable, puesto que el marcado generado es la representación JSON del objeto suministrado listo para su uso, como puede observarse en el resultado de procesar la vista anterior:

Código generado

Por otra parte, también podemos utilizar la clase Json para hacer la conversión inversa, es decir, construir un objeto del CLR desde un string que representa un objeto codificado en JSON. Como en el caso anterior, también podíamos utilizar JavascriptSerializer para conseguirlo, pero ahora podemos hacerlo más rápidamente:

Deserialización JSON a objeto

Publicado originalmente en: http://www.variablenotfound.com/2011/02/serializacion-y-deserializacion-json-en.html

¡Cinco años de Variable not found!

Variable not found cumple cinco añosTras mucho tiempo como lector y consumidor de blogs, sentía la necesidad de disponer de mi propio espacio, un sitio donde ir publicando información sobre las cosas que me interesaban y que quizás podían interesar a alguien más. Entré en Blogger y creé mi cuenta.

Bien, pues hace ya cinco años de esto. Se dice pronto, eh? 🙂

Variable not foundEl siguiente paso fue darle a este espacio un nombre. Seguro que muchos ya sabréis que la denominación Variable not found es un homenaje a los viejos tiempos del Spectrum, culpable de que muchos nos estemos dedicando hoy profesionalmente al desarrollo de software.

Para los más jóvenes diré que este mensaje de error era bastante habitual cuando programábamos con aquel Basic primitivo de los años 80 e intentábamos acceder a una variable no definida. Por cierto, aquellos de mi quinta que queráis tener un momento nostalgia, o los que simplemente tengáis curiosidad por trastear con él, podéis encontrar aquí un emulador online de esta maravilla.

Y tras todo ello, ya sólo faltaba lo más difícil: intentar crear contenidos razonablemente decentes, darlo a conocer, conseguir visitas, suscriptores, comentarios… y en ello estamos 🙂

Como en otras ocasiones, aprovecho para resumir los distintos periodos por los que hemos ido pasando desde aquél momento para, justo después, comentar este último año que acabamos de finalizar.

  • Plantilla original de Variable not foundAño 1: la travesía del desierto (mayo 2006 – mayo 2007), caracterizado principalmente por ser yo el único visitante (poco más o menos) al blog, por aquellos tiempos disponible a través de la dirección jmaguilar.blogspot.com y con la imagen de una de las plantillas de Blogger.

    La siguiente gráfica muestra los primeros meses de vida del blog, donde era extraño superar las tres visitas al día. Esos picos que se ven probablemente sería yo mismo haciendo pruebas:

    Estadísticas de acceso

    También es curioso ver los primeros veinte días sin datos estadísticos: era tan ignorante –o tenía tan pocas esperanzas de que fuera a entrar alguien- que ni siquiera se me ocurrió activar ningún sistema de seguimiento hasta 20 días después de la inauguración oficial de la bitácora 😀

  • Año 2: el despegue (mayo 2007 – mayo 2008), durante el cual se produjeron múltiples novedades, como la adquisición del dominio variablenotfound.com, la difusión de feeds a través de Feedburner, la creación del diseño actual, y la inclusión en agregadores y comunidades como Planeta Código, Planet WebDev y Geeks.ms.

    Este segundo año lo acabamos con un incremento del 2.500% en el número de visitas (la verdad, tampoco lo tenía muy difícil al partir casi de cero ;-)), debido en gran parte a algunas avalanchas procedentes de Menéame.

    Pero lo que me parecía más increíble era algo a lo que, curiosamente, no había prestado demasiada atención y que, sin embargo ahora, es uno de los parámetros que más valoro: los suscriptores a los feeds. Acabábamos el año con unos increíbles 380 suscriptores.

  • Año 3: la consolidación (mayo 2008 – mayo 2009), periodo sin grandes cambios en el que Variablenotfound.com continuó creciendo, aunque no de forma tan espectacular como lo había hecho anteriormente.

    Se incrementaron en un 75% el número de visitas procedentes de buscadores, debido a que comenzaba a notarse la antigüedad del blog, el número de referencias externas y su posicionamiento en buscadores, compensando así la práctica ausencia de “meneos” y otro tipo de avalancha.

    Según el inestable inestimable feedburner, los suscriptores a feeds superaron este año los 600, lo que suponía un aumento casi del 100% respecto al periodo anterior. Impresionante.

  • Año 4: la variable social (mayo 2009 – mayo 2010), se continuaba la estabilidad en cuanto al número de visitas, aunque seguían creciendo a un ritmo importante. Superábamos los 900 suscriptores a los feeds, y rozábamos los 100.000 usuarios únicos absolutos al año, sumando las visitas a variablenotfound.com y su eco en geeks.ms.

    La gran novedad del periodo fue la inclusión del componente social, creando una página en Facebook y comenzando a retransmitir vía Twitter. Acabábamos el año pasado con cien seguidores en el primero, y más de cincuenta en el segundo.

Año 5: La variable física

La principal novedad de este año ha sido el hecho de haber salido de la cueva, y haber podido introducir la componente física en esta ecuación.

La asistencia al TTT/Open Day me permitió ponerles cara y voz a fenómenos a los que admiraba y llevaba siguiendo desde hacía mucho tiempo, y con los que fue un auténtico placer poder compartir unas horas. Más recientemente, la gira Make Web Not War en la que he tenido el placer de participar también me ha dado la oportunidad de saludar personalmente a amigos a los que sólo conocía virtualmente, y de echar unos ratos excelentes con un grupo estupendo. Y finalmente, todo esto me ha permitido entrar en contacto con la gente de CartujaDotNet, el grupo de usuarios .NET de Sevilla, donde espero participar y colaborar de forma presencial.

Entrando ya en otro orden de asuntos, Variable not found ha continuado su trayectoria ascendente incrementando el número de usuarios de forma considerable en todos los canales abiertos:

    Estadísticas de Feedburner
  • Un 30% de incremento en el número de visitas y páginas vistas en variablenotfound.com, donde estamos ya estabilizados por encima de las 10.000 visitas/mes. Si sumamos las consultas de estos contenidos desde geeks.ms, nos ponemos ya en 15.000 visitas/mes.
  • Feedburner indica cerca de un 25% de incremento, superando los 1.100 suscriptores a los feeds del sitio.
  • Conseguimos cerca de un 300% de incremento en el número de followers en Twitter, que rondan los 230 en este momento.
  • Un 100% de incremento de seguidores en Facebook, donde superamos ya los 200 amigos.
Según entendidos en la materia, las cifras de visitas y suscriptores están bastante bien teniendo en cuenta la gran verticalidad del blog. Variable not found sigue siendo un blog de poca monta en términos generales, pero dentro de su temática y especialización está bastante bien situado, lo cual, por supuesto, tengo que agradeceros 🙂

La principal fuente de tráfico siguen siendo las búsquedas de Google; la presencia de otros buscadores (bing, yahoo, ask…) en la estadística es sólo testimonial. Eso sí, ha decrecido el porcentaje total de visitas procedentes de búsquedas en beneficio del tráfico referido de otras fuentes como geeks.ms, Facebook, los foros de MSDN, o Twitter, entre muchos otros.

En cuanto a los navegadores, Firefox sigue siendo el más usado para acceder a variablenotfound.com, aunque el uso de Chrome se ha duplicado en el último año en detrimento de IE y del propio Firefox. Este trío concentra el 95% de los usuarios.

Curiosamente, el 7% de los usuarios que usan Internet Explorer siguen con la versión 6 :-O. Pero bueno, el año pasado a estas alturas era tres veces más, así que no podemos decir que la campaña IE6 count down no esté surtiendo efecto…

Otro dato interesante es que el año pasado Windows XP era utilizado prácticamente por el 60% de los visitantes, y ahora rondamos el 45%. Windows 7 ha crecido hasta cerca del 40%.

Mi primer cheque AdsenseRespecto a los beneficios obtenidos, este año se ha producido la tan esperada llegada de mi primer cheque Adsense, que ya compartí virtualmente con vosotros 😉 Para mi gusto le faltaban algunos ceros para haber sido perfecto, pero vaya, menos da una piedra…

Afortunadamente sigo disfrutando al escribir cada post, al revisar los comentarios (pocos, pero haberlos haylos), al descubrir las referencias externas, comprobar que los posts son útiles de vez en cuando a alguien, y al ver que el número de amigos de variablenotfound.com continúa creciendo. Y desde luego, sigue sin haber mejor recompensa que ver que estáis ahí después de tanto tiempo.

¡Mil gracias a todos! Y por supuesto, espero que sigáis ayudándome a buscar la variable un año más 😉

Publicado en: Variable not found

WebGrid en modo Ajax con MVC 3

En posts anteriores hemos hablado sobre el helper WebGrid (aquí y aquí), y las facilidades que nos ofrece a la hora de crear rejillas de datos con paginación y ordenación. En todos los ejemplos que vimos, cada cambio de página o de criterio de ordenación forzaba una recarga completa de la vista, lo cual es bastante correcto y válido en la mayoría de escenarios.

Sin embargo, WebGrid también ofrece la posibilidad de recargar (al menos visualmente, como veremos después) únicamente la rejilla de datos, por lo que se consigue un comportamiento muy al estilo Ajax, como el que podemos conseguir con otras soluciones. Y de nuevo de forma realmente sencilla, en dos simples pasos.

En primer lugar, en la instanciación del objeto WebGrid, debemos suministrar un valor al parámetro ajaxUpdateContainerId, indicando el identificador del elemento en cuyo interior generaremos la rejilla de datos, por ejemplo así:

    WebGrid grid = new WebGrid(
        ..., // Otros parámetros del constructor
        ajaxUpdateContainerId: "contenedor-grid"
);

Y finalmente, ya dentro del marcado de la vista, debemos asegurar que la llamada a GetHtml() del helper se realice dentro de un contenedor con el identificador especificado anteriormente:

<div id=»contenedor-grid»>
@grid.GetHtml(
  fillEmptyRows: true,
  alternatingRowStyle: «fila-alternativa»,
  headerStyle: «encabezado-grid»,
  footerStyle: «pie-grid»,
  mode: WebGridPagerModes.All,
  …
})
</div
>

Y eso es todo. Sin necesidad de modificar el Controlador, ni por supuesto el Modelo, las operaciones de desplazamiento entre páginas, cambio de columna o sentido de ordenación, no recargarán la página completa, sino únicamente el contenedor indicado.

Parece magia, eh? 😉

Tras bambalinas

Pues no, no hay nada mágico, lo que está ocurriendo por detrás es bastante simple: al activarse el modo Ajax, simplemente por el hecho de asignar un valor a ajaxUpdateContainerId, WebGrid modificará la forma de generar los enlaces del paginador y las columnas ordenables, de forma que no guiarán al navegador hacia la acción de refresco, sino ejecutarán un script.

En este script se utiliza el método load() de jQuery para solicitar de forma asíncrona la página completa, invocando la misma acción actual, y suministrándole los parámetros que necesita, o sea, la página actual, orden o sentido de ordenación, dependiendo de la operación realizada.

Del resultado de esta petición Ajax (la página completa de nuevo), jQuery seleccionará sólo el fragmento cuyo identificador coincida con el indicado por ajaxUpdateContainerId, y sustituirá el contenido del elemento con ese mismo identificador en la vista actual.

De esa forma, se habrá actualizado el grid sin necesidad de recargar visualmente la página completa, aunque internamente sí se habrá generado y enviado al cliente completa. La verdad, esta forma de conseguir el efecto Ajax, un poco a lo bestia, recuerda un poco al celebérrimo UpdatePanel :-O.

Y ya puestos a criticar (constructivamente siempre, claro ;-)), seguro que podría haberse conseguido una implementación no intrusiva, de forma que un usuario con los scripts desactivados obtuviese el funcionamiento “por defecto” del Grid, con recarga total de la página.

Pero bueno, al menos es interesante saber que WebGrid cuenta con la posibilidad de ajaxificarse, y conocer el funcionamiento de esta característica, por si en alguna ocasión nos encontramos con ella.

Dejo en SkyDrive un proyecto de demostración de WebGrid en modo Ajax (VS2010+MVC3+SQLExpress), así como los ejemplos de los post anteriores sobre el mismo tema, por si os interesa verlo en funcionamiento.

Publicado en: Variable not found.