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.

Anuncios