Mvc4 y jquerymobile

En este post vamos a hablar sobre la integración de asp.net mvc v4 con jquery.mobile. Para quienes necesiten una breve introducción a jquery.mobile pueden leer el post sobre jquery.mobile

Cuando desarrollamos una aplicación que se tiene que ver tanto en un browser de PC como en un dispositivo móvil, la primera pregunta que debemos hacernos es: "¿es la misma aplicación o estamos hablando de dos aplicaciones diferentes?", y no me refiero a nivel técnico, sino a nivel funcional, muchas veces es diferente el uso que se le da a una aplicación desde un dispositivo móvil y desde una PC, en este post vamos a desarrollar la opción de que es la misma aplicación.

Vistas

Como sería de esperar, es en las vistas donde deberíamos tener las mayores diferencias para dispositivos móbiles y de escritorio.

Una facilidad que nos da mvc4 es la de "sobreescribir" páginas para ser utilizadas desde dispositivos móviles simplemente creando una página con el mismo nombre y sufijo .mobile, por ejemplo: Index.cshtml e Index.mobile.cshtml, la primera página se va a utilizar cuando accedamos desde una PC mientras que la segunda se utilizará cuando se acceda desde un dispositivo móvil. Lo mismo aplica tanto para partial views como para layouts.

Hay 3 casos de vistas (que a su vez aplican sobre view, partial view y layouts)
  1. Vistas que son totalmente agnósticas del dispositivo con que se accede. Es el caso de About.cshtml.
  2. Vistas muy diferentes en cuanto a estructura, por lo que amerita tener dos archivos diferentes. Es el caso de Films.cshtml y Films.mobile.cshtml.
  3. Vistas híbridas, donde las diferencias no causan problemas ya sea porque utilizan atributos que son ignorados por la otra modalidad y/o determinados class que, en el peor de los casos, no los encontrará. Es el caso de Disponibility.cshtml que solo agrega los atributos data-role y data-min que jquery.mobile interpretará.
Para este ejemplo las únicas vistas que son totalmente diferentes son: Layout, Film y DateTime. En el resto no hay diferencia estructural que lo ameriten.

Controllers

Los controllers son los mismos ya sea que se navegue de un dispositivo móvil o desde un desktop, quizás lo único interesante para mencionar en este post es el que nos permite cambiar intencionalmente entre vistas (mobile vs desktop):

Un caso particular se da cuando queremos redireccionar a otra acción con RedirectToAction, si bien la redirección parece funcionar a primera vista, cuando queremos accionar sobre la nueva página esta tiene como url la anterior provocando así un extraño comportamiento. La solución a esto es indicar manualmente el atributo data-url del div de la página. En el ejemplo que les comparto hubo un solo caso y está puesto directamente en el controller:

mientras que en _Layout.mobile.cshtml está:

Reconociendo dispositivos

Por default, la versión beta con la que estoy trabajando de mvc4, no reconoce muchos dispositivos mobile, como es el caso de mi Android, por este motivo es que hay que agregarlo.

Y en Global.asax.cs, debemos agregar al Application_Start la siguiente línea:


Algunas consideraciones

asp.net mvc4 y jquery.mobile son dos framework independientes y tienen algunas "fricciones", por ejemplo:
  • jquery.mobile maneja por default un esquema de navegación con request ajax y agregando nuevas páginas como div en función de los response obtenidos. Este funcionamiento tiene algunos roses con el RedirecToAction por ejemplo, la solución a este caso debe ir por el data-url y no por desactivar ajax ($.mobile.ajaxEnabled = false;).
  • Existen casos particulares donde no queremos utilizar la navegación default de jquery.mobile que utiliza ajax como explicábamos en el punto anterior, en estos casos tenemos dos alternativas rel="external" y data-ajax="false". Documentación sobre Navegación en jquery.mobile
  • Al utilizar jquery.mobile tenemos que considerar que tiene una estructura de eventos complementaria a jquery por el tema ya mencionado de la navegación. Por ejemplo debemos utilizar los eventos pageCreate o pageInit en lugar de ready. Documentación sobre Eventos en jquery.mobile

Ejemplo completo

Luego de descargar el ejemplo desde aquí y abrir la solución, es necesario ejecutar los siguiente comandos desde Packages Manager Console:

Los mismos son para instalar todas las librerías desde NuGet (asp.net mvc4, nunit, etc) utilizadas en el ejemplo la primera vez que compiles.

Otra opción es hacer clic derecho sobre la solución y tildar la opción "Enabled NuGet Package Restore" como dice el siguiente artículo: Using NuGet without committing packages to source control.

No hay comentarios.:

Publicar un comentario