Alıştırma - ASP.NET uygulamasını Azure SQL Veritabanı'na bağlama

  • 10 dakika

Veritabanınız oluşturulur. Artık akademik danışmanların öğrencilerle ders ve çalışma planlarını tartışmak için kullanabileceği bir web uygulaması yapılandırabilir ve dağıtabilirsiniz. Uygulama, bir öğrencinin bir kursu tamamlamak için geçmesi gereken derslerin ve modüllerin ayrıntılarını almak ve görüntülemek için kitaplığını kullanır System.Data.SqlClient .

Zaman kazanmak için önceden var olan bir web uygulaması kullanıyoruz ve bu uygulamayı veritabanınıza bağlayan kodu nasıl ekleyebileceğinizi gösteriyoruz. Aşağıdaki diyagramda bu uygulamanın birincil bileşenleri gösterilmektedir:

High-level view of the application structure.

Web uygulamasını yapılandırmak için aşağıdakileri yapın:

  • Veritabanında ders adını, modül başlığını ve her modülün sırasını barındıracak bir sınıf oluşturma.
  • Veritabanından bilgileri alacak bir veri erişim denetleyicisi sınıfı oluşturma.
  • Web uygulamasında dizin sayfasının arka planındaki kodu düzenleyerek veri erişim denetleyicisi nesnesi oluşturma ve verileri getirme.
  • Verileri görüntülemek için dizin sayfasını düzenleme.

Önceden var olan web uygulamasını dağıtma ve çalıştırma

  1. Çalışma dizininizi klasörüne education değiştirin.

    cd ~/education

  2. İlk web uygulamasını derlemek ve dağıtmak için aşağıdaki kodu çalıştırın.

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

  3. Web uygulaması dağıtıldığında, çıktı web sitesinin URL'sini içeren bir App_url gösterir. Bu siteyi yeni bir sekmede açın.

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

    Web uygulamasının, derslerin listesini ve bu dersleri oluşturan modülleri görüntülemesini istiyorsunuz. Şu anda uygulama bu verileri almıyor veya görüntülemiyor. Bu nedenle, verileri veritabanından almak ve görüntülemek için kodu güncellemeniz gerekir.

Verileri almak için web uygulamasına kod ekleme

Şimdi uygulamaya veritabanından ders verilerini alacak kodu ekleyelim.

  1. Cloud Shell'de klasörüne education/Models gidin.

    cd ~/education/Models

    Bu klasör ve adlı iki dosya CoursesAndModules.csDataAccessController.csiçerir.

  2. Dosyayı açmak için kod düzenleyicisini CoursesAndModules.cs kullanın.

    code CoursesAndModules.cs

    Bu dosya, CoursesAndModules adlı bir boş sınıf içerir.

    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. // TODO: Define the CourseName, ModuleTitle, and Sequence read-only properties açıklamasını aşağıdaki kodla değiştirin.

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

    Bu kod, web uygulaması tarafından görüntülenen her satıra ait verileri içeren bir salt okunur alan kümesini tanımlar.

  4. // TODO: Create a constructor that initializes the fields behind the properties açıklamasını aşağıdaki oluşturucuyla değiştirin.

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

    Bu oluşturucu alanları görüntülenecek verilerle doldurur. Dosyanın tamamı aşağıdaki koddan oluşmalıdır.

    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. Ctrl+S tuşlarına basarak dosyayı kaydedin ve Ctrl+Q tuşlarına basarak kod düzenleyicisini kapatın.

  6. Dosyayı açmak için kod düzenleyicisini DataAccessController.cs kullanın.

    code DataAccessController.cs

    Bu dosya DataAccessController adlı bir sınıf içerir. Bu sınıf, veritabanına bağlanmak ve kurs ile modül verilerini almak için veri erişim mantığını içerir. Nesne listesini CoursesAndModules bu verilerle doldurur.

    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. Kod düzenleyicisini açık bırakın ve Azure portalına geçin.

  8. Azure portalı menüsünde SQL veritabanları'nı ve ardından veritabanınızı seçin. coursedatabaseNNN için SQL veritabanı görüntülenir.

  9. Sol menü bölmesindeki Ayarlar altında Bağlan dizeleri'ni seçin. ADO.NET bağlantı dizesini panoya kopyalayın.

    The connection string pane in the Azure portal.

  10. Kod düzenleyicisine geri dönün. connectionString değişkeninin değerini panodaki değerle değiştirin. bağlantı dizesi değerini azuresqliçeren metne User ID bakın. Metni {your_password} bu hesabın parolası ile değiştirin.

    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. //TODO: Connect to the database açıklamasından sonra, açıklama satırı yapılmış using deyimini aşağıdaki kodla değiştirin.

    using (SqlConnection con = new SqlConnection(connectionString))

    Bu kod, veritabanına bağlanmak için bağlantı dizenizi kullanan yeni bir SqlConnection nesnesi oluşturur.

  12. // TODO: Specify the Transact-SQL query to run açıklamasını aşağıdaki deyimlerle değiştirin.

    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;

    nesnesi, SqlCommand tüm kurslar ve modüller için verileri alan bir Transact-SQL (T-SQL) deyimi içerir. Tablodaki dbo.StudyPlan bilgileri kullanarak bunları birleştirir.

  13. // TODO: Execute the query açıklamasını aşağıdaki kodla değiştirin.

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

    Bu deyimler veritabanı bağlantısını açar ve T-SQL deyimini çalıştırır. Sonuçları bir kerede bir satır olarak getirmek için SqlDataReader nesnesini kullanabilirsiniz.

  14. // TODO: Read the data a row at a time açıklamasını aşağıdaki kod bloğuyla değiştirin.

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

    Bu blok, SqlDataReader nesnesinde döndürülen satırlarda yinelenir. Kod, her satırdaki alanlarda yer alan verileri ayıklar ve bunları kullanarak yeni bir CoursesAndModules nesnesi doldurur. Ardından bu nesne listeye eklenir.

  15. // TODO: Close the database connection açıklamasını aşağıdaki deyimle değiştirin.

    con.Close();

    Bu deyim, veritabanı bağlantısını kapatır ve tutulan kaynakları serbest bırakır.

    Tamamlanan sınıf, veritabanınızın bağlantı dizesiyle birlikte aşağıdaki kodu içermelidir.

    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. Dosyayı kaydedin ve Kod düzenleyicisini kapatın.

Verileri görüntülemek için web uygulamasına kod ekleme

Uygulama artık kurs verilerini alabilir. Şimdi verileri kullanıcıya görüntülemek için uygulamayı güncelleştirin.

  1. Cloud Shell'de klasörüne education/Pages gidin.

    cd ~/education/Pages

    Bu klasör, web uygulamasının bilgi görüntülemek için kullandığı .cshtml sayfalarını ve kod dosyalarını içerir.

  2. Dosyayı açmak için kod düzenleyicisini Index.cshtml.cs kullanın.

    code Index.cshtml.cs

    Bu dosya, dizin sayfasının görüntülenirken çalıştırdığı kodu içerir. Bu kod bir CoursesAndModulesModel sınıfını tanımlar. Dizin sayfası, kurs ve modüllerin ayrıntılarını görüntülemek için bu modeli kullanır. Bu dosyada, bu verileri getirmek için DataAccessController nesnesi kullanan kodu eklemeniz gerekir.

    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çindeIndex.cshtml.cs, yeni DataAccessController bir nesne oluşturmak için açıklamasını // TODO: Create a DataAccessController object aşağıdaki kodla değiştirin.

    DataAccessController dac = new DataAccessController();

  4. // TODO: Create a collection for holding CoursesAndModules object açıklamasını aşağıdaki kodla değiştirin.

    public List<CoursesAndModules> CoursesAndModules;

  5. OnGet yönteminde // TODO: Retrieve the data using the DataAccessController object and populate the CoursesAndModules object açıklamasını aşağıdaki kodla değiştirin. Bu kod listeyi veritabanından gelen verilerle doldurmak için DataAccessController nesnesini kullanır.

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

    Tamamlanan dosya aşağıdaki kodu içermelidir.

    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. Dosyayı kaydedin ve kod düzenleyicisini kapatın.

  7. dosyasını Index.cshtmlaçmak için kod düzenleyicisini kullanın.

    code Index.cshtml

    Bu dosya, dizin sayfasının görüntüleme mantığını içerir. Veri kaynağı olarak CoursesAndModulesModel belirtir. Eklediğimiz kod bu modeli oluşturur ve doldurur.

    Sayfa, modeldeki verileri görüntülemek için HTML verilerini kullanır. Şu anda sayfa yalnızca tablo başlıklarını görüntüler. Tablo gövdesi (<tbody>) boştur.

    <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. <!-- TODO: Display the data from the CoursesAndModules collection --\> açıklamasını aşağıdaki işaretleme ile değiştirin.

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

    Bu kod, modeldeki satırlarda yinelenir ve her alana verilerin çıkışını yapar.

    Tamamlanan Index.cshtml dosya aşağıdaki kodu içermelidir.

    @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. Dosyayı kaydedin ve kod düzenleyicisini kapatın.

Güncelleştirilen web uygulamasını dağıtma ve test etme

Uygulama, ders verilerini alacak ve kullanıcıya görüntüleyecek şekilde tümüyle yapılandırıldıktan sonra, güncelleştirilmiş sürümü dağıtabilirsiniz.

  1. Cloud Shell'de klasörüne education dönün.

    cd ~/education

  2. Güncelleştirilmiş web uygulamasını derleyip dağıtmak için aşağıdaki komutları çalıştırın.

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

  3. Yeni web uygulaması dağıtıldıktan sonra uygulamanın bağlantısını seçin. Şimdi, veritabanında depolanan verilerle derslerin ve modüllerin listesini görüntülemelidir.

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