Nouveautés d’ASP.NET MVC 4

Article
07/13/2023

Télécharger le Kit de formation Web Camps

ASP.NET MVC 4 est un framework permettant de créer des applications web évolutives basées sur des normes à l’aide de modèles de conception bien établis et de la puissance des ASP.NET et du .NET Framework. Cette nouvelle version de l’infrastructure se concentre sur le développement d’applications web mobiles plus facile.

Pour commencer, lorsque vous créez un projet ASP.NET MVC 4, il existe désormais un modèle de projet d’application mobile que vous pouvez utiliser pour créer une application autonome spécifiquement pour les appareils mobiles. En outre, ASP.NET MVC 4 s’intègre à jQuery Mobile via un package NuGet jQuery.Mobile.MVC. jQuery Mobile est une infrastructure HTML5 pour le développement d’applications web compatibles avec toutes les plateformes d’appareils mobiles populaires, notamment Windows Phone, iPhone, Android, et ainsi de suite. Toutefois, si vous avez besoin d’une spécialisation, ASP.NET MVC 4 vous permet également de servir différentes vues pour différents appareils et de fournir des optimisations spécifiques à l’appareil.

Dans ce laboratoire pratique, vous allez commencer par le modèle de projet « Application Internet » MVC 4 ASP.NET pour créer une application galerie de photos. Vous allez progressivement améliorer l’application à l’aide de jQuery Mobile et ASP.NET nouvelles fonctionnalités de MVC 4 pour la rendre compatible avec différents appareils mobiles et navigateurs web de bureau. Vous découvrirez également les nouvelles recettes de code pour la génération de code et la façon dont ASP.NET MVC 4 facilite l’écriture de méthodes d’action asynchrones en prenant en charge les types de retour Task<ActionResult> .

Remarque

Tous les exemples de code et extraits de code sont inclus dans le Kit de formation Web Camps, disponible dans les versions de Microsoft-Web/WebCampTrainingKit. Le projet spécifique à ce labo est disponible sur What’s New in Web Forms dans ASP.NET 4.5.

Objectifs

Dans ce laboratoire pratique, vous allez apprendre à :

Tirer parti des améliorations apportées aux modèles de projet MVC ASP.NET, y compris le nouveau modèle de projet d’application mobile
Utiliser l’attribut de fenêtre d’affichage HTML5 et les requêtes multimédias CSS pour améliorer l’affichage sur les appareils mobiles
Utiliser jQuery Mobile pour des améliorations progressives et pour créer une interface utilisateur web optimisée pour l’interaction tactile
Créer des vues spécifiques aux appareils mobiles
Utiliser le composant sélecteur d’affichage pour basculer entre les vues mobiles et de bureau dans l’application
Créer des contrôleurs asynchrones à l’aide de la prise en charge des tâches

Prérequis

Vous devez disposer des éléments suivants pour effectuer ce labo :

Microsoft Visual Studio Express 2012 pour le web ou supérieur (consultez l’annexe B pour obtenir des instructions sur l’installation de celui-ci).
ASP.NET MVC 4 (inclus dans l’installation de Microsoft Visual Studio 2012)
Émulateur Windows Phone (inclus dans le Kit de développement logiciel (SDK) Windows Phone 7.1.1)
Facultatif - WebMatrix 2 avec l’extension Electric Plum iPhone Simulator (uniquement pour l’exercice 3 utilisé pour parcourir l’application web avec un simulateur iPhone)

Programme d’installation

Tout au long du document lab, vous serez invité à insérer des blocs de code. Pour plus de commodité, la plupart de ce code est fourni en tant qu’extraits de code Visual Studio, que vous pouvez utiliser à partir de Visual Studio pour éviter d’avoir à l’ajouter manuellement.

Pour installer les extraits de code :

Ouvrez une fenêtre d’Explorateur Windows et accédez au dossier Source\Setup du labo.
Double-cliquez sur le fichier Setup.cmd dans ce dossier pour installer les extraits de code Visual Studio.

Si vous n’êtes pas familiarisé avec les extraits de code Visual Studio Code et que vous souhaitez apprendre à les utiliser, vous pouvez consulter l’annexe de ce document « Annexe A : Utilisation d’extraits de code ».

Exercices

Ce laboratoire pratique comprend les exercices suivants :

Nouveaux modèles de projet MVC 4 ASP.NET
Création de l’application web galerie de photos
Ajout de la prise en charge des appareils mobiles
Utilisation de contrôleurs asynchrones

Remarque

Chaque exercice est accompagné d’un dossier End contenant la solution résultante que vous devez obtenir après avoir effectué les exercices. Vous pouvez utiliser cette solution comme guide si vous avez besoin d’aide supplémentaire pour travailler dans les exercices.

Durée estimée pour terminer ce laboratoire : 60 minutes.

Exercice 1 : Nouveaux modèles de projet MVC 4 ASP.NET

Dans cet exercice, vous allez explorer les améliorations apportées aux modèles de projet MVC 4 ASP.NET. Outre le modèle d’application Internet, déjà présent dans MVC 3, cette version inclut désormais un modèle distinct pour les applications mobiles. Tout d’abord, vous allez examiner certaines fonctionnalités pertinentes de chacun des modèles. Ensuite, vous allez travailler sur le rendu de votre page correctement sur les différentes plateformes en utilisant la bonne approche.

Tâche 1 : exploration du modèle d’application Internet

Ouvrez Visual Studio.
Sélectionner le fichier | Nouveau | Commande de menu Projet . Dans la boîte de dialogue Nouveau projet , sélectionnez Visual C# | Modèle web dans l’arborescence du volet gauche, puis choisissez ASP.NET application web MVC 4. Nommez le projet PhotoGallery, sélectionnez un emplacement (ou laissez la valeur par défaut) et cliquez sur OK.

Remarque

Vous personnaliserez ultérieurement la solution PhotoGallery ASP.NET MVC 4 que vous créez maintenant.

Création d’un projet
Dans la boîte de dialogue Nouveau ASP.NET projet MVC 4, sélectionnez le modèle de projet Application Internet, puis cliquez sur OK. Vérifiez que vous avez sélectionné Razor comme moteur d’affichage.

Création d’une application Internet MVC 4 ASP.NET

Remarque

La syntaxe Razor a été introduite dans ASP.NET MVC 3. Son objectif est de réduire le nombre de caractères et de séquences de touches nécessaires dans un fichier, ce qui permet un flux de travail de codage rapide et fluide. Razor tire parti des compétences existantes en langage C# / VB (ou d’autres) et fournit une syntaxe de balisage de modèle qui permet un flux de travail de construction HTML impressionnant.
Appuyez sur F5 pour exécuter la solution et voir les modèles renouvelés. Vous pouvez consulter les fonctionnalités suivantes :

Modèles de style moderne

Les modèles ont été renouvelés, fournissant des styles plus modernes.

ASP.NET modèles restylés MVC 4

Nouvelle page Contact

Rendu adaptatif

Consultez le redimensionnement de la fenêtre du navigateur et notez comment la mise en page s’adapte dynamiquement à la nouvelle taille de fenêtre. Ces modèles utilisent la technique de rendu adaptatif pour s’afficher correctement dans les plateformes de bureau et mobiles sans aucune personnalisation.

ASP.NET modèle de projet MVC 4 dans différentes tailles de navigateur

Interface utilisateur plus riche avec JavaScript

Une autre amélioration des modèles de projet par défaut est l’utilisation de JavaScript pour fournir un Code JavaScript plus interactif. Les liens De connexion et d’inscription utilisés dans le modèle illustrent comment utiliser les validations jQuery pour valider les champs d’entrée côté client.

Validation jQuery

Remarque

Notez les deux sections de connexion, dans la première section, vous pouvez vous connecter à l’aide d’un compte inscrit à partir du site et dans la deuxième section, vous pouvez également vous connecter à l’aide d’un autre service d’authentification comme Google (désactivé par défaut).
Fermez le navigateur pour arrêter le débogueur et revenez à Visual Studio.
Ouvrez le fichier AuthConfig.cs situé sous le dossier App_Start .

Supprimez le commentaire de la dernière ligne pour inscrire le client Google pour l’authentification OAuth .

public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

Remarque

Notez que vous pouvez facilement activer l’authentification à l’aide de n’importe quel service OpenID ou OAuth comme Facebook, Twitter, Microsoft, etc.

Appuyez sur F5 pour exécuter la solution et accédez à la page de connexion.
Sélectionnez le service Google pour vous connecter.

Sélection du service de connexion
Connectez-vous à l’aide de votre compte Google.
Autoriser le site (localhost) à récupérer des informations à partir du compte Google.
Enfin, vous devrez vous inscrire sur le site pour associer le compte Google.

Associer votre compte Google

Association de votre compte Google 13. Fermez le navigateur pour arrêter le débogueur et revenez à Visual Studio. 14. Explorez maintenant la solution pour découvrir d’autres nouvelles fonctionnalités introduites par ASP.NET MVC 4 dans le modèle de projet.

Modèle de projet d’application Internet MVC 4 ASP.NET

Modèle de projet d’application Internet MVC 4 ASP.NET

Balisage HTML 5

Parcourez les affichages de modèle pour découvrir le nouveau balisage de thème.

Nouveau modèle, à l’aide du balisage Razor et HTML5 (About.cshtml).
Bibliothèques JavaScript mises à jour

Le modèle par défaut ASP.NET MVC 4 inclut désormais KnockoutJS, une infrastructure MVVM JavaScript qui vous permet de créer des applications web riches et hautement réactives à l’aide de JavaScript et HTML. Comme dans MVC3, les bibliothèques d’interface utilisateur jQuery et jQuery sont également incluses dans ASP.NET MVC 4.

Remarque

Vous pouvez obtenir plus d’informations sur la bibliothèque KnockOutJS dans ce lien : [http://learn.knockoutjs.com/](http://learn.knockoutjs.com/). En outre, vous pouvez en savoir plus sur l’interface utilisateur jQuery et jQuery dans [http://docs.jquery.com/](http://docs.jquery.com/).

Tâche 2 : exploration du modèle d’application mobile

ASP.NET MVC 4 facilite le développement de sites web pour les navigateurs mobiles et tablettes. Ce modèle a la même structure d’application que le modèle d’application Internet (notez que le code du contrôleur est pratiquement identique), mais son style a été modifié pour s’afficher correctement dans les appareils mobiles tactiles.

Sélectionner le fichier | Nouveau | Commande de menu Projet . Dans la boîte de dialogue Nouveau projet , sélectionnez Visual C# | Modèle web dans l’arborescence du volet gauche, puis choisissez l’application web MVC 4 ASP.NET. Nommez le projet PhotoGallery.Mobile, sélectionnez un emplacement (ou laissez la valeur par défaut), sélectionnez « Ajouter à la solution », puis cliquez sur OK.
Dans la boîte de dialogue Nouveau ASP.NET projet MVC 4, sélectionnez le modèle de projet Application mobile, puis cliquez sur OK. Vérifiez que vous avez sélectionné Razor comme moteur d’affichage.

Création d’une application mobile MVC 4 ASP.NET
Vous pouvez maintenant explorer la solution et découvrir certaines des nouvelles fonctionnalités introduites par le modèle de solution MVC 4 ASP.NET pour mobile :
- jQuery Mobile Library
  
  Le modèle de projet Application mobile inclut la bibliothèque jQuery Mobile, qui est une bibliothèque code source ouvert pour la compatibilité des navigateurs mobiles. jQuery Mobile applique une amélioration progressive aux navigateurs mobiles qui prennent en charge CSS et JavaScript. L’amélioration progressive permet à tous les navigateurs d’afficher le contenu de base d’une page web, tandis qu’il permet uniquement aux navigateurs les plus puissants d’afficher le contenu enrichi. Les fichiers JavaScript et CSS, inclus dans le style jQuery Mobile, aident les navigateurs mobiles à s’adapter au contenu de l’écran sans apporter de modification dans le balisage de page.
  
  bibliothèque mobile jQuery incluse dans le modèle
- Balisage HTML5 basé sur
  
  Modèle d’application mobile utilisant le balisage HTML5, (Login.cshtml et index.cshtml)
Appuyez sur F5 pour exécuter la solution.
Ouvrez l’émulateur Windows Phone 7.
Dans l’écran de démarrage du téléphone, ouvrez Internet Explorer. Consultez l’URL où l’application de bureau a démarré et accédez à cette URL à partir du téléphone (par exemple http://localhost:[PortNumber]/).
Vous pouvez maintenant entrer la page de connexion ou consulter la page à propos de celle-ci. Notez que le style du site web est basé sur la nouvelle application Metro pour mobile. Le modèle de projet MVC 4 ASP.NET est correctement affiché sur les appareils mobiles, en veillant à ce que tous les éléments de la page soient visibles et activés. Notez que les liens sur l’en-tête sont suffisamment volumineux pour être cliqués ou appuyés.

Pages de modèle de projet dans un appareil mobile
Le nouveau modèle utilise également la balise meta Viewport. La plupart des navigateurs mobiles définissent une largeur pour une fenêtre de navigateur virtuel ou une « fenêtre d’affichage », qui est supérieure à la largeur réelle de l’appareil mobile. Cela permet aux navigateurs mobiles d’afficher l’intégralité de la page web à l’intérieur de l’affichage virtuel. La balise meta Viewport permet aux développeurs web de définir la largeur, la hauteur et l’échelle de la zone de navigateur sur les appareils mobiles. Le modèle ASP.NET MVC 4 pour applications mobiles définit la fenêtre d’affichage sur la largeur de l’appareil (« width=device-width ») dans le modèle de disposition (Views\Shared_Layout.cshtml), afin que toutes les pages aient leur fenêtre d’affichage définie sur la largeur de l’écran de l’appareil. Notez que la balise meta Viewport ne modifie pas l’affichage du navigateur par défaut.
Ouvrez _Layout.cshtml, situé dans les vues | Dossier partagé et commentaire de la balise meta Viewport. Exécutez l’application, s’il n’est pas déjà ouvert, puis vérifiez les différences.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

Le site après avoir commenté la balise meta viewport

Le site après avoir commenté la balise meta de fenêtre d’affichage 10. Dans Visual Studio, appuyez sur MAJ + F5 pour arrêter le débogage de l’application. 11. Supprimez les marques de commentaire de la balise meta viewport.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

Tâche 3 - Utilisation du rendu adaptatif

Dans cette tâche, vous allez apprendre une autre méthode pour afficher correctement une page Web sur les appareils mobiles et les navigateurs web en même temps sans aucune personnalisation. Vous avez déjà utilisé la balise meta Viewport avec un objectif similaire. Vous rencontrerez maintenant une autre méthode puissante : rendu adaptatif.

Le rendu adaptatif est une technique qui utilise des requêtes multimédias CSS3 pour personnaliser le style appliqué à une page. Les requêtes multimédias définissent des conditions à l’intérieur d’une feuille de style, en regroupant les styles CSS sous une certaine condition. Uniquement lorsque la condition est vraie, le style est appliqué aux objets déclarés.

La flexibilité fournie par la technique de rendu adaptatif permet toute personnalisation pour l’affichage du site sur différents appareils. Vous pouvez définir autant de styles que vous le souhaitez sur une feuille de style unique sans écrire de code logique pour choisir le style. Par conséquent, il s’agit d’un moyen très simple d’adapter les styles de page, car il réduit la quantité de code et de logique dupliqués à des fins de rendu. En revanche, la consommation de bande passante augmente, car la taille de vos fichiers CSS peut croître marginalement.

En utilisant la technique de rendu adaptatif, votre site s’affiche correctement, quel que soit le navigateur. Toutefois, vous devez prendre en compte si la charge supplémentaire de bande passante est un problème.

Remarque

Le format de base d’une requête multimédia est : @media [Scope : all | portable | print | projection | screen] ([property :value] et ... [property :value])

Exemples de requêtes multimédias : >@media tout et (largeur maximale : 1000px) et (largeur minimale : 700px) {}: Pour toutes les résolutions comprises entre 700 px et 1000 px.

@media écran et (min-width : 400px) et (max-width : 700px) { ... } : Uniquement pour les écrans. La résolution doit être comprise entre 400 et 700 px.

@media portable et (largeur minimale : 20em), écran et (largeur minimale : 20em) { ... } : pour les appareils portables (mobiles et appareils) et les écrans. La largeur minimale doit être supérieure à 20em.

Vous trouverez plus d’informations sur ce sujet sur le site W3C.

Vous allez maintenant explorer le fonctionnement du rendu adaptatif, ce qui améliore la lisibilité du modèle de site web par défaut MVC 4 ASP.NET.

Ouvrez la solution PhotoGallery.sln que vous avez créée à la tâche 1 et sélectionnez le projet PhotoGallery . Appuyez sur F5 pour exécuter la solution.
Redimensionnez la largeur du navigateur, en définissant les fenêtres sur moitié ou sur moins d’un quart de sa taille d’origine. Notez ce qui se passe avec les éléments de l’en-tête : certains éléments n’apparaissent pas dans la zone visible de l’en-tête.
Ouvrez Site.css fichier à partir de l’Explorateur de solutions Visual Studio, situé dans le dossier projet de contenu . Appuyez sur Ctrl +F pour ouvrir la recherche intégrée Visual Studio, puis écrivez @media pour localiser la requête multimédia CSS.

La condition de requête multimédia définie dans ce modèle fonctionne de cette façon : lorsque la taille de la fenêtre du navigateur est inférieure à 850 px, les règles CSS appliquées sont celles définies à l’intérieur de ce bloc multimédia.

Localisation de la requête multimédia
Remplacez la valeur d’attribut de largeur maximale définie en 850 px par 10 px, afin de désactiver le rendu adaptatif, puis appuyez sur Ctrl + S pour enregistrer les modifications. Revenez au navigateur et appuyez sur Ctrl + F5 pour actualiser la page avec les modifications que vous avez apportées. Notez les différences dans les deux pages lors de l’ajustement de la largeur de la fenêtre.

@media style à gauche et à droite, le style est omis » title="In the left, the page is application the @media style, in the right, the style is o omis » />

Dans la gauche, la page applique le @media style, à droite, le style est omis

À présent, examinons ce qui se passe sur les appareils mobiles :

@media style, à droite, le style est omis " title="In the left, the page is application the @media style, in the right, the style is o omis » />

Dans la gauche, la page applique le @media style, à droite, le style est omis

Même si vous remarquerez que les modifications apportées à la page sont rendues dans un navigateur Web ne sont pas très significatives, lorsque vous utilisez un appareil mobile, les différences deviennent plus évidentes. Sur le côté gauche de l’image, nous pouvons voir que le style personnalisé a amélioré la lisibilité.

Le rendu adaptatif peut être utilisé dans de nombreux scénarios supplémentaires, ce qui facilite l’application d’un style conditionnel à un site Web et la résolution de problèmes de style courants avec une approche soignée.

Les métadonnées Viewport et les requêtes de média CSS ne sont pas spécifiques à ASP.NET MVC 4. Vous pouvez donc tirer parti de ces fonctionnalités dans n’importe quelle application web.
Dans Visual Studio, appuyez sur MAJ + F5 pour arrêter le débogage de l’application.

Exercice 2 : Création de l’application web galerie de photos

Dans cet exercice, vous allez travailler sur une application Galerie de photos pour afficher des photos. Vous allez commencer par le modèle de projet MVC 4 ASP.NET, puis ajouter une fonctionnalité pour récupérer des photos à partir d’un service et les afficher dans la page d’accueil.

Dans l’exercice suivant, vous allez mettre à jour cette solution pour améliorer la façon dont elle est affichée sur les appareils mobiles.

Tâche 1 - Création d’un service de photo fictif

Dans cette tâche, vous allez créer une simulation du service photo pour récupérer le contenu qui sera affiché dans la galerie. Pour ce faire, vous allez ajouter un nouveau contrôleur qui retourne simplement un fichier JSON avec les données de chaque photo.

Ouvrez Visual Studio s’il n’est pas déjà ouvert.
Sélectionner le fichier | Nouveau | Commande de menu Projet . Dans la boîte de dialogue Nouveau projet , sélectionnez Visual C# | Modèle web dans l’arborescence du volet gauche, puis choisissez ASP.NET application web MVC 4. Nommez le projet PhotoGallery, sélectionnez un emplacement (ou laissez la valeur par défaut) et cliquez sur OK. Vous pouvez également continuer à travailler à partir de votre solution ASP.NET d’application Internet MVC 4 existante à partir de l’exercice 1 et ignorer l’étape suivante.
Dans la boîte de dialogue Nouveau ASP.NET projet MVC 4, sélectionnez le modèle de projet Application Internet, puis cliquez sur OK. Vérifiez que Razor est sélectionné comme moteur d’affichage.
Dans le Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data de votre projet, puis sélectionnez Ajouter | Élément existant. Accédez au dossier Source\Assets\App_Data de ce labo et ajoutez le fichier Photos.json .
Créez un contrôleur avec le nom PhotoController. Pour ce faire, cliquez avec le bouton droit sur le dossier Contrôleurs , accédez à Ajouter et sélectionnez Contrôleur. Terminez le nom du contrôleur, laissez le modèle de contrôleur MVC vide, puis cliquez sur Ajouter.

Ajout de PhotoController
Remplacez la méthode Index par l’action Galerie suivante et retournez le contenu du fichier JSON que vous avez récemment ajouté au projet.

(Extrait de code - ASP.NET laboratoire MVC 4 - Ex02 - Action de galerie)
```
public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}
```
Appuyez sur F5 pour exécuter la solution, puis accédez à l’URL suivante pour tester le service photo fictif : http://localhost:[port]/photo/gallery (la valeur [port] dépend du port actuel où l’application a été lancée). La demande adressée à cette URL doit récupérer le contenu du fichier Photos.json .

Test du service photo fictif

Dans une implémentation réelle, vous pouvez utiliser API Web ASP.NET pour implémenter le service Galerie de photos. API Web ASP.NET est une infrastructure qui facilite le développement de services HTTP disponibles sur un large éventail de clients, tels que des navigateurs et des appareils mobiles. L'API Web ASP.NET est une plate-forme idéale pour générer des applications RESTful sur le .NET Framework.

Tâche 2 : affichage de la galerie de photos

Dans cette tâche, vous allez mettre à jour la page d’accueil pour afficher la galerie de photos à l’aide du service fictif que vous avez créé dans la première tâche de cet exercice. Vous allez ajouter des fichiers de modèle et mettre à jour les vues de la galerie.

Dans Visual Studio, appuyez sur MAJ + F5 pour arrêter le débogage de l’application.
Créez la classe Photo dans le dossier Models . Pour ce faire, cliquez avec le bouton droit sur le dossier Modèles , sélectionnez Ajouter , puis cliquez sur Classe. Ensuite, définissez le nom sur Photo.cs , puis cliquez sur Ajouter.

Ajoutez les membres suivants à la classe Photo .

(Extrait de code - ASP.NET MVC 4 Lab - Ex02 - Modèle photo)

public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

Ouvrez le fichier HomeController.cs dans le dossier Controllers.

Ajoutez les instructions using suivantes.

(Extrait de code - ASP.NET MVC 4 Lab - Ex02 - HomeController Usings)

using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;

Mettez à jour l’action Index pour utiliser HttpClient pour récupérer les données de la galerie, puis utilisez le JavaScriptSerializer pour le désérialiser sur le modèle d’affichage.

(Extrait de code - ASP.NET laboratoire MVC 4 - Ex02 - Action d’index)

public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

Ouvrez le fichier Index.cshtml situé sous le dossier Views\Home et remplacez tout le contenu par le code suivant.

Ce code effectue une boucle dans toutes les photos récupérées à partir du service et les affiche dans une liste non triée.

(Extrait de code - ASP.NET laboratoire MVC 4 - Ex02 - Liste de photos)

@model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

Dans le Explorateur de solutions, cliquez avec le bouton droit sur le dossier Contenu de votre projet, puis sélectionnez Ajouter | Élément existant. Accédez au dossier Source\Assets\Content de ce labo et ajoutez le fichier Site.css . Vous devrez confirmer son remplacement. Si le fichier Site.css est ouvert, vous devrez confirmer le rechargement du fichier également.
Ouvrez Explorateur de fichiers et copiez l’intégralité du dossier Photos situé sous le dossier Source\Assets de ce labo dans le dossier racine de votre projet dans Explorateur de solutions.
Exécutez l'application. Vous devez maintenant voir la page d’accueil affichant les photos dans la galerie.

Galerie de photos
Dans Visual Studio, appuyez sur MAJ + F5 pour arrêter le débogage de l’application.

Exercice 3 : Ajout de la prise en charge des appareils mobiles

L’une des principales mises à jour de ASP.NET MVC 4 est la prise en charge du développement mobile. Dans cet exercice, vous allez explorer ASP.NET nouvelles fonctionnalités MVC 4 pour les applications mobiles en étendant la solution PhotoGallery que vous avez créée dans l’exercice précédent.

Tâche 1 : installation de jQuery Mobile dans une application ASP.NET MVC 4

Ouvrez la solution Begin située dans le dossier Source/Ex3-MobileSupport/Begin/. Sinon, vous pouvez continuer à utiliser la solution De fin obtenue en effectuant l’exercice précédent.
1. Si vous avez ouvert la solution Begin fournie, vous devez télécharger des packages NuGet manquants avant de continuer. Pour ce faire, cliquez sur le menu Projet et sélectionnez Gérer les packages NuGet.
2. Dans la boîte de dialogue Gérer les packages NuGet, cliquez sur Restaurer pour télécharger les packages manquants.
3. Enfin, générez la solution en cliquant sur Générer | la solution.
  
  Remarque
  
  L’un des avantages de l’utilisation de NuGet est que vous n’avez pas à expédier toutes les bibliothèques dans votre projet, ce qui réduit la taille du projet. Avec NuGet Power Tools, en spécifiant les versions du package dans le fichier Packages.config, vous pourrez télécharger toutes les bibliothèques requises la première fois que vous exécutez le projet. C’est pourquoi vous devrez exécuter ces étapes après avoir ouvert une solution existante à partir de ce labo.
Ouvrez la console Gestionnaire de package en cliquant sur l’option de menu Outils>NuGet Gestionnaire de package> Gestionnaire de package Console.

Ouverture de la console NuGet Gestionnaire de package
Dans la console Gestionnaire de package exécutez la commande suivante pour installer le package jQuery.Mobile.MVC.

jQuery Mobile est une bibliothèque code source ouvert permettant de créer une interface utilisateur web optimisée pour l’interaction tactile. Le package NuGet jQuery.Mobile.MVC inclut des assistances pour utiliser jQuery Mobile avec une application ASP.NET MVC 4.

Remarque

En exécutant la commande suivante, vous allez télécharger la bibliothèque jQuery.Mobile.MVC à partir de Nuget.

PM
```
Install-Package jQuery.Mobile.MVC
```
Cette commande installe jQuery Mobile et certains fichiers d’assistance, notamment les suivants :
- Views/Shared/_Layout.Mobile.cshtml : est une disposition jQuery Mobile optimisée pour un écran plus petit. Lorsque le site web reçoit une demande d’un navigateur mobile, il remplace la disposition d’origine (_Layout.cshtml) par celle-ci.
- Composant du sélecteur d’affichage : se compose de la vue partielle Views/Shared/_ViewSwitcher.cshtml et du contrôleur de ViewSwitcherController.cs . Ce composant affiche un lien sur les navigateurs mobiles pour permettre aux utilisateurs de basculer vers la version de bureau de la page.
  
  Projet galerie de photos avec prise en charge mobile

Inscrivez les offres groupées mobiles. Pour ce faire, ouvrez le fichier Global.asax.cs et ajoutez la ligne suivante.

(Extrait de code - ASP.NET MVC 4 Lab - Ex03 - Inscrire des offres groupées mobiles)

protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

     WebApiConfig.Register(GlobalConfiguration.Configuration);
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
     RouteConfig.RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
     AuthConfig.RegisterAuth();
}

Exécutez l’application à l’aide d’un navigateur web de bureau.
Ouvrez l’émulateur Windows Phone 7, situé dans le menu Démarrer | Tous les programmes | Kit de développement logiciel (SDK) Windows Phone 7.1 | Émulateur Windows Phone.
Dans l’écran de démarrage du téléphone, ouvrez Internet Explorer. Consultez l’URL où l’application a démarré et accédez à cette URL avec le navigateur téléphonique (par exemple http://localhost:[PortNumber]/).

Vous remarquerez que votre application se présente différemment dans l’émulateur Windows Phone, car jQuery.Mobile.MVC a créé de nouvelles ressources dans votre projet qui affichent les vues optimisées pour les appareils mobiles.

Notez le message en haut du téléphone, montrant le lien qui bascule vers l’affichage Bureau. En outre, la disposition _Layout.Mobile.cshtml créée par le package que vous avez installé inclut une autre disposition dans l’application.

Remarque

Jusqu’à présent, il n’y a aucun lien pour revenir à l’affichage mobile. Elle sera incluse dans les versions ultérieures.

Vue mobile de la page d’accueil de la galerie de photos
Dans Visual Studio, appuyez sur MAJ + F5 pour arrêter le débogage de l’application.

Tâche 2 - Création d’affichages mobiles

Dans cette tâche, vous allez créer une version mobile de la vue d’index avec du contenu adapté à une meilleure apparence sur les appareils mobiles.

Copiez la vue Views\Home\Index.cshtml et collez-la pour créer une copie, renommez le nouveau fichier en Index.Mobile.cshtml.
Ouvrez la nouvelle vue Index.Mobile.cshtml créée et remplacez la balise ul> existante <par ce code. En procédant ainsi, vous allez mettre à jour la <balise ul> avec des annotations de données jQuery Mobile pour utiliser les thèmes mobiles à partir de jQuery.
```
<ul data-role="listview" data-inset="true" data-filter="true">
```
Remarque

Notez que :
- L’attribut de rôle de données défini sur listview affiche la liste à l’aide des styles listview.
- L’attribut d’ensemble de données défini sur true affiche la liste avec une bordure arrondie et une marge.
- L’attribut de filtre de données défini sur true génère une zone de recherche.
Vous pouvez en savoir plus sur les conventions jQuery Mobile dans la documentation du projet : [https://demos.jquerymobile.com/1.1.1/](https://demos.jquerymobile.com/1.1.1/)
Appuyez sur Ctrl +S pour enregistrer les modifications.
Basculez vers l’émulateur Windows Phone et actualisez le site. Notez la nouvelle apparence de la liste de la galerie, ainsi que la nouvelle zone de recherche située en haut. Ensuite, tapez un mot dans la zone de recherche (par exemple , Tulipes) pour lancer une recherche dans la galerie de photos.

Galerie à l’aide du style listview avec filtrage

Pour résumer, vous avez utilisé la recette View Mobilizer pour créer une copie de la vue Index avec le suffixe « mobile ». Ce suffixe indique à ASP.NET MVC 4 que chaque requête générée à partir d’un appareil mobile utilisera cette copie de l’index. En outre, vous avez mis à jour la version mobile de la vue Index pour utiliser jQuery Mobile pour améliorer l’apparence du site dans les appareils mobiles.
Revenez à Visual Studio et ouvrez Site.Mobile.css situé sous le dossier Contenu .

Corrigez le positionnement du titre de la photo pour qu’il s’affiche à droite de l’image. Pour ce faire, ajoutez le code suivant au fichier Site.Mobile.css .

CSS

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

Appuyez sur Ctrl +S pour enregistrer les modifications.
Revenez à l’émulateur Windows Phone et actualisez le site. Notez que le titre de la photo est correctement positionné maintenant.

Titre positionné sur le côté droit de l’image

Tâche 3 - Thèmes jQuery Mobile

Chaque disposition et widget dans jQuery Mobile est conçu autour d’une nouvelle infrastructure CSS orientée objet qui permet d’appliquer un thème complet de conception visuelle unifiée aux sites et aux applications.

Le thème par défaut de jQuery Mobile comprend 5 nuances qui sont fournies à des lettres (a, b, c, d, e) pour référence rapide.

Dans cette tâche, vous allez mettre à jour la disposition mobile pour utiliser un thème différent de celui par défaut.

Revenez à Visual Studio.
Ouvrez le fichier _Layout.Mobile.cshtml situé dans Views\Shared.
Recherchez l’élément div avec le jeu de données défini sur « page » et mettez à jour le thème de données sur « e ».
```
<div data-role="page" data-theme="e">
```
Appuyez sur Ctrl +S pour enregistrer les modifications.
Actualisez le site dans l’émulateur Windows Phone et notez le nouveau jeu de couleurs.

Disposition mobile avec un modèle de couleurs différent

Tâche 4 : utilisation du composant Sélecteur d’affichage et des fonctionnalités de substitution du navigateur

Une convention pour les pages web optimisées pour les appareils mobiles consiste à ajouter un lien dont le texte est un élément tel que l’affichage Bureau ou le mode de site complet qui permet aux utilisateurs de basculer vers une version de bureau de la page. Le package jQuery.Mobile.MVC inclut un exemple de composant switcher d’affichage à cet effet utilisé dans la vue _Layout.Mobile.cshtml .

Lien pour basculer vers l’affichage Bureau

Lien pour basculer vers l’affichage Bureau

Le sélecteur d’affichage utilise une nouvelle fonctionnalité appelée Substitution du navigateur. Cette fonctionnalité permet à votre application de traiter les demandes comme s’ils proviennent d’un autre navigateur (agent utilisateur) que celui qu’ils proviennent réellement.

Dans cette tâche, vous allez explorer l’exemple d’implémentation d’un sélecteur d’affichage ajouté par jQuery.Mobile.MVC et les nouvelles fonctionnalités de substitution de navigateur dans ASP.NET MVC 4.

Revenez à Visual Studio.
Ouvrez la vue _Layout.Mobile.cshtml située sous le dossier Views\Shared et notez que le composant du sélecteur d’affichage est référencé en tant qu’affichage partiel.

Disposition mobile à l’aide du composant View-Switcher
Ouvrez la vue partielle _ViewSwitcher.cshtml .

La vue partielle utilise la nouvelle méthode ViewContext.HttpContext.GetOverriddenBrowser() pour déterminer l’origine de la requête web et afficher le lien correspondant à basculer vers les affichages Bureau ou Mobile.

La méthode GetOverriddenBrowser retourne une instance HttpBrowserCapabilitiesBase qui correspond à l’agent utilisateur actuellement défini pour la requête (réelle ou remplacée). Vous pouvez utiliser cette valeur pour obtenir des propriétés telles que IsMobileDevice.

Vue partielle ViewSwitcher
Ouvrez la classe ViewSwitcherController.cs située dans le dossier Controllers . Découvrez que l’action SwitchView est appelée par le lien dans le composant ViewSwitcher et notez les nouvelles méthodes HttpContext.
- La méthode HttpContext.ClearOverriddenBrowser() supprime tout agent utilisateur substitué pour la requête actuelle.
- La méthode HttpContext.SetOverriddenBrowser() remplace la valeur réelle de l’agent utilisateur de la requête à l’aide de l’agent utilisateur spécifié.
  
  Contrôleur ViewSwitcher
  
  La substitution du navigateur est une fonctionnalité principale de ASP.NET MVC 4, qui est également disponible même si vous n’installez pas le package jQuery.Mobile.MVC. Toutefois, cette fonctionnalité affecte uniquement l’affichage, la disposition et la vue partielle, et n’affecte aucune des fonctionnalités qui dépendent de l’objet Request.Browser.

Tâche 5 : ajout du sélecteur d’affichage dans l’affichage Bureau

Dans cette tâche, vous allez mettre à jour la disposition du bureau pour inclure le sélecteur d’affichage. Cela permet aux utilisateurs mobiles de revenir à l’affichage mobile lors de la navigation dans l’affichage de bureau.

Actualisez le site dans l’émulateur Windows Phone.
Cliquez sur le lien Affichage Bureau en haut de la galerie. Notez qu’il n’existe aucun sélecteur d’affichage dans l’affichage de bureau pour vous permettre de revenir à l’affichage mobile.
Revenez à Visual Studio et ouvrez la vue _Layout.cshtml .
Recherchez la section de connexion et insérez un appel pour afficher la vue partielle _ViewSwitcher sous la vue partielle _LogOnPartial . Appuyez ensuite sur Ctrl + S pour enregistrer les modifications.
```
<div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>
```
Appuyez sur Ctrl +S pour enregistrer les modifications.
Actualisez la page dans l’émulateur Windows Phone et double-cliquez sur l’écran pour effectuer un zoom avant. Notez que la page d’accueil affiche désormais le lien d’affichage Mobile qui passe de l’affichage mobile à l’affichage de bureau.

Sélecteur d’affichage affiché en mode Bureau
Basculez à nouveau vers l’affichage Mobile et accédez à La page À propos (http://localhost[port]/Accueil/À propos). Notez que, même si vous n’avez pas créé d’affichage About.Mobile.cshtml, la page About s’affiche à l’aide de la disposition mobile (_Layout.Mobile.cshtml).

À propos de la page
Enfin, ouvrez le site dans un navigateur web de bureau. Notez qu’aucune des mises à jour précédentes n’a affecté la vue de bureau.

Vue de bureau PhotoGallery

Tâche 6 - Création de nouveaux modes d’affichage

La nouvelle fonctionnalité de mode d’affichage permet à une application de sélectionner des vues en fonction du navigateur qui génère la requête. Par exemple, si un navigateur de bureau demande la page d’accueil, l’application retourne le modèle Views\Home\Index.cshtml . Ensuite, si un navigateur mobile demande la page d’accueil, l’application retourne le modèle Views\Home\Index.mobile.cshtml .

Dans cette tâche, vous allez créer une disposition personnalisée pour les appareils iPhone, et vous devrez simuler des demandes à partir d’appareils iPhone. Pour ce faire, vous pouvez utiliser un émulateur/simulateur iPhone (comme Electric Mobile Simulator) ou un navigateur avec des modules complémentaires qui modifient l’agent utilisateur. Pour obtenir des instructions sur la définition de la chaîne de l’agent utilisateur dans un navigateur Safari pour émuler un iPhone, voir Comment laisser Safari prétendre qu’il s’agit d’Internet Explorer dans le blog de David Alison.

Notez que cette tâche est facultative et que vous pouvez continuer tout au long du labo sans l’exécuter.

Dans Visual Studio, appuyez sur MAJ + F5 pour arrêter le débogage de l’application.
Ouvrez Global.asax.cs et ajoutez l’instruction using suivante.
```
using System.Web.WebPages;
```

Ajoutez le code mis en surbrillance suivant dans la méthode Application_Start.

(Extrait de code - ASP.NET MVC 4 Lab - Ex03 - iPhone DisplayMode)

protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

Vous avez inscrit un nouveau DefaultDisplayMode nommé « iPhone », dans la liste statique DisplayModeProvider.Instance.Modes static, qui sera mise en correspondance avec chaque requête entrante. Si la requête entrante contient la chaîne « iPhone », ASP.NET MVC trouve les vues dont le nom contient le suffixe « iPhone ». Le paramètre 0 indique la spécificité du nouveau mode ; par exemple, cette vue est plus spécifique que la règle générale .mobile qui correspond aux demandes des appareils mobiles.

Une fois ce code exécuté, lorsqu’un navigateur iPhone génère une demande, votre application utilise la disposition Views\shared\_Layout.iPhone.cshtml que vous allez créer dans les étapes suivantes.

Remarque

Cette façon de tester la demande pour iPhone a été simplifiée à des fins de démonstration et peut ne pas fonctionner comme prévu pour chaque chaîne d’agent utilisateur iPhone (par exemple, le test respecte la casse).

Créez une copie du fichier _Layout.Mobile.cshtml dans le dossier Views\Shared et renommez la copie en « _Layout.iPhone.cshtml ».
Ouvrez _Layout.iPhone.cshtml que vous avez créé à l’étape précédente.
Recherchez l’élément div avec l’attribut data-role défini sur page et remplacez l’attribut de thème de données par « a ».

<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

Vous disposez maintenant de 3 dispositions dans votre application MVC 4 ASP.NET :

_Layout.cshtml : disposition par défaut utilisée pour les navigateurs de bureau.
_Layout.mobile.cshtml : disposition par défaut utilisée pour les appareils mobiles.
_Layout.iPhone.cshtml : disposition spécifique pour les appareils iPhone, à l’aide d’un modèle de couleurs différent pour différencier de _Layout.mobile.cshtml.
Appuyez sur F5 pour exécuter l’application et parcourir le site dans l’émulateur Windows Phone.
Ouvrez un simulateur iPhone (consultez l’annexe C pour obtenir des instructions sur l’installation et la configuration d’un simulateur iPhone) et accédez également au site. Notez que chaque téléphone utilise le modèle spécifique.

Utilisation de vues différentes pour chaque appareil mobile

Exercice 4 : Utilisation de contrôleurs asynchrones

Microsoft .NET Framework 4.5 introduit de nouvelles fonctionnalités de langage en C# et Visual Basic pour fournir une nouvelle base pour la synchronisation dans la programmation .NET. Cette nouvelle base rend la programmation asynchrone similaire à - et environ aussi simple que - la programmation synchrone. Vous pouvez désormais écrire des méthodes d’action asynchrones dans ASP.NET MVC 4 à l’aide de la classe AsyncController . Vous pouvez utiliser des méthodes d’action asynchrones pour les requêtes liées à long terme et non liées au processeur. Cela évite de bloquer le travail du serveur web pendant le traitement de la requête. La classe AsyncController est généralement utilisée pour les appels de service Web de longue durée.

Cet exercice explique les principes fondamentaux de l’opération asynchrone dans ASP.NET MVC 4. Si vous souhaitez approfondir vos connaissances, vous pouvez consulter l’article suivant : [https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx](https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx)

Tâche 1 : implémentation d’un contrôleur asynchrone

Ouvrez la solution Begin située dans le dossier Source/Ex4-Async/Begin/. Sinon, vous pouvez continuer à utiliser la solution De fin obtenue en effectuant l’exercice précédent.
1. Si vous avez ouvert la solution Begin fournie, vous devez télécharger des packages NuGet manquants avant de continuer. Pour ce faire, cliquez sur le menu Projet et sélectionnez Gérer les packages NuGet.
2. Dans la boîte de dialogue Gérer les packages NuGet, cliquez sur Restaurer pour télécharger les packages manquants.
3. Enfin, générez la solution en cliquant sur Générer | la solution.
  
  Remarque
  
  L’un des avantages de l’utilisation de NuGet est que vous n’avez pas à expédier toutes les bibliothèques dans votre projet, ce qui réduit la taille du projet. Avec NuGet Power Tools, en spécifiant les versions du package dans le fichier Packages.config, vous pourrez télécharger toutes les bibliothèques requises la première fois que vous exécutez le projet. C’est pourquoi vous devrez exécuter ces étapes après avoir ouvert une solution existante à partir de ce labo.
Ouvrez la classe HomeController.cs à partir du dossier Controllers .
Ajoutez l’instruction using suivante.
```
using System.Threading.Tasks;
```
Mettez à jour la classe HomeController pour hériter d’AsyncController. Les contrôleurs dérivés d’AsyncController permettent ASP.NET de traiter des requêtes asynchrones, et ils peuvent toujours traiter des méthodes d’action synchrones.
```
public class HomeController : AsyncController
{
```
Ajoutez le mot clé async à la méthode Index et retournez le type Task<ActionResult>.
```
public async Task<ActionResult> Index()
{
    ...
```
Remarque

Le mot clé asynchrone est l’un des nouveaux mots clés que le .NET Framework 4.5 fournit ; il indique au compilateur que cette méthode contient du code asynchrone. Un objet Task représente une opération asynchrone qui peut se terminer à un moment donné à l’avenir.
Remplacez le client. Appel GetAsync() avec la version asynchrone complète à l’aide du mot clé Await, comme indiqué ci-dessous.

(Extrait de code - ASP.NET laboratoire MVC 4 - Ex04 - GetAsync)
```
public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...
```
Remarque

Dans la version précédente, vous utilisiez la propriété Result de l’objet Task pour bloquer le thread jusqu’à ce que le résultat soit retourné (version de synchronisation).

L’ajout du mot clé await indique au compilateur d’attendre de manière asynchrone la tâche retournée à partir de l’appel de méthode. Cela signifie que le reste du code sera exécuté en tant que rappel uniquement une fois la méthode attendue terminée. Une autre chose à noter est que vous n’avez pas besoin de modifier votre bloc try-catch pour effectuer ce travail : les exceptions qui se produisent en arrière-plan ou au premier plan seront toujours interceptées sans aucun travail supplémentaire à l’aide d’un gestionnaire fourni par l’infrastructure.

Modifiez le code pour poursuivre l’implémentation asynchrone en remplaçant les lignes par le nouveau code, comme indiqué ci-dessous

(Extrait de code - ASP.NET laboratoire MVC 4 - Ex04 - ReadAsStringAsync)

public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

Exécutez l'application. Vous remarquerez qu’aucune modification majeure n’est apportée, mais votre code ne bloque pas un thread du pool de threads, ce qui améliore l’utilisation des ressources du serveur et améliore les performances.

Remarque

Vous pouvez en savoir plus sur les nouvelles fonctionnalités de programmation asynchrone dans le labo « Programmation asynchrone dans .NET 4.5 avec C# et Visual Basic » incluses dans le Kit de formation Visual Studio.

Tâche 2 : gestion des délais d’attente avec des jetons d’annulation

Les méthodes d’action asynchrone qui retournent des instances de tâche peuvent également prendre en charge les délais d’attente. Dans cette tâche, vous allez mettre à jour le code de méthode Index pour gérer un scénario de délai d’attente à l’aide d’un jeton d’annulation.

Revenez à Visual Studio et appuyez sur Maj + F5 pour arrêter le débogage.
Ajoutez l’instruction using suivante au fichier HomeController.cs .
```
using System.Threading;
```

Mettez à jour l’action Index pour recevoir un argument CancellationToken .

public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

Mettez à jour l’appel GetAsync pour passer le jeton d’annulation.

(Extrait de code - ASP.NET laboratoire MVC 4 - Ex04 - SendAsync avec CancellationToken)

public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

Décorez la méthode Index avec un attribut AsyncTimeout défini sur 500 millisecondes et un attribut HandleError configuré pour gérer TaskCanceledException en redirigeant vers une vue TimedOut.

(Extrait de code - ASP.NET laboratoire MVC 4 - Ex04 - Attributs)
```
[AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
```
Ouvrez la classe PhotoController et mettez à jour la méthode Gallery pour retarder l’exécution de 1 000 millisecondes (1 seconde) pour simuler une tâche longue.
```
public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}
```
Ouvrez le fichier Web.config et activez les erreurs personnalisées en ajoutant l’élément suivant.
```
<system.web>
  <customErrors mode="On"></customErrors>
  ...
```
Créez une vue dans Views\Shared nommé TimedOut et utilisez la disposition par défaut. Dans le Explorateur de solutions, cliquez avec le bouton droit sur le dossier Views\Shared, puis sélectionnez Ajouter | Affichage.

Utilisation de vues différentes pour chaque appareil mobile

Mettez à jour le contenu de l’affichage TimedOut , comme indiqué ci-dessous.

@{
    ViewBag.Title = "TimedOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Timed Out!</h2>

Exécutez l’application et accédez à l’URL racine. Comme vous avez ajouté un thread.Sleep de 1 000 millisecondes, vous obtiendrez une erreur de délai d’attente, générée par l’attribut AsyncTimeout et interceptée par l’attribut HandleError .

Exception de délai d’attente gérée

Remarque

En outre, vous pouvez déployer cette application sur les sites web Windows Azure suivant l’annexe D : publication d’une application ASP.NET MVC 4 à l’aide du déploiement web.

Résumé

Dans ce laboratoire pratique, vous avez observé certaines des nouvelles fonctionnalités résidant dans ASP.NET MVC 4. Les concepts suivants ont été abordés :

Tirer parti des améliorations apportées aux modèles de projet MVC ASP.NET, y compris le nouveau modèle de projet d’application mobile
Utiliser l’attribut de fenêtre d’affichage HTML5 et les requêtes multimédias CSS pour améliorer l’affichage sur les appareils mobiles
Utiliser jQuery Mobile pour des améliorations progressives et pour créer une interface utilisateur web optimisée pour l’interaction tactile
Créer des vues spécifiques aux appareils mobiles
Utiliser le composant sélecteur d’affichage pour basculer entre les vues mobiles et de bureau dans l’application
Créer des contrôleurs asynchrones à l’aide de la prise en charge des tâches

Annexe A : Utilisation d’extraits de code

Avec les extraits de code, vous avez tout le code dont vous avez besoin à portée de main. Le document lab vous indique exactement quand vous pouvez les utiliser, comme illustré dans la figure suivante.

Utilisation des extraits de code Visual Studio pour insérer du code dans votre projet

Utilisation des extraits de code Visual Studio pour insérer du code dans votre projet

Pour ajouter un extrait de code à l’aide du clavier (C# uniquement)

Placez le curseur dans lequel vous souhaitez insérer le code.
Commencez à taper le nom de l’extrait de code (sans espaces ou traits d’union).
Regardez comme IntelliSense affiche les noms des extraits de code correspondants.
Sélectionnez l’extrait de code correct (ou continuez à taper jusqu’à ce que le nom de l’extrait de code entier soit sélectionné).
Appuyez deux fois sur tabulation pour insérer l’extrait de code à l’emplacement du curseur.

Commencez à taper le nom de l’extrait de code

Commencez à taper le nom de l’extrait de code

Appuyez sur Tab pour sélectionner l’extrait de code mis en surbrillance

Appuyez sur Tab pour sélectionner l’extrait de code mis en surbrillance

Appuyez de nouveau sur Tab et l’extrait de code se développe

Appuyez de nouveau sur Tab et l’extrait de code se développe

Pour ajouter un extrait de code à l’aide de la souris (C#, Visual Basic et XML)

Cliquez avec le bouton droit sur l’emplacement où vous souhaitez insérer l’extrait de code.
Sélectionnez Insérer un extrait de code suivi de mes extraits de code.
Sélectionnez l’extrait de code approprié dans la liste en cliquant dessus.

Cliquez avec le bouton droit sur l’emplacement où vous souhaitez insérer l’extrait de code, puis sélectionnez Insérer un extrait de code

Cliquez avec le bouton droit sur l’emplacement où vous souhaitez insérer l’extrait de code, puis sélectionnez Insérer un extrait de code

Sélectionnez l’extrait de code approprié dans la liste, en cliquant dessus

Sélectionnez l’extrait de code approprié dans la liste, en cliquant dessus

Annexe B : Installation de Visual Studio Express 2012 pour web

Vous pouvez installer Microsoft Visual Studio Express 2012 pour Web ou une autre version « Express » à l’aide de Microsoft Web Platform Installer. Les instructions suivantes vous guident tout au long des étapes requises pour installer Visual Studio Express 2012 pour Web à l’aide de Microsoft Web Platform Installer.

Accédez à [/iis/extensions/introduction-to-iis-express/iis-express-overview ?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview ?linkid=9810169). Sinon, si vous avez déjà installé Web Platform Installer, vous pouvez l’ouvrir et rechercher le produit « Visual Studio Express 2012 for Web with Windows Azure SDK ».
Cliquez sur Installer maintenant. Si vous n’avez pas web Platform Installer , vous êtes redirigé pour le télécharger et l’installer en premier.
Une fois web Platform Installer ouvert, cliquez sur Installer pour démarrer l’installation.

Installer Visual Studio Express
Lisez toutes les licences et conditions de tous les produits, puis cliquez sur J’accepte pour continuer.

Acceptation des termes du contrat de licence
Attendez que le processus de téléchargement et d’installation soit terminé.

Progression de l’installation
Une fois l’installation terminée, cliquez sur Terminer.

Installation terminée
Cliquez sur Quitter pour fermer Web Platform Installer.
Pour ouvrir Visual Studio Express pour le web, accédez à l’écran d’accueil et commencez à écrire « VS Express », puis cliquez sur la vignette VS Express pour Web.

Vignette VS Express pour web

Annexe C : Installation du simulateur WebMatrix 2 et iPhone

Pour exécuter votre site dans un appareil iPhone simulé, vous pouvez utiliser l’extension WebMatrix « Electric Mobile Simulator for the iPhone ». Vous pouvez également configurer la même extension pour exécuter le simulateur à partir de Visual Studio 2012.

Tâche 1 - Installation de WebMatrix 2

Accédez à [/iis/extensions/introduction-to-iis-express/iis-express-overview ?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview ?linkid=9810169). Sinon, si vous avez déjà installé Web Platform Installer, vous pouvez l’ouvrir et rechercher le produit « WebMatrix 2 ».
Cliquez sur Installer maintenant. Si vous n’avez pas web Platform Installer , vous êtes redirigé pour le télécharger et l’installer en premier.
Une fois web Platform Installer ouvert, cliquez sur Installer pour démarrer l’installation.

Installer WebMatrix 2
Lisez toutes les licences et conditions de tous les produits, puis cliquez sur J’accepte pour continuer.

Acceptation des termes du contrat de licence
Attendez que le processus de téléchargement et d’installation soit terminé.

Progression de l’installation
Une fois l’installation terminée, cliquez sur Terminer.

Installation terminée
Cliquez sur Quitter pour fermer Web Platform Installer.

Tâche 2 : installation de l’extension du simulateur iPhone

Exécutez WebMatrix et ouvrez n’importe quel site web existant ou créez-en un.
Cliquez sur le bouton Exécuter dans le ruban Accueil et sélectionnez Ajouter nouveau.

Ajout d’une nouvelle extension WebMatrix
Sélectionnez simulateur iPhone , puis cliquez sur Installer.

Exploration des extensions WebMatrix
Dans les détails du package, cliquez sur Installer pour poursuivre l’installation de l’extension.

Extension du simulateur iPhone
Lisez et acceptez le CLUF d’extension.

CLUF de l’extension WebMatrix
À présent, vous pouvez exécuter votre site web à partir de WebMatrix à l’aide de l’option simulateur iPhone.

Exécuter à l’aide d’un iPhone

Tâche 3 - Configuration de Visual Studio 2012 pour exécuter le simulateur iPhone

Ouvrez Visual Studio 2012 et ouvrez n’importe quel site web ou créez un projet.
Cliquez sur la flèche vers le bas à partir du bouton Exécuter, puis sélectionnez Parcourir avec.

Parcourir avec
Dans la boîte de dialogue « Parcourir avec », cliquez sur Ajouter.
Dans la boîte de dialogue « Ajouter un programme », utilisez les valeurs suivantes :
- Programme : C :\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe (mettez à jour le chemin en conséquence)
- Arguments : « 1 »
- Nom convivial : simulateur iPhone
  
  Ajouter un programme à parcourir avec
Cliquez sur OK et fermez les boîtes de dialogue.
Vous pouvez maintenant exécuter vos applications web dans le simulateur iPhone à partir de Visual Studio 2012.

Parcourir avec le simulateur iPhone

Annexe D : Publication d’une application MVC 4 ASP.NET à l’aide du déploiement web

Cette annexe vous montre comment créer un site web à partir du portail de gestion Windows Azure et publier l’application que vous avez obtenue en suivant le labo, en tirant parti de la fonctionnalité de publication Web Deploy fournie par Windows Azure.

Tâche 1 : création d’un site web à partir du portail Windows Azure

Accédez au portail de gestion Windows Azure et connectez-vous à l’aide des informations d’identification Microsoft associées à votre abonnement.

Remarque

Avec Windows Azure, vous pouvez héberger gratuitement 10 sites web ASP.NET, puis effectuer une mise à l’échelle à mesure que votre trafic augmente. Vous pouvez vous inscrire ici.

Se connecter au portail de gestion Windows Azure
Cliquez sur Nouveau dans la barre de commandes.

Création d’un site web
Cliquez sur Site web de calcul | . Sélectionnez ensuite l’option Création rapide. Fournissez une URL disponible pour le nouveau site web, puis cliquez sur Créer un site web.

Remarque

Un site web Windows Azure est l’hôte d’une application web s’exécutant dans le cloud que vous pouvez contrôler et gérer. L’option Création rapide vous permet de déployer une application web terminée sur le site web Windows Azure à partir de l’extérieur du portail. Il n’inclut pas les étapes de configuration d’une base de données.

Création d’un site web à l’aide de la création rapide
Attendez que le nouveau site web soit créé.
Une fois le site web créé, cliquez sur le lien sous la colonne URL . Vérifiez que le nouveau site web fonctionne.

Navigation vers le nouveau site web

Site web en cours d’exécution
Revenez au portail et cliquez sur le nom du site web sous la colonne Nom pour afficher les pages de gestion.

Ouverture des pages de gestion des sites web
Dans la page Tableau de bord , sous la section Aperçu rapide, cliquez sur le lien Télécharger le profil de publication.

Remarque

Le profil de publication contient toutes les informations requises pour publier une application web sur un site web Windows Azure pour chaque méthode de publication activée. Le profil de publication contient les URL, les informations d’identification de l’utilisateur et les chaînes de base de données requises pour se connecter à chacun des points de terminaison pour lesquels une méthode de publication est activée. Microsoft WebMatrix 2, Microsoft Visual Studio Express pour le web et Microsoft Visual Studio 2012 prennent en charge la lecture des profils de publication pour automatiser la configuration de ces programmes pour publier des applications web sur des sites web Windows Azure.

Téléchargement du profil de publication du site web
Téléchargez le fichier de profil de publication à un emplacement connu. Dans cet exercice, vous allez voir comment utiliser ce fichier pour publier une application web sur un site Web Windows Azure à partir de Visual Studio.

Enregistrement du fichier de profil de publication

Tâche 2 : configuration du serveur de base de données

Si votre application utilise des bases de données SQL Server, vous devez créer un serveur SQL Database. Si vous souhaitez déployer une application simple qui n’utilise pas SQL Server, vous pouvez ignorer cette tâche.

Vous aurez besoin d’un serveur SQL Database pour stocker la base de données d’application. Vous pouvez afficher les serveurs SQL Database à partir de votre abonnement dans le portail de gestion Windows Azure dans le tableau de bord des serveurs sql Databases | Server. | Si vous n’avez pas de serveur créé, vous pouvez en créer un à l’aide du bouton Ajouter dans la barre de commandes. Notez le nom et l’URL du serveur, le nom de connexion administrateur et le mot de passe, car vous les utiliserez dans les tâches suivantes. Ne créez pas encore la base de données, car elle sera créée dans une phase ultérieure.

Tableau de bord sql Database Server
Dans la tâche suivante, vous allez tester la connexion de base de données à partir de Visual Studio, pour cette raison, vous devez inclure votre adresse IP locale dans la liste des adresses IP autorisées du serveur. Pour ce faire, cliquez sur Configurer, sélectionnez l’adresse IP à partir de l’adresse IP du client actuel et collez-la dans les zones de texte Adresse IP de début et adresse IP de fin, puis cliquez sur le bouton.

Ajout de l’adresse IP du client
Une fois l’adresse IP du client ajoutée à la liste des adresses IP autorisées, cliquez sur Enregistrer pour confirmer les modifications.

Confirmer les modifications

Tâche 3 : publication d’une application ASP.NET MVC 4 à l’aide du déploiement web

Revenez à la solution ASP.NET MVC 4. Dans le Explorateur de solutions, cliquez avec le bouton droit sur le projet de site web, puis sélectionnez Publier.

Publication du site web
Importez le profil de publication que vous avez enregistré dans la première tâche.

Importation du profil de publication
Cliquez sur Valider la connexion. Une fois la validation terminée, cliquez sur Suivant.

Remarque

La validation est terminée une fois qu’une coche verte s’affiche en regard du bouton Valider la connexion.

Validation de la connexion
Dans la page Paramètres , sous la section Bases de données , cliquez sur le bouton en regard de la zone de texte de votre connexion de base de données (par exemple, DefaultConnection).

Configuration du déploiement web
Configurez la connexion de base de données comme suit :
- Dans le nom du serveur, tapez votre URL de serveur SQL Database à l’aide du préfixe tcp : .
- Dans Le nom d’utilisateur, tapez le nom de connexion de votre administrateur de serveur.
- Dans Mot de passe, tapez le mot de passe de connexion de votre administrateur de serveur.
- Tapez un nouveau nom de base de données, par exemple : MVC4SampleDB.
  
  Configuration des chaîne de connexion de destination
Cliquez ensuite sur OK. Lorsque vous êtes invité à créer la base de données, cliquez sur Oui.

Création de la base de données
Le chaîne de connexion que vous utiliserez pour vous connecter à SQL Database dans Windows Azure s’affiche dans la zone de texte Connexion par défaut. Cliquez ensuite sur Suivant.

Chaîne de connexion pointant vers SQL Database
Dans la page Aperçu , cliquez sur Publier.

Publication de l’application web
Une fois le processus de publication terminé, votre navigateur par défaut ouvre le site web publié.

Application publiée sur Windows Azure