Bagikan melalui


Tutorial: Menyambungkan aplikasi ASP.NET Core ke SQL Server menggunakan .NET Aspire dan Entity Framework Core

Dalam tutorial ini, Anda membuat aplikasi ASP.NET Core yang menggunakan integrasi .NET AspireEntity Framework CoreSQL Server untuk terhubung ke SQL Server untuk membaca dan menulis data tiket dukungan. Entity Framework Core adalah pemeta relasional objek sumber terbuka yang ringan, dapat diperluas, yang memungkinkan pengembang .NET bekerja dengan database menggunakan objek .NET. Anda akan mempelajari cara:

  • Membuat aplikasi .NET dasar yang disiapkan untuk menggunakan integrasi .NET Aspire
  • Menambahkan integrasi .NET Aspire untuk menyambungkan ke SQL Server
  • Mengonfigurasi dan menggunakan fitur Komponen .NET.NET Aspire untuk membaca dan menulis dari database

Prasyarat

Untuk bekerja dengan .NET.NET Aspire, Anda memerlukan hal berikut yang diinstal secara lokal:

Untuk informasi selengkapnya, lihat penyiapan dan alat .NET.NET Aspire, dan .NET.NET Aspire SDK.

Membuat solusi sampel

  1. Di bagian atas Visual Studio, navigasikan ke File>Baru>Proyek.
  2. Di jendela dialog, cari Blazor dan pilih Blazor Web App. Pilih Berikutnya.
  3. Pada layar Konfigurasikan proyek yang baru:
    • Masukkan Nama Proyek dari AspireSQLEFCore.
    • Biarkan nilai lainnya di defaultnya dan pilih Berikutnya.
  4. Pada layar informasi tambahan:
    • Pastikan .NET 9.0 dipilih.
    • Pastikan mode render interaktif diatur ke None.
    • Periksa opsi Enlist in .NET.NET Aspire orkestrasi dan pilih Buat.

Visual Studio membuat solusi ASP.NET Core baru yang terstruktur untuk menggunakan .NET Aspire. Solusinya terdiri dari proyek-proyek berikut:

  • AspireSQLEFCore: Proyek Blazor yang bergantung pada default layanan.
  • AspireSQLEFCore.AppHost: Proyek orkestrator yang dirancang untuk menyambungkan dan mengonfigurasi berbagai proyek dan layanan aplikasi Anda. Orkestrator harus ditetapkan sebagai proyek awal.
  • AspireSQLEFCore.ServiceDefaults: Pustaka kelas bersama untuk menyimpan konfigurasi yang dapat digunakan kembali di seluruh proyek dalam solusi Anda.

Membuat model database dan kelas konteks

Untuk mewakili permintaan dukungan yang dikirimkan pengguna, tambahkan kelas model berikut di akar proyek AspireSQLEFCore.

using System.ComponentModel.DataAnnotations;

namespace AspireSQLEFCore;

public sealed class SupportTicket
{
    public int Id { get; set; }
    [Required]
    public string Title { get; set; } = string.Empty;
    [Required]
    public string Description { get; set; } = string.Empty;
}

Tambahkan kelas konteks data berikut di akar proyek AspireSQLEFCore. Kelas mewarisi System.Data.Entity.DbContext untuk bekerja dengan Entity Framework dan merepresentasikan basis data Anda.

using Microsoft.EntityFrameworkCore;
using System.Reflection.Metadata;

namespace AspireSQLEFCore;

public class TicketContext(DbContextOptions options) : DbContext(options)
{
    public DbSet<SupportTicket> Tickets => Set<SupportTicket>();
}

Menambahkan integrasi .NET Aspire ke aplikasi Blazor

Tambahkan paket pustaka Sql ke proyek AspireSQLEFCore Anda:

dotnet add package Aspire.Microsoft.EntityFrameworkCore.SqlServer

Proyek AspireSQLEFCore Anda sekarang siap untuk menggunakan integrasi .NET.NET Aspire. Berikut adalah file AspireSQLEFCore.csproj yang diperbarui:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Aspire.Microsoft.EntityFrameworkCore.SqlServer" Version="9.1.0" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\AspireSQLEFCore.ServiceDefaults\AspireSQLEFCore.ServiceDefaults.csproj" />
  </ItemGroup>

</Project>

Mengonfigurasi integrasi .NET.NET Aspire

Dalam file Program.cs di proyek AspireSQLEFCore, tambahkan pemanggilan ke metode ekstensi AddSqlServerDbContext setelah pembuatan builder tetapi sebelum pemanggilan ke AddServiceDefaults. Untuk informasi selengkapnya, lihat default layanan .NET.NET Aspire. Berikan nama string koneksi Anda sebagai parameter.

using AspireSQLEFCore;
using AspireSQLEFCore.Components;

var builder = WebApplication.CreateBuilder(args);
builder.AddSqlServerDbContext<TicketContext>("sqldata");

builder.AddServiceDefaults();

// Add services to the container.
builder.Services.AddRazorComponents().AddInteractiveServerComponents();

var app = builder.Build();

app.MapDefaultEndpoints();

Metode ini menyelesaikan tugas-tugas berikut:

  • Mendaftarkan TicketContext dengan kontainer DI untuk menyambungkan ke kontainer Azure SQL Database.
  • Aktifkan pemeriksaan kesehatan, pengelogan, dan telemetri yang sesuai secara otomatis.

Buat database

Saat mengembangkan secara lokal, Anda perlu membuat database di dalam kontainer SQL Server. Perbarui file Program.cs dengan kode berikut:

using AspireSQLEFCore;
using AspireSQLEFCore.Components;

var builder = WebApplication.CreateBuilder(args);
builder.AddSqlServerDbContext<TicketContext>("sqldata");

builder.AddServiceDefaults();

// Add services to the container.
builder.Services.AddRazorComponents().AddInteractiveServerComponents();

var app = builder.Build();

app.MapDefaultEndpoints();

if (app.Environment.IsDevelopment())
{
    using (var scope = app.Services.CreateScope())
    {
        var context = scope.ServiceProvider.GetRequiredService<TicketContext>();
        context.Database.EnsureCreated();
    }
}
else
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days.
    // You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

Kode sebelumnya:

  • Memeriksa apakah aplikasi berjalan di lingkungan pengembangan.
  • Jika ya, layanan ini mengambil layanan TicketContext dari kontainer DI dan memanggil Database.EnsureCreated() untuk membuat database jika belum ada.

Nota

Perhatikan bahwa EnsureCreated() tidak cocok untuk lingkungan produksi, dan hanya membuat database seperti yang didefinisikan dalam konteks. Ini tidak menerapkan migrasi apa pun. Untuk informasi selengkapnya tentang migrasi Entity Framework Core di .NET Aspire, lihat Menerapkan migrasi Entity Framework Core di .NET Aspire.

Membuat formulir

Aplikasi ini memerlukan formulir agar pengguna dapat mengirimkan informasi tiket dukungan dan menyimpan entri ke database.

Gunakan markup Razor berikut untuk membuat formulir dasar, menggantikan konten file Home.razor di direktori AspireSQLEFCore/Components/Pages:

@page "/"
@inject TicketContext context
@using Microsoft.EntityFrameworkCore

<div class="row">
    <div class="col-md-6">
        <div>
            <h1 class="display-4">Request Support</h1>
        </div>
        <EditForm Model="@Ticket" FormName="Tickets" method="post"
                  OnValidSubmit="@HandleValidSubmit" class="mb-4">
            <DataAnnotationsValidator />
            <div class="mb-4">
                <label>Issue Title</label>
                <InputText class="form-control" @bind-Value="@Ticket.Title" />
                <ValidationMessage For="() => Ticket.Title" />
            </div>
            <div class="mb-4">
                <label>Issue Description</label>
                <InputText class="form-control" @bind-Value="@Ticket.Description" />
                <ValidationMessage For="() => Ticket.Description" />
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
            <button class="btn btn-danger mx-2" type="reset" @onclick=@ClearForm>Clear</button>
        </EditForm>

        <table class="table table-striped">
            @foreach (var ticket in Tickets)
            {
                <tr>
                    <td>@ticket.Id</td>
                    <td>@ticket.Title</td>
                    <td>@ticket.Description</td>
                </tr>
            }
        </table>
    </div>
</div>

@code {
    [SupplyParameterFromForm(FormName = "Tickets")]
    private SupportTicket Ticket { get; set; } = new();

    private List<SupportTicket> Tickets = [];

    private void ClearForm() => Ticket = new();

    protected override async Task OnInitializedAsync()
    {
        Tickets = await context.Tickets.ToListAsync();
    }

    private async Task HandleValidSubmit()
    {
        context.Tickets.Add(Ticket);

        await context.SaveChangesAsync();

        Tickets = await context.Tickets.ToListAsync();

        ClearForm();
    }
}

Untuk informasi selengkapnya tentang membuat formulir di Blazor, lihat gambaran umum formulir ASP.NET CoreBlazor.

Mengonfigurasi AppHost

Proyek AspireSQLEFCore.AppHost adalah pengatur untuk aplikasi Anda. Ini bertanggung jawab untuk menghubungkan dan mengonfigurasi berbagai proyek dan layanan aplikasi Anda. Orkestrator harus ditetapkan sebagai proyek awal.

Tambahkan paket Hosting Sql NuGet ke proyek AspireStorage.AppHost Anda:

dotnet add package Aspire.Hosting.SqlServer

Ganti konten file Program.cs di proyek AspireSQLEFCore.AppHost dengan kode berikut:

var builder = DistributedApplication.CreateBuilder(args);

var sql = builder.AddSqlServer("sql")
                 .AddDatabase("sqldata");

builder.AddProject<Projects.AspireSQLEFCore>("aspiresql")
       .WithReference(sql)
       .WaitFor(sql);

builder.Build().Run();

Kode sebelumnya menambahkan sumber daya Kontainer SQL Server ke aplikasi Anda dan mengonfigurasi koneksi ke database yang disebut sqldata. Kelas Kerangka Kerja Entitas yang Anda konfigurasi sebelumnya akan secara otomatis menggunakan koneksi ini saat bermigrasi dan menyambungkan ke database.

Menjalankan dan menguji aplikasi secara lokal

Aplikasi sampel sekarang siap untuk pengujian. Verifikasi bahwa data formulir yang dikirimkan disimpan ke database dengan menyelesaikan langkah-langkah berikut:

  1. Pilih tombol jalankan di bagian atas Visual Studio (atau F5) untuk meluncurkan dasbor proyek .NET.NET Aspire Anda di browser.

  2. Pada halaman proyek, di baris AspireSQLEFCore, klik tautan di kolom Endpoint untuk membuka UI aplikasi Anda.

    Cuplikan layar yang memperlihatkan halaman beranda aplikasi dukungan .NET.NET Aspire.

  3. Masukkan data sampel ke bidang formulir Title dan Description.

  4. Pilih tombol Kirim, dan formulir mengirimkan tiket dukungan untuk diproses — (lalu pilih Hapus untuk menghapus formulir).

  5. Data yang Anda kirimkan ditampilkan dalam tabel di bagian bawah halaman saat halaman dimuat ulang.

  6. Tutup tab browser web yang menampilkan aplikasi web AspireSQL dan dasbor .NET.NET Aspire.

  7. Beralih ke Visual Studio dan, untuk menghentikan debugging, pilih tombol berhenti atau tekan Shift + F5.

  8. Untuk mulai men-debug untuk kedua kalinya, pilih tombol jalankan di bagian atas Visual Studio (atau F5).

  9. Di dasbor .NET.NET Aspire, pada halaman proyek, di baris AspireSQLEFCore, klik tautan di kolom Endpoint untuk membuka antarmuka aplikasi Anda.

  10. Perhatikan bahwa halaman tidak menampilkan tiket yang Anda buat di eksekusi sebelumnya.

  11. Tutup tab browser web yang menampilkan aplikasi web AspireSQL dan dasbor .NET.NET Aspire.

  12. Beralih ke Visual Studio dan, untuk menghentikan debug, pilih tombol berhenti atau tekan Shift + F5.

Menyimpan data selama proses memulai ulang

Pengembang sering lebih suka data mereka tetap ada selama restart di lingkungan pengembangan agar dapat menjalankan kode pada database yang lebih realistis. Untuk menerapkan persistensi dalam .NET.NET Aspire, gunakan metode WithDataVolume. Metode ini menambahkan volume Docker ke kontainer database Anda, yang tidak akan dihancurkan setiap kali Anda memulai ulang proses debugging.

  1. Di Visual Studio, dalam proyek AspireSQLEFCore.AppHost, klik dua kali file kode Program.cs.

  2. Cari kode berikut:

    var sql = builder.AddSqlServer("sql")
                     .AddDatabase("sqldata");
    
  3. Ubah kode tersebut agar sesuai dengan yang berikut ini:

    var sql = builder.AddSqlServer("sql")
                     .WithDataVolume()
                     .AddDatabase("sqldata");
    

Menjalankan dan menguji persistensi data

Mari kita periksa bagaimana volume data mengubah perilaku solusi:

  1. Pilih tombol jalankan di bagian atas Visual Studio (atau F5) untuk meluncurkan dasbor proyek .NET.NET Aspire Anda di browser.
  2. Pada halaman proyek, di baris AspireSQLEFCore, klik tautan di kolom Endpoint untuk membuka UI aplikasi Anda.
  3. Masukkan data sampel ke bidang formulir Title dan Description.
  4. Pilih tombol Kirim, dan formulir mengirimkan tiket dukungan untuk diproses — (lalu pilih Hapus untuk menghapus formulir).
  5. Data yang Anda kirimkan ditampilkan dalam tabel di bagian bawah halaman saat halaman dimuat ulang.
  6. Tutup tab browser web yang menampilkan aplikasi web AspireSQL dan dasbor .NET.NET Aspire.
  7. Beralih ke Visual Studio, dan untuk menghentikan debug, pilih tombol berhenti atau tekan Shift + F5.
  8. Untuk mulai men-debug untuk kedua kalinya, pilih tombol jalankan di bagian atas Visual Studio (atau F5).
  9. Di dasbor .NET.NET Aspire, pada halaman proyek, di baris AspireSQLEFCore, klik tautan di kolom Endpoints untuk membuka antarmuka aplikasi Anda.
  10. Perhatikan bahwa halaman sekarang menampilkan tiket yang Anda buat di eksekusi sebelumnya.

Lihat juga