Oefening: Verbinding maken tussen een ASP.NET-toepassing en Azure SQL Database

  • 10 minuten

De database wordt gemaakt. U kunt nu een webtoepassing configureren en implementeren die academische adviseurs kunnen gebruiken om cursussen en studieplannen met studenten te bespreken. De app gebruikt de System.Data.SqlClient bibliotheek om de details van cursussen en modules op te halen en weer te geven die een student moet doorgeven om een cursus te voltooien.

Om tijd te besparen, gebruiken we een bestaande webtoepassing en laten we u zien hoe u de code toevoegt die deze app verbindt met uw database. In het volgende diagram ziet u de primaire onderdelen van deze app:

High-level view of the application structure.

Ga als volgt te werk om de webtoepassing te configureren:

  • Een klasse maken die de naam van de cursus, de titel van de module en de volgorde voor elke module in de database bevat.
  • Een controllerklasse voor gegevenstoegang maken waarmee de gegevens worden opgehaald uit de database.
  • De code bewerken achter de indexpagina in de web-app voor het maken van een controllerobject voor gegevenstoegang en het ophalen van de gegevens.
  • De indexpagina bewerken om de gegevens weer te geven.

De bestaande web-app implementeren en uitvoeren

  1. Wijzig de werkmap in de education map.

    cd ~/education

  2. Voer de volgende opdrachten uit om de eerste webtoepassing te bouwen en implementeren.

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

  3. Wanneer de webtoepassing is geïmplementeerd, ziet u in de uitvoer een App_url met de URL van de website. Open deze site in een nieuw tabblad.

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

    In de web-app wilt u een lijst weergeven met cursussen en de modules waaruit deze cursus bestaat. Momenteel worden deze gegevens niet door de app opgehaald of weergegeven. U moet de code dus bijwerken om de gegevens uit de database op te halen en weer te geven.

Code toevoegen aan de web-app om gegevens op te halen

Nu gaat u aan de app de code toevoegen om de cursusgegevens uit de database op te halen.

  1. Ga in Cloud Shell naar de education/Models map.

    cd ~/education/Models

    Deze map bevat twee bestanden en CoursesAndModules.csDataAccessController.cs.

  2. Gebruik de code-editor om het CoursesAndModules.cs bestand te openen.

    code CoursesAndModules.cs

    Dit bestand bevat een lege klasse met de naam 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. Vervang de opmerking // TODO: Define the CourseName, ModuleTitle, and Sequence read-only properties door de volgende code.

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

    Deze code definieert een set alleen-lezenvelden die de gegevens bevatten voor elke rij die door de web-app wordt weergegeven.

  4. Vervang de opmerking // TODO: Create a constructor that initializes the fields behind the properties door de volgende constructor.

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

    Met deze constructor worden de velden gevuld met de gegevens die moeten worden weergegeven. Het volledige bestand bevat de volgende code.

    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. Sla het bestand op door op Ctrl+S te drukken en sluit de code-editor door op Ctrl+Q te drukken.

  6. Gebruik de code-editor om het DataAccessController.cs bestand te openen.

    code DataAccessController.cs

    Dit bestand bevat een klasse met de naam DataAccessController. Deze klasse bevat de logica voor gegevenstoegang om verbinding te maken met de database en de cursus- en modulegegevens op te halen. Er wordt een lijst CoursesAndModules met objecten gevuld met deze gegevens.

    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. Laat de code-editor open en schakel over naar de Azure-portal.

  8. Selecteer SQL-databases in het menu van Azure Portal en selecteer vervolgens uw database. De SQL-database voor coursedatabaseNNN wordt weergegeven.

  9. Selecteer in het linkermenuvenster onder Instellingen Verbinding maken iontekenreeksen. Kopieer de verbindingsreeks voor ADO.NET naar het klembord.

    The connection string pane in the Azure portal.

  10. Ga terug naar de code-editor. Vervang de waarde van de variabele connectionString door de waarde in het klembord. Zie in de verbindingsreeks de tekst User ID met de waardeazuresql. Vervang de tekst {your_password} door het wachtwoord voor dit account.

    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. Vervang na de opmerking //TODO: Connect to the database de uitgeschakelde using-instructie door de volgende code.

    using (SqlConnection con = new SqlConnection(connectionString))

    Met deze code maakt u een nieuw SqlConnection-object dat gebruikmaakt van de verbindingsreeks om verbinding te maken met de database.

  12. Vervang de opmerking // TODO: Specify the Transact-SQL query to run door de volgende instructies.

    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;

    Het SqlCommand object bevat een Transact-SQL-instructie (T-SQL) waarmee de gegevens voor alle cursussen en modules worden opgehaald. Hiermee worden ze samengevoegd met behulp van de informatie in de dbo.StudyPlan tabel.

  13. Vervang de opmerking // TODO: Execute the query door de volgende code.

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

    Met deze instructies wordt de verbinding met de database geopend en wordt de T-SQL-instructie uitgevoerd. U kunt het SqlDataReader-object gebruiken om de resultaten rij voor rij op te halen.

  14. Vervang de opmerking // TODO: Read the data a row at a time door het volgende codeblok.

    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);
}

    Dit blok doorloopt de rijen die worden geretourneerd in het SqlDataReader-object. Met de code worden de gegevens in de velden in elke rij geëxtraheerd en de gegevens worden gebruikt voor het vullen van een nieuw CoursesAndModules-object. Dit object wordt vervolgens toegevoegd aan een lijst.

  15. Vervang de opmerking // TODO: Close the database connection door de volgende instructie.

    con.Close();

    Met deze instructie wordt de verbinding met de database afgesloten en worden de gebruikte resources vrijgegeven.

    De voltooide klasse bevat de volgende code, waaronder de verbindingsreeks voor uw database.

    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. Sla het bestand op en sluit de Code-editor.

Code toevoegen aan de web-app om de gegevens weer te geven

Met de app kunnen nu de cursusgegevens worden opgehaald. Werk nu de app bij om de gegevens voor de gebruiker te kunnen weergeven.

  1. Ga in Cloud Shell naar de education/Pages map.

    cd ~/education/Pages

    Deze map bevat de CSHTML-pagina's en codebestanden die door de web-app worden gebruikt om informatie weer te geven.

  2. Gebruik de code-editor om het Index.cshtml.cs bestand te openen.

    code Index.cshtml.cs

    Dit bestand bevat de code die door de indexpagina wordt uitgevoerd wanneer deze wordt weergegeven. In de code wordt de klasse CoursesAndModulesModel gedefinieerd. Op de indexpagina wordt dit model gebruikt om de details van cursussen en modules weer te geven. In dit bestand moet u de code toevoegen die gebruikmaakt van een DataAccessController-object om deze gegevens op te halen.

    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. Vervang Index.cshtml.csde opmerking // TODO: Create a DataAccessController object door de volgende code om een nieuw DataAccessController object te maken.

    DataAccessController dac = new DataAccessController();

  4. Vervang de opmerking // TODO: Create a collection for holding CoursesAndModules object door de volgende code.

    public List<CoursesAndModules> CoursesAndModules;

  5. Vervang in de methode OnGet de opmerking // TODO: Retrieve the data using the DataAccessController object and populate the CoursesAndModules object door de volgende code. Voor deze code wordt het DataAccessController-object gebruikt om de lijst te vullen met de gegevens uit de database.

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

    Het voltooide bestand bevat de volgende code.

    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. Sla het bestand op en sluit de code-editor.

  7. Gebruik de code-editor om het bestand te openen Index.cshtml.

    code Index.cshtml

    Dit bestand bevat de weergavelogica voor de indexpagina. Hiermee wordt CoursesAndModulesModel bepaald als gegevensbron. Met de code die u hebt toegevoegd, maakt en vult u dit model.

    De pagina maakt gebruik van HTML-gegevens om de gegevens uit het model weer te geven. Momenteel worden op de pagina alleen de tabelkopteksten weergegeven. De hoofdtekst van de tabel (<tbody>) is leeg.

    <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. Vervang de opmerking <!-- TODO: Display the data from the CoursesAndModules collection --\> door de volgende markeringen.

    @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>
}

    Deze code doorloopt de rijen in het model en voert de gegevens naar elk veld uit.

    Het voltooide Index.cshtml bestand moet de volgende code bevatten.

    @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. Sla het bestand op en sluit de code-editor.

De bijgewerkte web-app implementeren en testen

Nu de app volledig is geconfigureerd voor het ophalen en weergeven van de cursusgegevens voor de gebruiker, kunt u de bijgewerkte versie implementeren.

  1. Ga in Cloud Shell terug naar de education map.

    cd ~/education

  2. Voer de volgende opdrachten uit om de bijgewerkte web-app te bouwen en implementeren.

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

  3. Nadat de nieuwe web-app is geïmplementeerd, selecteert u de koppeling voor de app. Er wordt nu een lijst weergegeven met cursussen en modules met behulp van de gegevens die in de database zijn opgeslagen.

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