Générer des API RESTful avec API Web ASP.NET

Article
07/13/2023

Atelier pratique : utilisez l’API web dans ASP.NET 4.x pour créer une API REST simple pour une application de gestionnaire de contacts. Vous allez également créer un client pour utiliser l’API.

Au cours des dernières années, il est devenu clair que HTTP n’est pas seulement destiné à la distribution de pages HTML. Il s’agit également d’une plateforme puissante pour la création d’API web, à l’aide d’une poignée de verbes (GET, POST, etc.) ainsi que de quelques concepts simples tels que les URI et les en-têtes. API Web ASP.NET est un ensemble de composants qui simplifient la programmation HTTP. Étant donné qu’elle est basée sur le runtime MVC ASP.NET, l’API web gère automatiquement les détails de transport de bas niveau de HTTP. En même temps, l’API web expose naturellement le modèle de programmation HTTP. En fait, l’un des objectifs de l’API web est de ne pas abstraction de la réalité de HTTP. Par conséquent, l’API web est à la fois flexible et facile à étendre. Le style architectural REST s’est avéré être un moyen efficace de tirer parti de HTTP, même s’il ne s’agit certainement pas de la seule approche valide de HTTP. Le gestionnaire de contacts expose le RESTful pour la liste, l’ajout et la suppression de contacts, entre autres.

Ce labo nécessite une compréhension de base de HTTP, REST et suppose que vous disposez d’une connaissance pratique de base de HTML, JavaScript et jQuery.

Notes

Le site Web ASP.NET dispose d’une zone dédiée à l’infrastructure API Web ASP.NET à l’adresse https://asp.net/web-api. Ce site continuera à fournir des informations, des exemples et des actualités de dernière date concernant l’API web, de sorte que case activée-le fréquemment si vous souhaitez approfondir l’art de la création d’API web personnalisées disponibles pour pratiquement n’importe quel appareil ou infrastructure de développement.

API Web ASP.NET, similaire à ASP.NET MVC 4, offre une grande flexibilité en termes de séparation de la couche de service des contrôleurs, ce qui vous permet d’utiliser assez facilement plusieurs infrastructures d’injection de dépendances disponibles.

Tous les exemples de code et extraits de code sont inclus dans le kit de formation Web Camps, disponible à l’adresse https://github.com/Microsoft-Web/WebCampTrainingKit/releases.

Objectifs

Dans ce labo pratique, vous allez apprendre à :

Implémenter une API web RESTful
Appeler l’API à partir d’un client HTML

Prérequis

Les éléments suivants sont requis pour effectuer ce labo pratique :

Microsoft Visual Studio Express 2012 pour le web ou supérieur (consultez l’annexe B pour obtenir des instructions sur la façon de l’installer).

Programme d’installation

Installation d’extraits de code

Pour des raisons pratiques, une grande partie du code que vous allez gérer tout au long de ce labo est disponible sous forme d’extraits de code Visual Studio. Pour installer les extraits de code, exécutez le fichier .\Source\Setup\CodeSnippets.vsi .

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

Exercices

Ce labo pratique comprend l’exercice suivant :

Exercice 1 : Créer une API web Read-Only
Exercice 2 : Créer une API web en lecture-écriture
Exercice 3 : Utiliser l’API web à partir d’un client HTML

Notes

Chaque exercice est accompagné d’un dossier End contenant la solution obtenue que vous devez obtenir une fois les exercices terminés. Vous pouvez utiliser cette solution comme guide si vous avez besoin d’aide supplémentaire pour effectuer les exercices.

Durée estimée de ce labo : 60 minutes.

Exercice 1 : Créer une API web Read-Only

Dans cet exercice, vous allez implémenter les méthodes GET en lecture seule pour le gestionnaire de contacts.

Tâche 1 : Création du projet d’API

Dans cette tâche, vous allez utiliser les nouveaux modèles de projet web ASP.NET pour créer une application web API web.

Exécutez Visual Studio 2012 Express pour le web. Pour ce faire, accédez à Démarrer , tapez VS Express pour le web , puis appuyez sur Entrée.
Dans le menu Fichier , sélectionnez Nouveau projet. Sélectionnez visual C# | Type de projet web dans l’arborescence du type de projet, puis sélectionnez le ASP.NET type de projet Application web MVC 4 . Définissez le nom du projet sur ContactManager et le nom de la solutionsur Begin, puis cliquez sur OK.

Création d’un projet d’application web MVC 4.0 ASP.NET
Dans la boîte de dialogue ASP.NET type de projet MVC 4, sélectionnez le type de projet API web . Cliquez sur OK.

Spécification du type de projet API web

Tâche 2 : Création des contrôleurs d’API Du gestionnaire de contacts

Dans cette tâche, vous allez créer les classes de contrôleur dans lesquelles résideront les méthodes d’API.

Supprimez du projet le fichier nommé ValuesController.cs dans le dossier Controllers .
Cliquez avec le bouton droit sur le dossier Contrôleurs dans le projet, puis sélectionnez Ajouter | Contrôleur à partir du menu contextuel.

Ajout d’un nouveau contrôleur au projet
Dans la boîte de dialogue Ajouter un contrôleur qui s’affiche, sélectionnez Contrôleur d’API vide dans le menu Modèle. Nommez la classe de contrôleur ContactController. Cliquez ensuite sur Ajouter.

Utilisation de la boîte de dialogue Ajouter un contrôleur pour créer un contrôleur d’API web
Ajoutez le code suivant à ContactController.

(Extrait de code - Web API Lab - Ex01 - Méthode API Get)
```
public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}
```
Appuyez sur F5 pour déboguer l’application. La page d’accueil par défaut d’un projet d’API web doit apparaître.

Page d’accueil par défaut d’une application API Web ASP.NET
Dans la fenêtre Internet Explorer, appuyez sur la touche F12 pour ouvrir la fenêtre Outils de développement. Cliquez sur l’onglet Réseau , puis sur le bouton Démarrer la capture pour commencer à capturer le trafic réseau dans la fenêtre.

Ouverture de l’onglet réseau et lancement de la capture réseau
Ajoutez l’URL dans la barre d’adresses du navigateur avec /api/contact , puis appuyez sur Entrée. Les détails de la transmission s’affichent dans la fenêtre de capture réseau. Notez que le type MIME de la réponse est application/json. Cela montre comment le format de sortie par défaut est JSON.

Affichage de la sortie de la demande d’API web dans la vue Réseau

Notes

Le comportement par défaut d’Internet Explorer 10 à ce stade consiste à demander si l’utilisateur souhaite enregistrer ou ouvrir le flux résultant de l’appel d’API web. La sortie est un fichier texte contenant le résultat JSON de l’appel d’URL de l’API web. N’annulez pas la boîte de dialogue afin de pouvoir watch le contenu de la réponse via la fenêtre Outil développeurs.
Cliquez sur le bouton Accéder à l’affichage détaillé pour afficher plus d’informations sur la réponse de cet appel d’API.

Basculer vers l’affichage détaillé
Cliquez sur l’onglet Corps de la réponse pour afficher le texte de réponse JSON réel.

Affichage du texte de sortie JSON dans le moniteur réseau

Tâche 3 : Création des modèles de contact et augmentation du contrôleur de contacts

Dans cette tâche, vous allez créer les classes de contrôleur dans lesquelles résideront les méthodes d’API.

Cliquez avec le bouton droit sur le dossier Modèles , puis sélectionnez Ajouter | Classe... dans le menu contextuel.

Ajout d’un nouveau modèle à l’application web
Dans la boîte de dialogue Ajouter un nouvel élément , nommez le nouveau fichier Contact.cs , puis cliquez sur Ajouter.

Création du fichier de classe Contact
Ajoutez le code en surbrillance suivant à la classe Contact .

(Extrait de code - Laboratoire d’API web - Ex01 - Classe Contact)
```
public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}
```
Dans la classe ContactController , sélectionnez la chaîne de mot dans la définition de méthode de la méthode Get , puis tapez le mot Contact. Une fois le mot tapé, un indicateur s’affiche au début du mot Contact. Maintenez la touche Ctrl enfoncée et appuyez sur la touche point (.) ou cliquez sur l’icône à l’aide de la souris pour ouvrir la boîte de dialogue d’assistance dans l’éditeur de code, pour remplir automatiquement la directive using pour l’espace de noms Modèles.

Utilisation de l’assistance Intellisense pour les déclarations d’espaces de noms

Modifiez le code de la méthode Get afin qu’elle retourne un tableau d’instances de modèle Contact.

(Extrait de code - Laboratoire d’API web - Ex01 - Retour d’une liste de contacts)

public Contact[] Get()
{
    return new Contact[]
    {
        new Contact
        {
            Id = 1,
            Name = "Glenn Block"
        },
        new Contact
        {
            Id = 2,
            Name = "Dan Roth"
        }
    };
}

Appuyez sur F5 pour déboguer l’application web dans le navigateur. Pour afficher les modifications apportées à la sortie de réponse de l’API, procédez comme suit.
1. Une fois le navigateur ouvert, appuyez sur F12 si les outils de développement ne sont pas encore ouverts.
2. Cliquez sur l’onglet Réseau .
3. Appuyez sur le bouton Démarrer la capture .
4. Ajoutez le suffixe d’URL /api/contact à l’URL dans la barre d’adresses et appuyez sur la touche Entrée.
5. Appuyez sur le bouton Accéder à l’affichage détaillé .
6. Sélectionnez l’onglet Corps de la réponse . Vous devez voir une chaîne JSON représentant la forme sérialisée d’un tableau d’instances Contact.
  
  Sortie sérialisée JSON d’un appel de méthode d’API web complexe

Tâche 4 : Extraction de fonctionnalités dans une couche de service

Cette tâche montre comment extraire des fonctionnalités dans une couche de service pour permettre aux développeurs de séparer facilement leurs fonctionnalités de service de la couche contrôleur, ce qui permet la réutilisation des services qui effectuent réellement le travail.

Créez un dossier à la racine de la solution et nommez-le Services. Pour ce faire, cliquez avec le bouton droit sur Projet ContactManager , sélectionnez Ajouter un | nouveau dossier, nommez-le Services.

Création du dossier Services
Cliquez avec le bouton droit sur le dossier Services , puis sélectionnez Ajouter | Classe... dans le menu contextuel.

Ajout d’une nouvelle classe au dossier Services
Lorsque la boîte de dialogue Ajouter un nouvel élément s’affiche, nommez la nouvelle classe ContactRepository , puis cliquez sur Ajouter.

Création d’un fichier de classe pour contenir le code de la couche de service Du référentiel de contacts
Ajoutez une directive using au fichier ContactRepository.cs pour inclure l’espace de noms des modèles.
```
using ContactManager.Models;
```

Ajoutez le code en surbrillance suivant au fichier ContactRepository.cs pour implémenter la méthode GetAllContacts.

(Extrait de code - Laboratoire d’API web - Ex01 - Référentiel de contacts)

public class ContactRepository
{
    public Contact[] GetAllContacts()
    {
        return new Contact[]
        {
            new Contact
            {
                Id = 1,
                Name = "Glenn Block"
            },
            new Contact
            {
                Id = 2,
                Name = "Dan Roth"
            }
        };
    }
}

Ouvrez le fichier ContactController.cs s’il n’est pas déjà ouvert.
Ajoutez l’instruction using suivante à la section déclaration d’espace de noms du fichier.
```
using ContactManager.Services;
```
Ajoutez le code en surbrillance suivant à la classe ContactController.cs pour ajouter un champ privé représentant les instance du dépôt, afin que les autres membres de la classe puissent utiliser l’implémentation du service.

(Extrait de code - Laboratoire d’API web - Ex01 - Contrôleur de contact)
```
public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}
```
Modifiez la méthode Get afin qu’elle utilise le service de référentiel de contacts.

(Extrait de code - Laboratoire d’API web - Ex01 - Retour d’une liste de contacts via le dépôt)
```
public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}
```
Placez un point d’arrêt sur la définition de méthode Get de ContactController.

Ajout de points d’arrêt au contrôleur de contacts

Ajout de points d’arrêt au contrôleur de contact 11. Appuyez sur F5 pour exécuter l’application. 12. Lorsque le navigateur s’ouvre, appuyez sur F12 pour ouvrir les outils de développement. 13. Cliquez sur l’onglet Réseau . 14. Cliquez sur le bouton Démarrer la capture . 15. Ajoutez l’URL dans la barre d’adresses avec le suffixe /api/contact et appuyez sur Entrée pour charger le contrôleur d’API. 16. Visual Studio 2012 doit s’arrêter une fois que la méthode Get a commencé l’exécution.

Rupture dans la méthode Get

Rupture dans la méthode Get 17. Appuyez sur F5 pour continuer. 18. Retour à Internet Explorer s’il n’est pas déjà mis en avant. Notez la fenêtre de capture réseau.

Affichage réseau dans Internet Explorer affichant les résultats de l’appel d’API web

Vue réseau dans Internet Explorer affichant les résultats de l’appel d’API web 19. Cliquez sur le bouton Accéder à l’affichage détaillé. 20. Cliquez sur l’onglet Corps de la réponse . Notez la sortie JSON de l’appel d’API et la façon dont il représente les deux contacts récupérés par la couche de service.

Affichage de la sortie JSON de l’API web dans la fenêtre Outils de développement

Affichage de la sortie JSON de l’API web dans la fenêtre Outils de développement

Exercice 2 : Créer une API web en lecture-écriture

Dans cet exercice, vous allez implémenter des méthodes POST et PUT pour le gestionnaire de contacts afin de l’activer avec des fonctionnalités de modification des données.

Tâche 1 : Ouverture du projet d’API web

Dans cette tâche, vous allez vous préparer à améliorer le projet d’API web créé dans l’exercice 1 afin qu’il puisse accepter les entrées utilisateur.

Exécutez Visual Studio 2012 Express pour le web. Pour ce faire, accédez à Démarrer , tapez VS Express pour le web , puis appuyez sur Entrée.
Ouvrez la solution Begin située dans le dossier Source/Ex02-ReadWriteWebAPI/Begin/ . Sinon, vous pouvez continuer à utiliser la solution End obtenue en suivant l’exercice précédent.
1. Si vous avez ouvert la solution Begin fournie, vous devez télécharger certains 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.
  
  Notes
  
  L’un des avantages de l’utilisation de NuGet est que vous n’avez pas besoin d’expédier toutes les bibliothèques de 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 pouvez 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 le fichier Services/ContactRepository.cs .

Tâche 2 : Ajout de fonctionnalités Data-Persistence à l’implémentation du référentiel de contacts

Dans cette tâche, vous allez augmenter la classe ContactRepository du projet d’API web créé dans l’exercice 1 afin qu’elle puisse conserver et accepter les entrées utilisateur et les nouvelles instances Contact.

Ajoutez la constante suivante à la classe ContactRepository pour représenter le nom de la clé de l’élément de cache du serveur web plus loin dans cet exercice.
```
private const string CacheKey = "ContactStore";
```

Ajoutez un constructeur au ContactRepository contenant le code suivant.

(Extrait de code - Laboratoire d’API web - Ex02 - Constructeur de référentiel de contacts)

public ContactRepository()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        if (ctx.Cache[CacheKey] == null)
        {
            var contacts = new Contact[]
            {
                new Contact
                {
                    Id = 1, Name = "Glenn Block"
                },
                new Contact
                {
                    Id = 2, Name = "Dan Roth"
                }
            };

            ctx.Cache[CacheKey] = contacts;
        }
    }
}

Modifiez le code de la méthode GetAllContacts comme illustré ci-dessous.

(Extrait de code - Laboratoire d’API web - Ex02 - Obtenir tous les contacts)
```
public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        return (Contact[])ctx.Cache[CacheKey];
    }

    return new Contact[]
        {
            new Contact
            {
                Id = 0,
                Name = "Placeholder"
            }
        };
}
```
Notes

Cet exemple est à des fins de démonstration et utilise le cache du serveur web comme support de stockage, afin que les valeurs soient disponibles simultanément pour plusieurs clients, plutôt que d’utiliser un mécanisme de stockage de session ou une durée de vie de stockage de requête. On peut utiliser Entity Framework, le stockage XML ou toute autre variété à la place du cache du serveur web.

Implémentez une nouvelle méthode nommée SaveContact dans la classe ContactRepository pour enregistrer un contact. La méthode SaveContact doit prendre un seul paramètre Contact et retourner une valeur booléenne indiquant la réussite ou l’échec.

(Extrait de code - Web API Lab - Ex02 - Implémentation de la méthode SaveContact)

public bool SaveContact(Contact contact)
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
         try
         {
              var currentData = ((Contact[])ctx.Cache[CacheKey]).ToList();
              currentData.Add(contact);
              ctx.Cache[CacheKey] = currentData.ToArray();

              return true;
         }
         catch (Exception ex)
         {
              Console.WriteLine(ex.ToString());
              return false;
         }
    }

    return false;
}

Exercice 3 : Utiliser l’API web à partir d’un client HTML

Dans cet exercice, vous allez créer un client HTML pour appeler l’API web. Ce client facilite l’échange de données avec l’API web à l’aide de JavaScript et affiche les résultats dans un navigateur web à l’aide du balisage HTML.

Tâche 1 : Modification de la vue Index pour fournir une interface graphique graphique pour l’affichage des contacts

Dans cette tâche, vous allez modifier la vue Index par défaut de l’application web pour prendre en charge l’exigence d’affichage de la liste des contacts existants dans un navigateur HTML.

Ouvrez Visual Studio 2012 Express pour le web s’il n’est pas déjà ouvert.
Ouvrez la solution Begin située dans le dossier Source/Ex03-ConsumeWebAPI/Begin/ . Sinon, vous pouvez continuer à utiliser la solution End obtenue en suivant l’exercice précédent.
1. Si vous avez ouvert la solution Begin fournie, vous devez télécharger certains 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.
  
  Notes
  
  L’un des avantages de l’utilisation de NuGet est que vous n’avez pas besoin d’expédier toutes les bibliothèques de 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 pouvez 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 le fichier Index.cshtml situé dans le dossier Views/Home .
Remplacez le code HTML dans l’élément div par le corps de l’id afin qu’il ressemble au code suivant.
```
<div id="body">
    <ul id="contacts"></ul>
</div>
```

Ajoutez le code Javascript suivant en bas du fichier pour effectuer la requête HTTP à l’API web.

@section scripts{
<script type="text/javascript">
$(function()
{
        $.getJSON('/api/contact', function(contactsJsonPayload)
        {
            $(contactsJsonPayload).each(function(i, item)
            {
                $('#contacts').append('<li>' + item.Name + '</li>');
            });
        });
});
</script>
}

Ouvrez le fichier ContactController.cs s’il n’est pas déjà ouvert.
Placez un point d’arrêt sur la méthode Get de la classe ContactController .

Placement d’un point d’arrêt sur la méthode Get du contrôleur d’API
Appuyez sur F5 pour exécuter le projet. Le navigateur charge le document HTML.

Notes

Vérifiez que vous accédez à l’URL racine de votre application.
Une fois la page chargée et le Code JavaScript exécuté, le point d’arrêt est atteint et l’exécution du code s’interrompt dans le contrôleur.

Débogage dans l’appel d’API web à l’aide de Visual Studio 2012 Express pour le web
Supprimez le point d’arrêt et appuyez sur F5 ou le bouton Continuer de la barre d’outils de débogage pour continuer à charger l’affichage dans le navigateur. Une fois l’appel d’API web terminé, vous devez voir les contacts retournés à partir de l’appel d’API web affichés en tant qu’éléments de liste dans le navigateur.

Résultats de l’appel d’API affichés dans le navigateur en tant qu’éléments de liste
Arrêtez le débogage.

Tâche 2 : Modification de l’affichage d’index pour fournir une interface graphique graphique pour la création de contacts

Dans cette tâche, vous allez continuer à modifier la vue Index de l’application MVC. Un formulaire sera ajouté à la page HTML qui capturera l’entrée utilisateur et l’enverra à l’API web pour créer un nouveau contact, et une nouvelle méthode de contrôleur d’API web sera créée pour collecter la date à partir de l’interface utilisateur.

Ouvrez le fichier ContactController.cs .

Ajoutez une nouvelle méthode à la classe de contrôleur nommée Post , comme indiqué dans le code suivant.

(Extrait de code - Web API Lab - Ex03 - Post, méthode)

public HttpResponseMessage Post(Contact contact)
{
    this.contactRepository.SaveContact(contact);

    var response = Request.CreateResponse<Contact>(System.Net.HttpStatusCode.Created, contact);

    return response;
}

Ouvrez le fichier Index.cshtml dans Visual Studio s’il n’est pas déjà ouvert.

Ajoutez le code HTML ci-dessous au fichier juste après la liste non triée que vous avez ajoutée dans la tâche précédente.

<form id="saveContactForm" method="post">
<h3>Create a new Contact</h3>
<p>
    <label for="contactId">Contact Id:</label>
    <input type="text" name="Id" />
</p>
<p>
    <label for="contactName">Contact Name:</label>
    <input type="text" name="Name" />
</p>
<input type="button" id="saveContact" value="Save" />
</form>

Dans l’élément script en bas du document, ajoutez le code en surbrillance suivant pour gérer les événements de clic de bouton, qui publient les données sur l’API web à l’aide d’un appel HTTP POST.

<script type="text/javascript">
... 
$('#saveContact').click(function()
         {
              $.post("api/contact",
                    $("#saveContactForm").serialize(),
                    function(value)
                    {
                         $('#contacts').append('<li>' + value.Name + '</li>');
                    },
                    "json"
              );
         });
</script>

Dans ContactController.cs, placez un point d’arrêt sur la méthode Post .
Appuyez sur F5 pour exécuter l’application dans le navigateur.
Une fois la page chargée dans le navigateur, tapez un nouveau nom de contact et un ID, puis cliquez sur le bouton Enregistrer .

Document HTML client chargé dans le navigateur
Lorsque la fenêtre du débogueur s’arrête dans la méthode Post , examinez les propriétés du paramètre contact . Les valeurs doivent correspondre aux données que vous avez entrées dans le formulaire.

Objet Contact envoyé à l’API web à partir du client
Parcourez la méthode dans le débogueur jusqu’à ce que la variable de réponse ait été créée. Lors de l’inspection dans la fenêtre Locals du débogueur, vous verrez que toutes les propriétés ont été définies.

Réponse suite à la création dans le débogueur

Réponse suite à la création dans le débogueur 11. Si vous appuyez sur F5 ou cliquez sur Continuer dans le débogueur, la demande se termine. Une fois que vous revenez au navigateur, le nouveau contact a été ajouté à la liste des contacts stockés par l’implémentation ContactRepository .

Le navigateur reflète la création réussie du nouveau contact instance

Le navigateur reflète la création réussie du nouveau contact instance

Notes

En outre, vous pouvez déployer cette application sur Azure à l’annexe C suivante : Publication d’une application MVC 4 ASP.NET à l’aide de Web Deploy.

Résumé

Ce labo vous a présenté la nouvelle infrastructure API Web ASP.NET et l’implémentation des API web RESTful à l’aide de l’infrastructure. À partir de là, vous pouvez créer un référentiel qui facilite la persistance des données à l’aide d’un certain nombre de mécanismes et de câbles qui service vers le haut plutôt que le simple fourni à titre d’exemple dans ce labo. L’API web prend en charge un certain nombre de fonctionnalités supplémentaires, telles que l’activation de la communication à partir de clients non HTML écrits dans n’importe quel langage prenant en charge HTTP et JSON ou XML. La possibilité d’héberger une API web en dehors d’une application web classique est également possible, tout comme la possibilité de créer vos propres formats de sérialisation.

Le site web ASP.NET dispose d’une zone dédiée à l’infrastructure API Web ASP.NET à l’adresse [https://asp.net/web-api](https://asp.net/web-api). Ce site continuera à fournir des informations, des exemples et des actualités de dernière date concernant l’API web, de sorte que case activée-le fréquemment si vous souhaitez approfondir l’art de la création d’API web personnalisées disponibles pour pratiquement n’importe quel appareil ou infrastructure de développement.

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 d’extraits de code Visual Studio pour insérer du code dans votre projet

Utilisation d’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 à l’emplacement où vous souhaitez insérer le code.
Commencez à taper le nom de l’extrait de code (sans espaces ni traits d’union).
Observez qu’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 tab pour insérer l’extrait de code à l’emplacement du curseur.

Commencez à taper le nom de l’extrait de code

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

Appuyez à nouveau sur Tab pour que 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 à 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.

de code

Cliquez avec le bouton droit à 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

Annexe B : Installation de Visual Studio Express 2012 pour le web

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

Accédez à [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Si vous avez déjà installé le programme d’installation de plateforme web, vous pouvez également l’ouvrir et rechercher le produit « Visual Studio Express 2012 pour le web avec le Kit de développement logiciel (SDK) Azure ».
Cliquez sur Installer maintenant. Si vous n’avez pas web Platform Installer , vous serez redirigé pour le télécharger et l’installer en premier.
Une fois le programme d’installation de plateforme web ouvert, cliquez sur Installer pour démarrer l’installation.

Installer Visual Studio Express
Lisez les licences et conditions générales 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 se termine.

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

Installation terminée
Cliquez sur Quitter pour fermer le programme d’installation de plateforme web.
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 le web.

Vignette VS Express pour le web

Annexe C : Publication d’une application MVC 4 ASP.NET à l’aide de Web Deploy

Cette annexe vous montre comment créer un site web à partir du portail 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 Azure.

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

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

Notes

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

Connectez-vous au portail
Cliquez sur Nouveau dans la barre de commandes.

Création d’un site web
Cliquez surSite webde 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.

Notes

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 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
Retour 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 de site web
Dans la page Tableau de bord , sous la section Aperçu rapide , cliquez sur le lien Télécharger le profil de publication .

Notes

Le profil de publication contient toutes les informations requises pour publier une application web sur 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 nécessaires pour la connexion et l'authentification auprès de 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 la publication d’applications web sur Azure.

Téléchargement du profil de publication du site web
Téléchargez le fichier de profil de publication à un emplacement connu. Plus loin dans cet exercice, vous allez voir comment utiliser ce fichier pour publier une application web sur 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 SQL Server bases de données, 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 Azure dans letableau de bord deServeurs | de bases de données | Sql. Si vous n’avez pas créé de serveur, 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 de l’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 ultérieurement.

Tableau de bord du serveur SQL Database
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 dans Adresse IP du client actuel , collez-la dans les zones de texte Adresse IP de début et Adresse IP de fin , puis cliquez sur le bouton .

Ajout d’une adresse IP cliente
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 MVC 4 ASP.NET à l’aide de Web Deploy

Retour à la solution MVC 4 ASP.NET. 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 d’un profil de publication
Cliquez sur Valider la connexion. Une fois la validation terminée, cliquez sur Suivant.

Notes

La validation est terminée une fois qu’une coche verte apparaît 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 Nom d’utilisateur, tapez votre nom de connexion d’administrateur de serveur.
- Dans Mot de passe, tapez votre mot de passe de connexion administrateur de serveur.
- Tapez un nouveau nom de base de données, par exemple : MVC4SampleDB.
  
  Configuration de la 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
La chaîne de connexion que vous allez utiliser 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 Azure