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 – Attribute routing II

En el post anterior prometí ampliar un poco más el tema del routing por atributos. En este caso vamos a hablar de parámetros opcionales, valores por default, prefijos y rutas por default.

Parámetros opcionales y Valores por default

Definir que un parámetro es opcional es tan simple como poner el signo de interrogación “?” al final del nombre del mismo. En el siguiente ejemplo estamos diciendo que el parámetro value es opcional:

Parámetro Opcional

Parámetro Opcional

Para definir el valor por default de un parámetro simplemente agregamos al final del nombre el signo “=” y a continuación el valor. En el siguiente ejemplo el parámetro value tiene como valor por defecto el texto “Valor por default”:

Valor por default

Valor por default

Podemos probar lo anterior utilizando las siguientes URIs:

Prefijos

Algo que podemos definir para un conjunto de rutas es un prefijo. Por ejemplo, si todas las rutas del controlador ProductsController van a comenzar con el prefijo “productos”, podemos especificar – a nivel controlador – el mismo valor utilizando el atributo [RoutePrefix] :

Prefijos

Prefijos

Con esto evitamos tener que agregar el prefijo “producto” en cada atributo de acción. En caso de que queramos omitir el prefijo en algún método de acción, simplemente debemos agregar el tilde “~” en la definición de la ruta, un ejemplo seria el siguiente: “~/principal”.

Rutas por default

Otra cosa que podemos hacer es definir una ruta por default. Para esto debemos aplicar el atributo [Route] en el controlador y especificarle la acción que deseamos por default utilizando para ello el parámetro action. En el ejemplo estamos diciendo que la ruta por default es la acción Default – chan! -:

Default Route

Default Route

Importante! La acción que definamos por default no debe tener el atributo [Route] (caso contrario este atributo sobre-escribe el del controlador pisando esta regla).

Espero que les sea de utilidad!

En el próximo post vamos a ver algunas características por demás interesantes como restricciones y áreas.

ASP.NET MVC 5 – Attribute routing

Hasta ahora el mecanismo de enrutamiento de ASP.NET MVC  establecía que una URI coincidía con una acción – dicho mecanismo es conocido como enrutamiento basado en convención-. Una de las novedades de ASP.NET MVC 5 es un nuevo mecanismo de routing basado en atributos – Attribute Routing – el cual utiliza atributos para definir el ruteo, y nos permite tener mucho mas control sobre las URI de nuestra web.

Importante! En ASP.NET MVC 5 ambos mecanismos de routing son soportados y es posible combinar el uso de ambas técnicas dentro del mismo proyecto.

Veamos un ejemplo para ver toda la potencia del routing basado en atributos. Imaginemos que tenemos una página web de venta de productos y queremos el detalle de un producto tenga una URL similar a la siguiente:

http://localhost:8080/productos/1/Televisor 100 pulgadas

Y que se rutee a la siguiente acción:

ProductsController.Detail(int productId);

Como pueden ver en este caso hay varias cuestiones que “complican” el ruteo basado en convenciones. En primer lugar estoy usando en la URI el nombre productos para hacer referencia al controlador Products (esto suponiendo que mi sitio esta orientado al publico latinoamericano). Por otro lado en ningún momento hacemos referencia al nombre de la acciónDetail -. Y por último el titulo del producto es algo meramente descriptivo y mi acción no va hacer nada con él – al menos en este caso -.

Si bien esto no es imposible de hacerlo utilizando convention-based routing, si es cierto que se puede tornar molesto cuando debemos hacerlo repetidas veces:

Definición utilizando convention-based routing

Definición utilizando convention-based routing

Ahora trabajemos utilizando atributos! Lo primero que debemos hacer para habilitar esta feature es invocar a la función MapMvcAttributeRoutes en el proceso de registración del routing:

Habilitando Attribute Routing

Habilitando Attribute Routing

Lo que queda ahora es simplemente definir el routing por medio del atributo [Route]:

Definiendo el ruteo por medio de atributos

Definiendo el ruteo por medio de atributos

Simple, no?

Pero eso no es todo, también es posible definir prefijos, rutas por default, restricciones y áreas (temas que veremos es los siguientes posts).

Espero que les sea de utilidad!

ASP-NET MVC 5 – Filter Overrides

Como muchos ya sabrán, hasta la salida de ASP.NET MVC 5, no había forma de anular los filtros de acción en un controlador o acción en particular (cuestión que se hace más evidente cuando trabajamos con filtros globales). Por lo tanto cuando tenemos que hacer este tipo de excepciones no queda otra alternativa que quitar el filtro de la acción y/o controlador a omitir e ir aplicando los filtros en el resto de las acciones y/o controladores de manera individual.

Una de las nuevas features que trae ASP.NET MVC 5 es la de Filter Overrides. Esta característica nos permite anular filtros que se aplican sobre un método de acción o controlador. Estos filtros se denominan  “filtros de anulación” y a continuación veremos como implementarlos.

Importante! Respecto de está característica se ha encontrado un error en MVC5, se registro en MVC5 RC y se ha aplicado el fix en la version MVC 5.1. Veremos como aplicarlo de la manera “oficial” y una forma alternativa para quienes sigan usando MVC5.

Veamos un ejemplo. Supongamos que tenemos un filtro de autorización – Authorize filter – que aplica de forma global a un controlador y queremos anularlo en una acción en particular (en este ejemplo la acción sería About). Hasta la salida de esta nueva versión, la solución no era tan directa, pero con MVC5 podemos realizar esta tarea de una manera muy sencilla:

Implementando el atributo OverrideAuthorization

Implementando el atributo OverrideAuthorization

Si observan el código por un lado podrán ver que hemos decorado del AdminController con el atributo de autorización el cual aplica a todos los métodos de acción del mismo. Para anular este comportamiento simplemente debemos decorar la/s acciones con el atributo [OverrideAuthorization]. Además de anular este filtro podemos agregar nuevos (en el ejemplo autorizaríamos al usuario “Sebis” a esta vista).

Simple, no?

Actualmente el framework nos proporciona 5 tipos de filtros de anulación:

  • OverrideActionFilters
  • OverrideAuthentication
  • OverrideAuthorization
  • OverrideExceptionFilters
  • OverrideResultFilters

Ojo con el Bug!

Como dijimos antes, hay un bug con esta feature que está solucionado con la versión MVC 5.1 RC. Si ya tenemos nuestro proyecto MVC 5 en marcha, podemos aplicar la siguiente solución.

La cosa es simple, vamos a tener que crear un nuevo filtro de anulación – en este caso lo llamaremos OverrideAuthorizeAttribute – que herede del atributo que deseamos anular – en este caso AuthorizeAttribute – e implemente la interfaz IOverrideFilter. Por último debemos implementar la propiedad FiltersToOverride la cual determina los filtros a anular:

Creando nuestro propio filtro de anulación.

Creando nuestro propio filtro de anulación.

Hecho esto ya podemos aplicar el filtro de anulación en cuestión:

Aplicando el filtro de anulación OverrideAuthorize.

Aplicando el filtro de anulación OverrideAuthorize.

Como pueden ver esta característica es por demás interesante, así que a tenerla presente.

Más de info sobre el tema en este excelente post de Imran Baloch y este otro gran post de Hack The Web with .NET.

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!

Bienvenido ASP.NET MVC 5!

ASP.NET MVC

ASP.NET MVC

Como muchos ya sabrán hace poco Microsoft lanzo nuevas versiones de sus productos y frameworks, entre ellos Visual Studio 2013 (producto) y ASP.NET MVC 5 (framework).

ASP.NET MVC 5 no trae demasiadas novedades (como en versiones anteriores) y por el momento solo esta disponible – de forma totalmente integrada – con VS2013 (es posible utilizarlo en VS2012 instalando los binarios por medio de Nuget: Install-Package Microsoft.AspNet.Mvc).

En este post solo vamos a nombrar las nuevas features del framework, y en siguientes post vamos a ampliar sobre cada una.

Características:

  • One ASP.NET
    Es una nueva plantilla de proyectos ASP.NET que permite customizar y configurar nuestras aplicaciones MVC.
  • ASP.NET Identitity
    Los templates de proyectos ASP.NET MVC se han actualizado para usar ASP.NET Identity en cuestiones de autenticación y gestión de identidad.
  • Bootstrap in the MVC template
    Integración de Bootstrap en las vistas para proporcionar un aspecto elegante y responsivo a nuestras aplicaciones.
  • Authentication Filters
    Nuevos tipos de filtros de autenticación que se complementan al filter [Authorize]. Estos se ejecutan previamente y permiten añadir lógica para validar un usuario y asociarlo a la petición (ya sea a nivel de una acción, controlador o de forma global).
  • Filter overrides
    Permiten definir que filtros no se deben ejecutar en un método de acción o controlador. Por ejemplo podemos definir un filter de forma global y especificar que para cierto controlador o acción el mismo no se ejecute.
  • Attribute routing
    Soporte para routing basado en atributos (gracias a la contribución de Tim MacCallhttp://attributerouting.net). Esta característica nos permite definir nuestras rutas utilizando atributos sobre las propias acciones y controladores.

Si bien nos son revolucionarios los cambios de esta nueva versión de ASP.MVC, hay mucho por investigar, estudiar y conocer 🙂

Nos vemos en próximos post ampliando cada una de estas características!