Quelques nouveautés MVC 4

Je suis en train de lire le livre Programming ASP.NET MVC 4 de O’Reilly. Il y a vraiment beaucoup de nouveautés vis-à-vis MVC 3 mais ce que vous savez n’est pas perdu. Vous pouvez commencer par intégrer les nouvelles capacités à votre rhytme. Cet article vise à énumérer certains ajouts, il ne vise par à décrire toutes les nouveautés.

Razor V2

Les développeurs de Microsoft ont mis l’engin Razor à jour. Il faut l’activer dans le Web.Config

<appSettings>
<add key= »webpages:Version » value= »2.0.0.0″ />
<add key= »webpages:Enabled » value= »true » />

Razor V2: Résolution d’URL

Il n’y a pas tant d’ajouts mais ils sont pratiques. Par exemple, vous pouvez dire bye bye à @Url.Content ou @Href

<script src=”@Url.Content(“~/Scripts/myscript.js”)”></script>

devient:

<script src=”~/Scripts/myscript.js”></script>

Cela fonctionne pour tous les attributs, pas de traitement spécial!

<html data-root=”~/”>
$(document).data(‘root’)
en JQuery

Et avec une expression complexe:

<a href=”~/MySite/@Foo/Bar/@Baz”>Something!</a>

Razor v2: Simplifier le code fréquent

Mettre un attribut ou non selon une condition

<input type=”checkbox” checked=”@isChecked”>

Si isChecked est true:

<input type=”checkbox” checked=”checked”>

Sinon:

<input type=”checkbox”>

Mettre un attribut ou non si non null

@{ string foo = null; string bar = “bar” }
<div id=”foo” class=”@foo @bar”>

devient:

<div id=”foo” class=”bar”>

car foo est null (l’espace entre foo et bar est même enlevé!)

Exceptions:

  1. Les attributs data-<nom> car ceux-ci sont utilisés avec JQuery et doivent garder la notion de null
  2. Si la variable vaut String.Empty au lieu de null

Bundles

Ils ont ajouté la capacité de donner un nom à un ensemble de fichiers Scripts ou CSS et de les inclure au HTML en utilisant le nom. Cela crée une indirection et facilite la maintenance en permettant d’ajouter ou enlever des scripts à un seul endroit.

Objectifs

  1. Simplifier l’inclusion de scripts
  2. Combiner des fichiers pour réduire le nombre de connexions au serveur Web
  3. Minifier le contenu pour réduire la taille

Terminologie

  1. Bundling : Process of combining all the different JavaScript and CSS files into one file (one for JavaScript and one for CSS).
  2. Minification : Process of shrinking the JavaScript  and CSS content (removing all of the carriage returns,empty spaces,line feeds & shortening the variables  without changing actual functionality).

Fonctionnement

  1. Il y a un nouveau fichier pour configurer les bundles sous App_Start:

image

  • Pour déclarer un bundle de scripts:bundles.Add(new ScriptBundle(« ~/bundles/jquerylib« ).Include(« ~/Scripts/jquery-ui-{version}.js », « ~/Scripts/jquery.unobtrusive* », « ~/Scripts/jquery.validate.js », « ~/Scripts/additional-methods.js »));
  • Facilitants pour utiliser la dernière version{version} ou pattern matching (*) – détails plus loin
  • Pour inclure un bundle de scripts:@Scripts.Render(« ~/bundles/jquerylib »)
  • Pour déclarer un bundle de styles:bundles.Add(new StyleBundle(« ~/Content/themes/base/css »).Include(« ~/Content/themes/base/jquery.ui.core.css »,
    « ~/Content/themes/base/jquery.ui.resizable.css »,
    « ~/Content/themes/base/jquery.ui.tabs.css »,
    « ~/Content/themes/base/jquery.ui.theme.css »));
  • Pour inclure un bundle de styles:@Styles.Render(« ~/Content/themes/base/css »)

 

Notes sur le path virtuel (nom du bundle)

  1. Il est arbitraire mais ceux par défaut sont bizarres

You can also use, new StyleBundle(« ~/css ») and new ScriptBundle(« ~/script ») provided that you also need to change your Layout/Master file to match the new key(css/script) as Scripts.Render(« ~/script ») and Styles.Render(« ~/css », « ~/Content/css »). The fact is that the name must need to match.

  • Le path virtuel ne doit pas référer à un nom d’un fichier existant

    You also need to make sure that there is no file/directory exist with this new key(css/script).
  • Il fera partie de l’URL virtuel qui retourne le contenu du bundle

 

Facilitants: {version}

~/Scripts/jquery-ui-{version}.js

  1. Sélectionne la dernière version de JQuery du projet
  2. Prend la version complète en debug et la version .min autrement<system.web>
    <compilation debug= »true » targetFramework= »4.0″ />
  3. Fonctionne uniquement sur le nom des fichiers et fonctionne via une expression régulière. Je pensais qu’il dépendant du fichier packages.config géré par NuGet, mais cet article semble dire qu’il ne s’agit que d’une expression régulière sur les fichiers du projet ASP.Net.

Facilitants: *

~/Scripts/jquery.validate*

  1. Préfixe ou suffixe de la dernière partie du path
  2. Marche avec .Include et .IncludeDirectory
  3. Case-Insensitive

Exemple du HTML en release

<link href= »/Site/Content/css?v=-ag4GKGu1OPL0-OcBskTm1_ir8lgMDmnaLJg6M00Q-A1″ rel= »stylesheet »/>

<link href= »/Site/Content/themes/base/css?v=58KZ5iata6ouERaCYSZC3XN4JTpS9kDRB9t3LBZ1Ue81″ rel= »stylesheet »/>

<script src= »/Site/bundles/modernizr?v=rGcoDow97GYrNMSwHq7xCCjlcB3UIY4_OhPRc6BBSQA1″></script>

<link href= »/Site/Content/tablesorter/syntell/css?v=Gwg660DZtJBqCmEKqEhqrVLIAnDqfWVy95qmBX5OGCk1″ rel= »stylesheet »/>

Autres fonctionnalités

  1. Les contrôleurs peuvent être dans des répertoires différents
  2. Support pour les méthodes asynchrones du .NET 4.5
  3. Authentification via Oauth et OpenID (ex. Facebook)
  4. Séparation des classes dans App_Start (BundleConfig, FilterConfig, RouteConfig, WebApiConfig)
  5. Mode d’affichage: des vues différentes seront sélectionnées selon le fureteur faisant la requête
  6. Support le Azure SDK 1.6+
  7. MVC 4 inclus Entity Framework
  8. Projet de type Web APIimage
  9. Projet de type mobile (JQuery Mobile)image
  10. Le projet vide est maintenant vide, l’ancien s’appelle Basic
  11. Les gabarits par défaut ont un nouveau look et utilisent le rendu adaptif

Références

Bundling and Minification in ASP.NET MVC 4
http://theshravan.net/blog/bundling-and-minification-in-asp-net-mvc-4/

What’s new in Razor v2
http://vibrantcode.com/blog/2012/4/10/whats-new-in-razor-v2.html

What else is new in Razor v2?
http://vibrantcode.com/blog/2012/4/13/what-else-is-new-in-razor-v2.html

{version} wildcard in MVC 4 Bundle
http://stackoverflow.com/questions/12029161/version-wildcard-in-mvc4-bundle

ASP.NET 4.5, ASP.NET MVC 4, ASP.NET Web Pages 2, and Visual Studio 2012 for web developers: Part 1
http://weblogs.asp.net/jgalloway/archive/2012/08/16/asp-net-4-5-asp-net-mvc-4-asp-net-web-pages-2-and-visual-studio-2012-web-developer-features.aspx

Une réflexion sur “Quelques nouveautés MVC 4

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s