ASP.NET MVC : Adaptez vos vues selon le device

On parle de plus en plus de Responsive Web Design (RWD) afin d’adapter l’affichage d’un site en fonction du périphérique de l’utilisateur. Il existe également le Web Design Adaptatif qui permet notamment de renvoyer un contenu adapté au terminal. En effet, le poids de la page a une importance lorsque l’on a un terminal avec une connectivité limitée (un téléphone par exemple). Il se peut également que les fonctionnalités d’une version mobile soient différentes d’une version classique par exemple.

ASP.NET MVC apporte avec la version 4 la possibilité d’avoir des Display Modes adaptés en fonction du périphériques. Ainsi, vous pouvez avoir plusieurs vues (1 pour la version mobile et 1 pour la version normale par exemple) sans modifier toute votre application.

Par défaut, 2 modes sont gérés : classique et mobile. ASP.NET MVC étant très configurable et extensible, il est possible de définir ses propres modes. Le tutorial sur le site officiel sur les fonctionnalités pour le mobiles, montre comment ajouter ces modes.

WURFL / 51Degrees

Wurfl et 51Degrees sont 2 librairies qui permettent une plus grande flexibilité dans la détection des devices mobiles (en proposant une base de données permettant d’identifier les navigateurs mobiles de façon plus précise et plus sûre) et donc une gestion des définitions des modes plus précis.

Quelques liens sur l’utilisation de ces librairies avec ASP.NET MVC :

WURFL

51Degrees

/!\ Si vous utilisez T4MVC, il faut utiliser  Views.ViewNames.Index (qui renvoie le nom de la vue Index dans notre exemple) et non pas Views.Index (qui renvoi le chemin vers le fichier de la vue ex : ~/Home/Index.cshtml). En effet, le moteur renverra,  dans ce cas, tout le temps vers la vue spécifiée par le chemin et non pas la vue correspondant à votre device.

MVC3

Comme précisé précédemment, cette fonctionnalité n’a été apportée qu’avec la  version 4 de MVC. J’ai eu à mettre en place ce type de gestion avec un site en MVC 3. Il existe une extension NuGet, MobileViewEngine, qui permet le support basique de cette fonctionnalité (L’article de présentation du package sur le blog de l’auteur Scott Hanselman, membre de la Web Platform Team chez Microsoft). En effet, Il n’est pas possible d’ajouter des modes et la détection se fait via Browser.IsMobileDevice d’ASP.NET (dont la base de données n’est pas la plus à jour). Cette gestion n’étant pas adaptée dans mon cas, je suis donc parti du code source de ce package afin de le modifier et l’adapter à mon besoin en utilisant WURFL.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *