Gyakorlat – Egy ASP.NET-alkalmazást csatlakoztatása az Azure SQL Database-hez

10 perc

A rendszer létrehozta az adatbázist. Most már konfigurálhat és helyezhet üzembe egy webalkalmazást, amellyel a tudományos tanácsadók megvitathatják a kurzusokat és a tanulmányi terveket a diákokkal. Az alkalmazás a System.Data.SqlClient kódtár használatával lekéri és megjeleníti azokat a kurzusokat és modulokat, amelyeket a diákoknak át kell adniuk a kurzus elvégzéséhez.

Az időmegtakarítás érdekében egy már meglévő webalkalmazást használunk, és bemutatjuk, hogyan adhatja hozzá az alkalmazást az adatbázishoz összekötő kódot. A következő ábra megmutatja az alkalmazás elsődleges összetevőit:

High-level view of the application structure.

A webalkalmazás konfigurálásához tegye a következőket:

Létrehoz egy osztályt, amelyben megtalálható a kurzus neve, a modul címe és a modulok sorrendisége az adatbázisban.
Létrehoz egy hozzáférés-vezérlési osztályt, amely kinyeri az információt az adatbázisból.
Szerkeszti a webalkalmazás kezdőlapja mögötti kódot, hogy létrehozzon egy adathozzáférés-vezérlő objektumot és lekérje az adatokat.
Szerkeszti a kezdőlapot, hogy az megjelenítse az adatokat.

A már létező webalkalmazás telepítése és futtatása

Módosítsa a munkakönyvtárat a education mappára.
```
cd ~/education
```

Futtassa az alábbi parancsokat a kezdeti webalkalmazás összeállításához és üzembe helyezéséhez.

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

A webalkalmazás üzembe helyezésekor a kimenet egy App_url jelenít meg a webhely URL-címével. Nyissa meg ezt a helyet egy új lapon.

A cél az, hogy a webalkalmazás a kurzusok listáját és az egyes kurzusokat alkotó modulokat jelenítse meg. Az alkalmazás egyelőre nem kér le és nem jelenít meg adatokat. Ezért úgy kell módosítania a kódot, hogy lekérje az adatokat az adatbázisból, majd megjelenítse azokat.

Az adatokat lekérő kód hozzáadása a webalkalmazáshoz

Adja hozzá az alkalmazáshoz a kódot, amely lekéri a kurzusadatokat az adatbázisból.

A Cloud Shellben lépjen a education/Models mappára.
```
cd ~/education/Models
```
Ez a mappa két fájlt CoursesAndModules.cs és DataAccessController.cs.

A fájl megnyitásához használja a kódszerkesztőt CoursesAndModules.cs .

code CoursesAndModules.cs

Ez a fájl egy üres CoursesAndModules osztályt tartalmaz.

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

Az // TODO: Define the CourseName, ModuleTitle, and Sequence read-only properties megjegyzést írja felül az alábbi kóddal.
```
public string CourseName { get; }
public string ModuleTitle { get; }
public int Sequence { get; }
```
Ez a kód olyan írásvédett mezőket határoz meg, amelyek a webalkalmazás által megjelenített egyes sorok adatait tartalmazzák.

A // TODO: Create a constructor that initializes the fields behind the properties megjegyzést cserélje le az alábbi konstruktorra.

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

Ez a konstruktor feltölti a mezőket a megjelenítendő adatokkal. A teljes fájlnak a következő kódot kell tartalmaznia.

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

Mentse a fájlt a Ctrl+S billentyűkombinációval, és zárja be a kódszerkesztőt a Ctrl+Q billentyűkombináció lenyomásával.

A fájl megnyitásához használja a kódszerkesztőt DataAccessController.cs .

code DataAccessController.cs

Ez a fájl egy DataAccessController nevű osztályt tartalmaz. Ez az osztály tartalmazza az adatbázishoz való csatlakozáshoz és a kurzus- és moduladatok lekéréséhez szükséges adatelérési logikát. Feltölti az CoursesAndModules objektumok listáját ezekkel az adatokkal.

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

Hagyja nyitva a kódszerkesztőt, és váltson át az Azure Portalra.
Az Azure Portal menüjében válassza ki az SQL-adatbázisokat, majd válassza ki az adatbázist. Megjelenik a coursedatabaseNNN SQL-adatbázisa.
A bal oldali menüpanel Gépház területén válassza Csatlakozás ion sztringeket. Másolja a vágólapra az ADO.NET kapcsolati sztringjét.

Térjen vissza a kódszerkesztőbe. Cserélje le a connectionString változó értékét a vágólapról beillesztett értékre. A kapcsolati sztring tekintse meg az értéket azuresqltartalmazó szövegetUser ID. Cserélje le a szöveget {your_password} a fiók jelszavára.

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;";

A //TODO: Connect to the database megjegyzés után cserélje le a megjegyzésként megjelölt using utasítást a következő kódra.
```
using (SqlConnection con = new SqlConnection(connectionString))
```
Ez a kód egy új SqlConnection objektumot hoz létre, amely a kapcsolati sztring felhasználásával csatlakozik az adatbázishoz.

A // TODO: Specify the Transact-SQL query to run megjegyzést cserélje le az alábbi utasításokra.

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;

Az SqlCommand objektum egy Transact-SQL (T-SQL) utasítást tartalmaz, amely lekéri az összes kurzus és modul adatait. Összekapcsolja őket a táblázat adataival dbo.StudyPlan .

Az // TODO: Execute the query megjegyzést írja felül az alábbi kóddal.
```
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
```
Ezek az utasítások megnyitják az adatbázishoz való kapcsolatot, és futtatják a T-SQL utasítást. Használhatja az SqlDataReader objektumot, ha soronként szeretné lekérni az eredményeket.
A // TODO: Read the data a row at a time megjegyzést cserélje le az alábbi kódrészletre.
```
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);
}
```
A blokk végighalad azokon a sorokon, amelyeket az SqlDataReader objektum visszaadott. A kód kinyeri az adatokat minden sor mezőiből, és felhasználja őket egy új CoursesAndModules objektum adatokkal történő feltöltéséhez. Ez az objektum később egy listába kerül.

A // TODO: Close the database connection megjegyzést cserélje le az alábbi utasításra.

con.Close();

Ez az utasítás bezárja az adatbázissal fennálló kapcsolatot, és felszabadítja az összes lefoglalt erőforrást.

A kész osztálynak tartalmaznia kell a következő kódot, amelynek része az adatbázishoz tartozó kapcsolati sztring.

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

Mentse a fájlt, és zárja be a kódszerkesztőt.

Az adatokat megjelenítő kód hozzáadása a webalkalmazáshoz

Az alkalmazás már le tudja kérni a kurzusadatokat. Most módosítsa úgy az alkalmazást, hogy megjelenítse az adatokat a felhasználó számára.

A Cloud Shellben lépjen a education/Pages mappára.
```
cd ~/education/Pages
```
Ez a mappa tartalmazza a .cshtml-oldalakat és a kódfájlokat, amelyeket a webalkalmazás az információk megjelenítéséhez használ.

A fájl megnyitásához használja a kódszerkesztőt Index.cshtml.cs .

code Index.cshtml.cs

Ez a fájl tartalmazza a kódot, amelyet a kezdőoldal futtat a megjelenítésekor. A kód egy CoursesAndModulesModel osztályt határoz meg. Az indexlap ezzel a modellel jeleníti meg a kurzusok és modulok részleteit. Ebbe a fájlba kell beszúrnia a kódot, amely egy DataAccessController objektum használatával lekéri ezeket az adatokat.

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

Új Index.cshtml.csobjektum létrehozásához cserélje le a megjegyzést // TODO: Create a DataAccessController objectDataAccessController a következő kódra.
```
DataAccessController dac = new DataAccessController();
```
Az // TODO: Create a collection for holding CoursesAndModules object megjegyzést írja felül az alábbi kóddal.
```
public List<CoursesAndModules> CoursesAndModules;
```

Az OnGet metódusban cserélje le a // TODO: Retrieve the data using the DataAccessController object and populate the CoursesAndModules object megjegyzést a következő kódra. Ez a kód a DataAccessController objektumot használja arra, hogy feltöltse a listát az adatbázisból érkező adatokkal.

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

A teljes fájlnak a következő kódot kell tartalmaznia.

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

Mentse a fájlt, és zárja be a kódszerkesztőt.

A fájl Index.cshtmlmegnyitásához használja a kódszerkesztőt.

code Index.cshtml

Ez a fájl tartalmazza a kezdőoldal megjelenítési logikáját. Megadja, hogy a CoursesAndModulesModel legyen az adatforrás. Ezt a modellt a beszúrt kód hozza létre és tölti fel adatokkal.

Az oldal HTML-adatokat használ a modellből származó adatok megjelenítéséhez. Jelenleg az oldal csak a tábla fejléceit jeleníti meg. A tábla törzse (<tbody>) üres.

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

A <!-- TODO: Display the data from the CoursesAndModules collection --\> megjegyzést cserélje le az alábbi kódrészletre.

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

Ez a kód végighalad a modell sorain, és megjeleníti minden mező adatait.

A kész Index.cshtml fájlnak tartalmaznia kell a következő kódot.

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

Mentse a fájlt, és zárja be a kódszerkesztőt.

A frissített webalkalmazás üzembe helyezése és tesztelése

Mivel az alkalmazás most már teljesen konfigurálva van ahhoz, hogy lekérje és megjelenítse a kurzusadatokat a felhasználónak, üzembe helyezheti a frissített verziót.

A Cloud Shellben térjen vissza a education mappához.
```
cd ~/education
```
Futtassa az alábbi parancsokat, hogy létrehozza és üzembe helyezze a frissített webalkalmazást.
```
az webapp up \
    --resource-group <rgn>[Sandbox resource group]</rgn> \
    --name $WEBAPPNAME
```
Az új webalkalmazás üzembe helyezése után válassza ki az alkalmazásra mutató hivatkozást. Most már meg kell jelenítenie a kurzusok és modulok listáját az adatbázisban tárolt adatokkal.

Folytatás

Gyakorlat – Egy ASP.NET-alkalmazást csatlakoztatása az Azure SQL Database-hez

A már létező webalkalmazás telepítése és futtatása

Az adatokat lekérő kód hozzáadása a webalkalmazáshoz

Az adatokat megjelenítő kód hozzáadása a webalkalmazáshoz

A frissített webalkalmazás üzembe helyezése és tesztelése

Visszajelzés