[ASP.NET MVC] Utiliser Facebook,Twitter et Youtube facilement avec les ASP.NET Web Pages Helpers et ASP.NET MVC 3

Nous verrons dans ce billet comment utiliser les ASP.NET Web Pages Helpers avec ASP.NET MVC 3. Je vais vous montrer ici, par une simple démonstration, la puissance de ces outils et avec quelle facilité déconcertante nous pouvons ajouter un widget Twitter ou Facebook à notre site.

Je parlais déjà au mois de juillet du premier preview d'ASP.NET MVC 3. Depuis les choses ont vite évolué, nous sommes passés par une version bêta, puis RC, pour finir par la RC 2 annoncée par Scott Guthrie il y a un mois de cela. Vous pouvez télécharger cette version sur le site de Microsoft, ou via le Web Platform Installer. Je ne vais pas revenir ici sur toutes les nouveautés apportées par la version 3. Beaucoup de choses ont été dites ces 6 derniers mois, et la référence en la matière reste le blog de Scott. Si vous vous intéressez à cette release, je vous invite déjà à consulter ses billets dans l'ordre chronologique (et oui il est très productif notre Scott !) :

• 02/07/2010 : Introducing “Razor” – a new view engine for ASP.NET
• 27/07/2010 : Introducing ASP.NET MVC 3 (Preview 1)
• 06/10/2010 : Announcing NuPack, ASP.NET MVC 3 Beta, and WebMatrix Beta 2
• 19/10/2010 : ASP.NET MVC 3: New @model keyword in Razor
• 22/10/2010 : ASP.NET MVC 3: Layouts with Razor
• 09/11/2010 : Announcing the ASP.NET MVC 3 Release Candidate
• 11/11/2010 : A few quick ASP.NET MVC 3 Installation Notes
• 12/11/2010 : ASP.NET MVC 3: Server-Side Comments with Razor
• 10/12/2010 : Announcing ASP.NET MVC 3 (Release Candidate 2)
• 15/12/2010 : ASP.NET MVC 3: Razor’s @: and <text> syntax
• 16/12/2010 : ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor
• 30/12/2010 : ASP.NET MVC 3: Layouts and Sections with Razor

Un autre blog très intéressant à consulter également est celui de Scott Hanselman, pensez aussi à jeter un oeil à son dernier billet qui explique comment intégrer ASP.NET MVC 3 à une application ASP.NET Web Forms 4 existante, pour faire une application hybride. Enfin pensez aussi à vous rendre aux TechDays 2011 et notamment à la session animée (en français bien sûr) par Rui Carvalho sur MVC 3. Je vous laisse découvrir le programme ci-dessous, pour vous inscrire c'est ici que ça se passe et c'est gratuit !

Venez nous retrouver pour cette session de présentation d'Asp.Net MVC 3. Nous ferons tout d'abord un rapide tour d'horizon du framework, des versions précédentes, et de son positionnement dans l'écosystème web microsoft, puis, nous parlerons plus particulièrement de cette version. Au programme des nouveautés, nous reviendrons sur le support amélioré des moteurs de vues et plus en particulier de Razor, du support de l'injection de dépendances à tous les niveaux, de l'amélioration des filtres d'actions, des nouveautés sur le cache et les performances et de l'amélioration de l'aide à la productivité dans Visual Studio.

Revenons maintenant au sujet de ce billet : les ASP.NET Web Pages Helpers. La nouvelle version d'ASP.NET MVC apporte de nombreux helpers comme Chart, WebGrid, WebMail, Crypto. Cependant d'autres helpers sont apparus également avec ASP.NET Web Pages et sont beaucoup plus orientés Web 2.0 et média sociaux comment le widget Twitter, Facebook, le support de Google Analytics ou encore la recherche avec Bing. Nous allons donc au travers d'une simple application ASP.NET MVC 3 mettre en oeuvre ces helpers. Vous vous rendrez compte alors qu'on vient de passer un cap :-)

Première chose à faire : installer ASP.NET MVC 3 RC2 avec le lien indiqué précédemment. Si au passage vous désirez supprimer une ancienne version et surtout éviter d'avoir des conflits, consultez ce billet. Ensuite nous allons simplement créer un nouveau projet MVC 3 comme ci-dessous :

On peut très bien partir du template Empty ou du template Internet Application. Il faut selectionner Razor comme View Engine, qui est normalement sélectionné par défaut :

Une fois le projet créé, il convient d'ajouter une référence aux Helpers. Attention, il ne s'agit pas ici du namespace System.Web.Helpers qui contient entre autre les Helpers WebGrid, WebMail, WebImage etc. Il s'agit de référencer Microsoft.Web.Helpers. Pour cela, nous allons utiliser le Package Manager inclut avec la nouvelle version de Visual Studio. C'est extrèmement pratique, pensez à consulter la documentation sur NuGet (anciennement NuPack) et aller farfouiller dans toutes les merveilles qu'y sont accessibles par ce biais.

On sélectionne enfin le bon package. Pour aller plus vite vous pouvez lancer une recherche avec le mot clé "helpers" :

Maintenant, passons au code de notre page. Nous désirons afficher ou intégrer ces différents éléments :

• Un widget twitter permettant d'afficher les derniers tweets d'un compte, avec rafraichissement automatique. Dans cet exemple j'utiliserais mon compte twitter.
• Un widget twitter permettant d'afficher les tweets correspondant à une requête
• Un contrôle pour visualiser une vidéo sur Youtube
• Un graphe avec quelques données
• Des boutons de type "Share It"
• La gestion des scripts Google Analytics

Le code est on ne peut plus simple. Notez vraiment avec quelle facilité on peut incorporer dans une page ces différents éléments :

@using  Microsoft.Web.Helpers
<table>
    <tr valign="top">
        <td>
            @Twitter.Profile("nicolasesprit")
        </td>
        <td>
            @Twitter.Search("#aspnet")
        </td>
        <td>
            @Video.Flash(path: "http://www.youtube.com/v/N-br928ihj4",
                 width: "300", height: "400",
                 play: true, loop: false, menu:  false,
                 bgColor: "blue",  quality: "high", scale: "exactfit", windowMode: "transparent")
        </td>
    </tr>
</table>
<img src="/Home/GetChartDatas" />
@LinkShare.GetHtml("Blog de Nicolas Esprit", "http://www.nicolasesprit.com")
@Analytics.GetGoogleHtml("UA-XXXXXXXX-X")

Le bout de code ci-dessus donne le résultat suivant au lancement de l'application :

Pour résumer, en plus de proposer un pattern de présentation bien pensé (on est surtout moins tenté de faire du Smart UI et donc de l'anti-pattern comme avec ASP.NET Web Forms), ASP.NET MVC 3 couplé aux ASP.NET Web Pages Helpers nous facilite grandement la vie. Et je ne me lance même pas sur le moteur Razor et sa syntaxe plus que sympathique, l'intégration de Nuget, etc...  MVC => mangez-en !