Övning – Ansluta ett ASP.NET-program till Azure SQL Database

  • 10 minuter

Din databas skapas. Nu kan du konfigurera och distribuera en webbapp som akademiska rådgivare kan använda för att diskutera kurser och studieplaner med studenter. Appen använder System.Data.SqlClient biblioteket för att hämta och visa information om kurser och moduler som en student måste godkänna för att slutföra en kurs.

För att spara tid använder vi ett befintligt webbprogram och visar hur du lägger till koden som ansluter den här appen till databasen. I följande diagram visas de primära komponenterna i appen:

High-level view of the application structure.

Gör följande för att konfigurera webbprogrammet:

  • Skapa en klass som innehåller kursnamn, modultitel och sekvens för varje modul i databasen.
  • Skapa en åtkomstkontrollklass som hämtar information från databasen.
  • Redigera koden för indexsidan i webbappen för att skapa ett åtkomstkontrollobjekt och hämta datan.
  • Redigera indexsidan så att den visar data.

Distribuera och köra den befintliga webbappen

  1. Ändra arbetskatalogen education till mappen.

    cd ~/education

  2. Kör följande kommandon för att skapa och distribuera den ursprungliga webbappen.

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

  3. När webbprogrammet har distribuerats visar utdata en App_url med webbadressen till webbplatsen. Öppna webbplatsen i en ny flik.

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

    Du vill att webbappen visar en lista med de kurser och moduler som varje kurs består av. Appen kan för närvarande inte hämta eller visa dessa data. Du måste därför uppdatera koden för att kunna hämta datan från databasen och visa den.

Lägga till kod i webbappen för att hämta data

Nu ska vi lägga till koden i det program som hämtar kursdata från databasen.

  1. Gå till mappen i education/Models Cloud Shell.

    cd ~/education/Models

    Den här mappen innehåller två filer CoursesAndModules.cs och DataAccessController.cs.

  2. Öppna filen med kodredigeraren CoursesAndModules.cs .

    code CoursesAndModules.cs

    Filen innehåller en tom klass med namnet 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. Ersätt kommentaren // TODO: Define the CourseName, ModuleTitle, and Sequence read-only properties med följande kod.

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

    Den här koden definierar en uppsättning skrivskyddade fält som innehåller data för varje rad som visas av webbappen.

  4. Ersätt kommentaren // TODO: Create a constructor that initializes the fields behind the properties med följande konstruktor.

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

    Konstruktorn fyller i fälten med de data som ska visas. Den färdiga filen ska innehålla nedanstående kod.

    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. Spara filen genom att trycka på Ctrl+S och stänga kodredigeraren genom att trycka på Ctrl+Q.

  6. Öppna filen med kodredigeraren DataAccessController.cs .

    code DataAccessController.cs

    Filen innehåller en klass med namnet DataAccessController. Den här klassen innehåller dataåtkomstlogik för att ansluta till databasen och hämta kurs- och moduldata. Den fyller i en lista över CoursesAndModules objekt med dessa data.

    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. Lämna kodredigeraren öppen och växla till Azure-portalen.

  8. På Menyn i Azure-portalen väljer du SQL-databaser och sedan din databas. SQL-databasen för coursedatabaseNNN visas.

  9. Välj Anslut ionssträngar under Inställningar i det vänstra menyfönstret. Kopiera ADO.NET-anslutningssträngen till Urklipp.

    The connection string pane in the Azure portal.

  10. Gå tillbaka till kodredigeraren. Ersätt värdet i connectionString-variabeln med värdet från Urklipp. I anslutningssträng ser du texten User ID med värdet azuresql. Ersätt texten {your_password} med lösenordet för det här kontot.

    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. Efter kommentaren //TODO: Connect to the database, ersätter du den bortkommenterade using-instruktionen med nedanstående kod.

    using (SqlConnection con = new SqlConnection(connectionString))

    Koden skapar ett nytt SqlConnection-objekt som ansluter till databasen med anslutningssträngen.

  12. Ersätt kommentaren // TODO: Specify the Transact-SQL query to run med nedanstående instruktioner.

    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;

    Objektet SqlCommand innehåller en Transact-SQL-instruktion (T-SQL) som hämtar data för alla kurser och moduler. Den kopplar dem med hjälp av informationen i dbo.StudyPlan tabellen.

  13. Ersätt kommentaren // TODO: Execute the query med följande kod.

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

    Dessa instruktioner öppnar anslutningen till databasen och kör T-SQL-instruktionen. Du kan använda SqlDataReader-objektet till att hämta resultaten med en rad i taget.

  14. Ersätt kommentaren // TODO: Read the data a row at a time med följande kodblock.

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

    Blocket itererar de rader som returneras i SqlDataReader-objektet. Koden extraherar data i fälten på varje rad och använder dem till att fylla i ett nytt CoursesAndModules-objekt. Det här objektet läggs sedan till i en lista.

  15. Ersätt kommentaren // TODO: Close the database connection med nedanstående instruktion.

    con.Close();

    Instruktionen stänger anslutningen till databasen och frisläpper de resurser som har använts.

    Den färdiga klassen bör innehålla nedanstående kod, där anslutningssträngen för din databas finns.

    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. Spara filen och stäng kodredigeraren.

Lägg till kod i webbappen för att visa datan

Programmet kan nu hämta kursinformationen. Nu ska du uppdatera appen så att datan visas för användaren.

  1. Gå till mappen i education/Pages Cloud Shell.

    cd ~/education/Pages

    Mappen innehåller de .cshtml-sidor och kodfiler som webbappen använder för att visa information.

  2. Öppna filen med kodredigeraren Index.cshtml.cs .

    code Index.cshtml.cs

    Filen innehåller kod som indexsidan kör när den visas. Koden definierar klassen CoursesAndModulesModel. Indexsidan använder den här modellen för att visa information om kurser och moduler. I filen måste du lägga till kod som använder ett DataAccessController-objekt för att hämta dessa data.

    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. I Index.cshtml.csersätter du kommentaren // TODO: Create a DataAccessController object med följande kod för att skapa ett nytt DataAccessController objekt.

    DataAccessController dac = new DataAccessController();

  4. Ersätt kommentaren // TODO: Create a collection for holding CoursesAndModules object med följande kod.

    public List<CoursesAndModules> CoursesAndModules;

  5. Ersätt kommentaren // TODO: Retrieve the data using the DataAccessController object and populate the CoursesAndModules object med nedanstående kod i OnGet-metoden. Koden använder DataAccessController-objektet till att fylla i listan med data från databasen.

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

    Den färdiga filen ska innehålla nedanstående kod.

    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. Spara filen och stäng kodredigeraren.

  7. Använd kodredigeraren för att öppna filen Index.cshtml.

    code Index.cshtml

    Filen innehåller visningslogik för indexsidan. Den anger CoursesAndModulesModel som datakälla. Koden som vi lade till skapar och fyller i modellen.

    Sidan använder HTML-data till att visa data från modellen. För närvarande visar sidan bara tabellhuvudena. Själva tabellen (<tbody>) är tom.

    <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. Ersätt kommentaren <!-- TODO: Display the data from the CoursesAndModules collection --\> med nedanstående markering.

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

    Koden itererar raderna i modellen och visar datan i varje fält.

    Den slutförda Index.cshtml filen ska innehålla följande kod.

    @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. Spara filen och stäng kodredigeraren.

Distribuera och testa den uppdaterade webbappen

När programmet är konfigurerat till att hämta och visa kursdata för användaren, kan du distribuera den uppdaterade versionen.

  1. Gå tillbaka till mappen i education Cloud Shell.

    cd ~/education

  2. Kör följande kommandon för att skapa och distribuera den uppdaterade webbappen.

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

  3. När den nya webbappen har distribuerats väljer du länken för appen. Den bör nu visa en lista över kurser och moduler med hjälp av de data som lagras i databasen.

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