ASP.NET MVC 4 – DisplayModeProvider

Los desarrolladores de aplicaciones y sitios web no solo tenemos que tener presente que la aplicación sea compatible con los distintos navegadores y sus versiones (IE, Chrome, Firefox…) sino que también se adapte a las resoluciones de los múltiples dispositivos que andan dando vueltas (PCs, notebooks, tablets, dispositivos moviles…). Para este último punto podemos trabajar con el diseño responsivo, que a grandes rasgos lo que hace es adaptar el contenido de nuestro sitio web a las distintas resoluciones (esto gracias CSS3 y las medias queries).

ASP.NET MVC 4+ nos ofrece otra alternativa para trabajar en estos escenarios ya que tiene la capacidad de poder determinar el navegador y tipo de dispositivo de quien realiza una petición y a partir de esa información utilizar vistas creadas especificamente para esos escenarios. Por lo tanto podemos crear vistas pensadas únicamente para los dispositivos móviles o armar vistas para un determinado navegador o para una combinación de ambos.

La información sobre los “modos de visualización” disponibles se encuentra dentro de la clase DisplayModeProvider y por defecto tiene dos valores: mobile y default. Las vistas que creamos para los dispositivos móviles deben estar incluidas en el mismo directorio de la vista por default y debe incluir la palabra “mobile” en el nombre. Por ejemplo, si tenemos la vista por defaultIndex.cshtml“, la vista correspondiente para la versión móvil sería “Index.mobile.cshtml“.

Ahora bien, si queremos tener vistas customizadas para un determinado navegador de un determinado tipo de dispositivo, debemos agregar un nuevo modo de visualización al DisplayModeProvider.

Veamos un ejemplo, vamos a agregar un nuevo modo de visualización para las peticiones que provengan de IE / Windows Phone:

Agregando un nuevo item al DisplayModeProvider

Agregando un nuevo item al DisplayModeProvider

Ahora, si el servidor recibe una petición del tipo “iemobile” – este valor se obtiene del userAgent – primero intentará buscar la vista “Index.iemobile.cshtml”, en caso de no encontrarla buscará la vista “Index.mobile.cshtml” – ya que se trata de un dispositivo móvil – y en caso de no existe finalmente buscará la vista por default “Index.cshtml“.

Diferentes "versiones" de las vista index.

Diferentes “versiones” de las vista index.

Para ir cerrando, comentarles que esta es una de las alternativas que nos ofrece ASP.NET MVC 4+ para adaptar nuestro sitio web a los distintos tipos de dispositivos/browsers. Sin embargo podemos lograr un comportamiento similar utilizando CSS3 y las medias querys o una combinación de ambas técnicas.

ASP.NET MVC 5 – Bootstrap en los templates de MVC

Otra de las características que trae ASP.NET MVC 5 es que las plantillas de proyectos utilizan por default Twitter Bootstrap  – actualmente en la versión 3.0.0 – como framework para nuestras interfaces de usuario.

Bootstrap, para quienes no lo conozcan, es un User Interface Framework open source desarrollado y mantenido para el equipo de desarrollo de Twitter. Este marco de trabajo nos permite construir, bajo un sistema de cuadrillas y CSS3, páginas responsivas. El diseño  web responsivo establece tener una única interfaz de usuario que se ajusta-alinea automáticamente a las distintas resoluciones de los distintos dispositivos (PCs, tablets, telefonos…). Además nos proporciona de estilos y recursos que hacen que nuestras páginas luzcan más modernas, atractivas y compatibles con las mayorías de los navegadores web.

Página creada con Boostrapt

Página creada con Boostrapt

Si prestan atención, cuando generamos un nuevo proyecto ASP.NET MVC 5 en VS2013 entre los scripts JS está incluida la librería de Bootstrap:

Librerías Boostrapt

Librerías Boostrapt

También están definidos los bundles correspondientes- archivo BundleConfig.cs – tanto para las librerías JS como para la hoja de estilo CSS:

Bundles de Boostrapt

Bundles de Boostrapt

Y por último las referencias en la vista _Layout.cshtml:

Referenciando a Boostrapt desde las vistas

Referenciando a Boostrapt desde las vistas

Otro aspecto importante es que todas las vistas generan por defecto código basado en este framework:

El código de las vistas basado en Boostrapt

El código de las vistas basado en Boostrapt

Si ejecutamos la aplicación y ajustamos el tamaño del navegador a una resolución acorde a la de un dispositivo móvil veremos como actúa el diseño responsivo (todo el contenido se ajusta en la pantalla y el menú superior es agrupado dentro de un icono que se expande al hacer click):

Diseño responsivo en acción

Diseño responsivo en acción

Para que quede claro la intención del post no es enseñarles a trabajar con Boostratp sino comentarles la adopción de este como framework UI por defualt. Si quieren conocer más pueden hacerlo desde aquí.

Antes de finalizar, es importante aclarar que la utilización de Bootstrap es solo una sugerencia (particularmente lo recomiendo), pero es posible utilizar cualquier otra librería o simplemente no utilizar ninguna.

Quienes deseen más de info sobre el tema les recomiendo este artículo de Tom Dykstra y este artículo de mi amigo Julio Avellaneda.

Espero que les sea de utilidad!