Exercice - Connecter une application ASP.NET à Azure SQL Database

  • 10 minutes

Votre base de données est créée. Nous pouvons maintenant configurer et déployer une application web utilisable par les conseillers pédagogiques pour discuter des cours et des programmes d’étude avec les étudiants. L’application utilise la bibliothèque System.Data.SqlClient pour récupérer et afficher les détails des leçons et modules qu’un étudiant doit réussir pour achever un cours.

Pour gagner en temps, nous utilisons une application web préexistante et vous montrons comment ajouter le code pour connecter cette application à votre base de données. Le diagramme suivant illustre les composants principaux de cette application :

High-level view of the application structure.

Pour configurer l’application web, effectuez les étapes suivantes :

  • Créer une classe qui contient le nom du cours, le titre du module et la séquence de chaque module dans la base de données.
  • Créer une classe de contrôleur d’accès aux données qui extrait les informations de la base de données.
  • Modifier le code derrière la page d’index dans l’application web, pour créer un objet contrôleur d’accès aux données et extraire les données.
  • Modifier la page d’index pour afficher les données.

Déployer et exécuter l’application web préexistante

  1. Remplacez votre répertoire de travail par le dossier education.

    cd ~/education

  2. Exécutez les commandes suivantes pour générer et déployer l’application web initiale.

    WEBAPPNAME=educationapp-$RANDOM
az webapp up \
    --resource-group <rgn>[Sandbox resource group]</rgn> \
    --location centralus \
    --sku F1 \
    --name $WEBAPPNAME

  3. Quand l’application web est déployée, la sortie présente une App_url avec l’URL du site web. Ouvrez ce site dans un nouvel onglet.

    The education web app running. Currently, no data is displayed.

    Vous voulez que l’application web affiche la liste des cours et les modules qui composent chaque cours. Actuellement, l’application ne récupère pas ou n’affiche pas ces données. Vous devez donc mettre à jour le code pour obtenir les données de la base de données et les afficher.

Ajouter du code à l’application web pour récupérer des données

Ajoutons maintenant le code à l’application qui va récupérer les données de cours dans la base de données.

  1. Dans Cloud Shell, accédez au dossier education/Models.

    cd ~/education/Models

    Ce dossier contient deux fichiers, CoursesAndModules.cs et DataAccessController.cs.

  2. Utilisez l’éditeur de code pour ouvrir le fichier CoursesAndModules.cs.

    code CoursesAndModules.cs

    Ce fichier contient une classe vide nommée CoursesAndModules.

    namespace CoursesWebApp.Models
{
    public class CoursesAndModules
    {
        // TODO: Define the CourseName, ModuleTitle, and Sequence read-only properties

        // TODO: Create a constructor that initializes the fields behind the properties
    }
}

  3. Remplacez le commentaire // TODO: Define the CourseName, ModuleTitle, and Sequence read-only properties par le code suivant.

    public string CourseName { get; }
public string ModuleTitle { get; }
public int Sequence { get; }

    Ce code définit un ensemble de champs en lecture seule contenant les données de chaque ligne affichée par l’application web.

  4. Remplacez le commentaire // TODO: Create a constructor that initializes the fields behind the properties par le constructeur suivant.

    public CoursesAndModules(string courseName, string moduleTitle, int sequence)
{
    this.CourseName = courseName;
    this.ModuleTitle = moduleTitle;
    this.Sequence = sequence;
}

    Ce constructeur remplit les champs avec les données à afficher. Le fichier complet doit contenir le code suivant.

    namespace CoursesWebApp.Models
{
    public class CoursesAndModules
    {
        public string CourseName { get; }
        public string ModuleTitle { get; }
        public int Sequence { get; }

        public CoursesAndModules(string courseName, string moduleTitle, int sequence)
        {
            this.CourseName = courseName;
            this.ModuleTitle = moduleTitle;
            this.Sequence = sequence;
        }
    }
}

  5. Enregistrez le fichier en appuyant sur Ctrl+S et fermez l’éditeur de code en appuyant sur Ctrl+Q.

  6. Utilisez l’éditeur de code pour ouvrir le fichier DataAccessController.cs.

    code DataAccessController.cs

    Ce fichier contient une classe nommée DataAccessController. Cette classe contient la logique d’accès aux données pour la connexion à la base de données et la récupération des données de cours et de modules. Elle remplit la liste des objets CoursesAndModules avec ces données.

    using Microsoft.Extensions.Options;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Threading.Tasks;

namespace CoursesWebApp.Models
{
    public class DataAccessController
    {
        // TODO: Add your connection string in the following statements
        private string connectionString = "<Azure SQL Database Connection String>";

        // Retrieve all details of courses and their modules
        public IEnumerable<CoursesAndModules> GetAllCoursesAndModules()
        {
            List<CoursesAndModules> courseList = new List<CoursesAndModules>();

            // TODO: Connect to the database
            //using ()
            {
                // TODO: Specify the Transact-SQL query to run

                // TODO: Execute the query

                // TODO: Read the data a row at a time

                // TODO: Close the database connection
            }
            return courseList;
        }
    }
}

  7. Laissez l’éditeur de code ouvert et basculez vers le portail Azure.

  8. Dans le menu du portail Azure, sélectionnez Bases de données SQL, puis sélectionnez votre base de données. La Base de données SQL pour coursedatabaseNNN s’affiche.

  9. Dans le volet du menu de gauche, sous Paramètres, sélectionnez Chaînes de connexion. Copiez la chaîne de connexion ADO.NET dans le Presse-papiers.

    The connection string pane in the Azure portal.

  10. Revenez à l’éditeur de code. Remplacez la valeur de la variable connectionString par la valeur copiée dans le Presse-papiers. Dans la chaîne de connexion, consultez le texte User ID avec la valeur azuresql. Remplacez le texte {your_password} par le mot de passe de ce compte.

    private string connectionString = "Server=tcp:courseservernnn.database.windows.net,1433;Initial Catalog=coursedatabasennn;Persist Security Info=False;User ID=azuresql;Password=<password>;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;";

  11. Après le commentaire //TODO: Connect to the database, remplacez l’instruction using commentée par le code suivant.

    using (SqlConnection con = new SqlConnection(connectionString))

    Ce code crée un objet SqlConnection qui se connecte à la base de données à l’aide de votre chaîne de connexion.

  12. Remplacez le commentaire // TODO: Specify the Transact-SQL query to run par les instructions suivantes.

    SqlCommand cmd = new SqlCommand(
    @"SELECT c.CourseName, m.ModuleTitle, s.ModuleSequence
    FROM dbo.Courses c JOIN dbo.StudyPlans s
    ON c.CourseID = s.CourseID
    JOIN dbo.Modules m
    ON m.ModuleCode = s.ModuleCode
    ORDER BY c.CourseName, s.ModuleSequence", con);
cmd.CommandType = CommandType.Text;

    L’objet SqlCommand contient une instruction Transact-SQL (T-SQL) qui récupère les données de tous les cours et modules. Il les associe à l’aide des informations incluses dans la table dbo.StudyPlan.

  13. Remplacez le commentaire // TODO: Execute the query par le code suivant.

    con.Open();
SqlDataReader rdr = cmd.ExecuteReader();

    Ces instructions ouvrent la connexion à la base de données et exécutent l’instruction T-SQL. Vous pouvez utiliser l’objet SqlDataReader pour extraire les résultats ligne par ligne.

  14. Remplacez le commentaire // TODO: Read the data a row at a time par le bloc de code suivant.

    while (rdr.Read())
{
    string courseName = rdr["CourseName"].ToString();
    string moduleTitle = rdr["ModuleTitle"].ToString();
    int moduleSequence = Convert.ToInt32(rdr["ModuleSequence"]);
    CoursesAndModules course = new CoursesAndModules(courseName, moduleTitle, moduleSequence);
    courseList.Add(course);
}

    Ce bloc itère au sein des lignes renvoyées dans l’objet SqlDataReader. Le code extrait les données dans les champs de chaque ligne et les utilise pour remplir un nouvel objet CoursesAndModules. Cet objet est alors ajouté à une liste.

  15. Remplacez le commentaire // TODO: Close the database connection par l’instruction suivante.

    con.Close();

    Cette instruction ferme la connexion à la base de données et libère les ressources détenues.

    La classe terminée doit contenir le code suivant, qui comprend la chaîne de connexion de votre base de données.

    using Microsoft.Extensions.Options;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Threading.Tasks;

namespace CoursesWebApp.Models
{
    public class DataAccessController
    {
        // Add your connection string in the following statements
        private string connectionString = "Server=tcp:courseserver101.database.windows.net,1433;Initial Catalog=coursedatabase101;Persist Security Info=False;User ID=azuresql;Password=<password>;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;";

        // Retrieve all details of courses and their modules    
        public IEnumerable<CoursesAndModules> GetAllCoursesAndModules()
        {
            List<CoursesAndModules> courseList = new List<CoursesAndModules>();

            // Connect to the database
            using (SqlConnection con = new SqlConnection(connectionString))
            {
                // Specify the Transact-SQL query to run
                SqlCommand cmd = new SqlCommand(
                    @"SELECT c.CourseName, m.ModuleTitle, s.ModuleSequence
                    FROM dbo.Courses c JOIN dbo.StudyPlans s
                    ON c.CourseID = s.CourseID
                    JOIN dbo.Modules m
                    ON m.ModuleCode = s.ModuleCode
                    ORDER BY c.CourseName, s.ModuleSequence", con);
                cmd.CommandType = CommandType.Text;

                // Execute the query
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();

                // Read the data a row at a time
                while (rdr.Read())
                {
                    string courseName = rdr["CourseName"].ToString();
                    string moduleTitle = rdr["ModuleTitle"].ToString();
                    int moduleSequence = Convert.ToInt32(rdr["ModuleSequence"]);
                    CoursesAndModules course = new CoursesAndModules(courseName, moduleTitle, moduleSequence);
                    courseList.Add(course);
                }

                // Close the database connection
                con.Close();
            }
            return courseList;
        }
    }
}

  16. Enregistrez le fichier et fermez l’éditeur de code.

Ajouter du code à l’application web pour afficher les données

L’application peut maintenant récupérer les données de cours. À présent, mettez à jour l’application pour afficher les données à l’utilisateur.

  1. Dans Cloud Shell, accédez au dossier education/Pages.

    cd ~/education/Pages

    Ce dossier contient les pages .cshtml et les fichiers de code que l’application web utilise pour afficher des informations.

  2. Utilisez l’éditeur de code pour ouvrir le fichier Index.cshtml.cs.

    code Index.cshtml.cs

    Ce fichier contient le code que la page Index exécute quand elle s’affiche. Le code définit une classe CoursesAndModulesModel. La page Index utilise ce modèle pour afficher les détails des cours et des modules. Dans ce fichier, vous devez ajouter le code qui utilise un objet DataAccessController pour extraire ces données.

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using CoursesWebApp.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CoursesWebApp.Pages
{
    public class CoursesAndModulesModel : PageModel
    {
        // TODO: Create a DataAccessController object

        // TODO: Create a collection for holding CoursesAndModules object

        public void OnGet()
        {
            // TODO: Retrieve the data using the DataAccessController object and populate the CoursesAndModules object
        }
    }
}

  3. Dans Index.cshtml.cs, remplacez le commentaire // TODO: Create a DataAccessController object par le code suivant pour créer un objet DataAccessController.

    DataAccessController dac = new DataAccessController();

  4. Remplacez le commentaire // TODO: Create a collection for holding CoursesAndModules object par le code suivant.

    public List<CoursesAndModules> CoursesAndModules;

  5. Dans la méthode OnGet, remplacez le commentaire // TODO: Retrieve the data using the DataAccessController object and populate the CoursesAndModules object par le code suivant. Ce code utilise l’objet DataAccessController pour remplir la liste avec les données de la base de données.

    CoursesAndModules = dac.GetAllCoursesAndModules().ToList();

    Le fichier complété doit contenir le code suivant.

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using CoursesWebApp.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CoursesWebApp.Pages
{
    public class CoursesAndModulesModel : PageModel
    {
        // Create a DataAccessController object
        DataAccessController dac = new DataAccessController();

        // Create a collection for holding CoursesAndModules object
        public List<CoursesAndModules> CoursesAndModules;

        public void OnGet()
        {
            // Retrieve the data using the DataAccessController object and populate the CoursesAndModules object
            CoursesAndModules = dac.GetAllCoursesAndModules().ToList();
        }
    }
}

  6. Enregistrez le fichier et fermez l’éditeur de code.

  7. Utilisez l’éditeur de code pour ouvrir le fichier Index.cshtml.

    code Index.cshtml

    Ce fichier contient la logique d’affichage de la page Index. Il spécifie CoursesAndModulesModel comme source de données. Le code que nous avons ajouté crée et remplit ce modèle.

    La page utilise des données HTML pour afficher les données du modèle. Actuellement, la page affiche simplement les titres de table. Le corps de la table (<tbody>) est vide.

    <h2>Courses and Modules</h2>
<div>
    <table class="table">
        <thead>
            <tr>
                <th>
                    Course Name
                </th>
                <th>
                    Modules
                </th>
                <th>
                    Sequence
                </th>
            </tr>
        </thead>
        <tbody>
            <!-- TODO: Display the data from the CoursesAndModules collection -->
        </tbody>
    </table>
</div>

  8. Remplacez le commentaire <!-- TODO: Display the data from the CoursesAndModules collection --\> par la balise suivante.

    @foreach(var courseAndModule in Model.CoursesAndModules)
{
<tr>
    <td>
        @Html.DisplayFor(courseName => courseAndModule.CourseName)
    </td>
    <td>
        @Html.DisplayFor(moduleTitle => courseAndModule.ModuleTitle)
    </td>
    <td>
        @Html.DisplayFor(sequence => courseAndModule.Sequence)
    </td>
</tr>
}

    Ce code itère au sein des lignes dans le modèle, puis produit les données dans chaque champ.

    Le fichier Index.cshtml complété doit contenir le code suivant.

    @page
@model CoursesAndModulesModel
@{
    ViewData["Title"] = "Home page";
}

<h2>Courses and Modules</h2>
<div>
    <table class="table">
        <thead>
            <tr>
                <th>
                    Course Name
                </th>
                <th>
                    Modules
                </th>
                <th>
                    Sequence
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach(var courseAndModule in Model.CoursesAndModules)
            {
            <tr>
                <td>
                    @Html.DisplayFor(courseName => courseAndModule.CourseName)
                </td>
                <td>
                    @Html.DisplayFor(moduleTitle => courseAndModule.ModuleTitle)
                </td>
                <td>
                    @Html.DisplayFor(sequence => courseAndModule.Sequence)
                </td>
            </tr>
            }
        </tbody>
    </table>
</div>

  9. Enregistrez le fichier et fermez l’éditeur de code.

Déployer et tester l’application web mise à jour

Avec l’application entièrement configurée pour récupérer et présenter les données de cours à l’utilisateur, vous pouvez déployer la version mise à jour.

  1. Dans Cloud Shell, revenez au dossier education.

    cd ~/education

  2. Exécutez les commandes suivantes pour générer et déployer l’application web mise à jour.

    az webapp up \
    --resource-group <rgn>[Sandbox resource group]</rgn> \
    --name $WEBAPPNAME

  3. Une fois la nouvelle application web déployée, sélectionnez le lien de l’application. Elle doit maintenant présenter la liste des cours et des modules avec les données stockées dans la base de données.

    Screenshot of the education web app running, showing the data.