Tutoriel : Connecter une application ASP.NET Core à SQL Server à l’aide de .NET Aspire et de Entity Framework Core

Article
12/14/2024

Dans ce tutoriel, vous créez une application ASP.NET Core qui utilise une intégration .NET AspireEntity Framework CoreSQL Server pour vous connecter à SQL Server pour lire et écrire des données de ticket de support. Entity Framework Core est un mappeur relationnel d’objets open source léger et extensible qui permet aux développeurs .NET d’utiliser des bases de données à l’aide d’objets .NET. Vous allez apprendre à :

Créer une application de base .NET configurée pour utiliser des intégrations .NET Aspire
Ajouter une intégration .NET Aspire pour se connecter à SQL Server
Configurer et utiliser des fonctionnalités de composant .NET.NET Aspire pour lire et écrire à partir de la base de données

Conditions préalables

Pour utiliser .NET.NET Aspire, vous avez besoin de l’installation locale suivante :

.NET 8.0 ou .NET 9.0
Un runtime de conteneur conforme à OCI, tel que :
- Docker Desktop ou Podman. Pour plus d’informations, consultez environnement d’exécution des conteneurs.
Un environnement de développement intégré (IDE) ou un éditeur de code, par exemple :
- Visual Studio 2022 version 17.9 ou ultérieure (facultatif)
- Visual Studio Code (facultatif)
  - C# Dev Kit: Extension (facultatif)
- JetBrains Rider avec .NET.NET Aspire plug-in (facultatif)

Pour plus d’informations, consultez la configuration et les outils .NET.NET Aspire, et le SDK .NET.NET Aspire.

Créer l’exemple de solution

En haut de Visual Studio, accédez à Fichier>Nouveau>Projet.
Dans la fenêtre de boîte de dialogue, recherchez Blazor et sélectionnez Blazor application web. Choisissez suivant.
Dans l’écran Configurer votre nouveau projet :
- Entrez un nom de projet de AspireSQLEFCore.
- Laissez la rest des valeurs par défaut, puis sélectionnez Suivant .
Sur l’écran Informations supplémentaires :
- Vérifiez que .NET 9,0 est sélectionnée.
- Vérifiez que le mode de rendu interactif est défini sur Aucun.
- Cochez l’option Inscrire dans .NET.NET Aspire option d’orchestration, puis sélectionnez Créer.

Visual Studio crée une nouvelle solution de ASP.NET Core conçue pour utiliser .NET Aspire. La solution se compose des projets suivants :

AspireSQLEFCore: projet Blazor qui dépend des valeurs par défaut du service.
AspireSQLEFCore.AppHost: projet d’orchestrateur conçu pour connecter et configurer les différents projets et services de votre application. L’orchestrateur doit être défini comme projet de démarrage.
AspireSQLEFCore.ServiceDefaults: bibliothèque de classes partagées pour contenir des configurations qui peuvent être réutilisées dans les projets de votre solution.

Créer le modèle de base de données et les classes de contexte

Pour représenter une demande de support envoyée par l’utilisateur, ajoutez la classe de modèle SupportTicket suivante à la racine du projet 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;
}

Ajoutez la classe de contexte de données suivante à la racine du projet AspireSQLEFCore . La classe hérite System.Data.Entity.DbContext pour travailler avec Entity Framework et représenter votre base de données.

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

namespace AspireSQLEFCore;

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

Ajouter l’intégration .NET Aspire à l’application Blazor

Ajoutez le package de bibliothèque Sql à votre projet AspireSQLEFCore :

dotnet add package Aspire.Microsoft.EntityFrameworkCore.SqlServer

Votre projet AspireSQLEFCore est maintenant configuré pour utiliser des intégrations .NET.NET Aspire. Voici le fichier AspireSQLEFCore.csproj mis à jour :

<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.0.0" />
  </ItemGroup>

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

</Project>

Configurer l’intégration de .NET.NET Aspire

Dans le fichier Program.cs du projet AspireSQLEFCore, ajoutez un appel à la méthode d’extension AddSqlServerDbContext après la création de l'builder, mais avant l’appel à AddServiceDefaults. Pour plus d'informations, consultez les paramètres par défaut du service .NET.NET Aspire. Indiquez le nom de votre chaîne de connexion en tant que paramètre.

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

Cette méthode effectue les tâches suivantes :

Inscrit un TicketContext dans le conteneur DI afin de se connecter à la base de données SQL Azure conteneurisée.
Activez automatiquement les vérifications d’intégrité, la journalisation et la télémétrie correspondantes.

Créer la base de données

Lors du développement localement, vous devez créer une base de données à l’intérieur du conteneur SQL Server. Mettez à jour le fichier Program.cs avec le code suivant :

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

Code précédent :

Vérifie si l’application s’exécute dans un environnement de développement.
Si c’est le cas, il récupère le service TicketContext à partir du conteneur d’adresses de messagerie et appelle Database.EnsureCreated() pour créer la base de données s’il n’existe pas déjà.

Note

Notez que EnsureCreated() n’est pas adaptée aux environnements de production et qu’elle crée uniquement la base de données telle qu’elle est définie dans le contexte. Elle n’applique aucune migration. Pour obtenir plus d'informations sur les migrations Entity Framework Core dans .NET Aspire, consultez Appliquer les migrations Entity Framework Core dans .NET Aspire.

Créer le formulaire

L’application nécessite que l’utilisateur puisse envoyer des informations de ticket de support et enregistrer l’entrée dans la base de données.

Utilisez le balisage Razor suivant pour créer un formulaire de base, en remplaçant le contenu du fichier Home.razor dans le répertoire AspireSQLEFCore/Components/Pages :

@page "/"
@inject TicketContext context

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

Pour plus d’informations sur la création de formulaires dans Blazor, consultez ASP.NET CoreBlazor vue d’ensemble des formulaires.

Configurer l'AppHost

Le projet AspireSQLEFCore.AppHost est l’orchestrateur de votre application. Il est responsable de la connexion et de la configuration des différents projets et services de votre application. L’orchestrateur doit être défini comme projet de démarrage par défaut.

Ajoutez le package NuGet .NET Aspire Hébergement Sql Server à votre projet AspireStorage.AppHost :

dotnet add package Aspire.Hosting.SqlServer

Remplacez le contenu du fichier Program.cs dans le projet AspireSQLEFCore.AppHost par le code suivant :

var builder = DistributedApplication.CreateBuilder(args);

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

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

builder.Build().Run();

Le code précédent ajoute une ressource conteneur SQL Server à votre application et configure une connexion à une base de données appelée sqldata. Les classes Entity Framework que vous avez configurées précédemment utilisent automatiquement cette connexion lors de la migration et de la connexion à la base de données.

Exécuter et tester l’application localement

L’exemple d’application est maintenant prêt à être testé. Vérifiez que les données de formulaire soumises sont conservées dans la base de données en effectuant les étapes suivantes :

Sélectionnez le bouton Exécuter en haut de Visual Studio (ou F5) pour lancer votre tableau de bord de projet .NET.NET Aspire dans le navigateur.
Dans la page projets, dans la ligne AspireSQLEFCore, cliquez sur le lien dans la colonne Points de terminaison pour ouvrir l’interface utilisateur de votre application.
Entrez des exemples de données dans les champs de formulaire Title et Description.
Sélectionnez le bouton Envoyer, puis le formulaire envoie le ticket de support pour le traitement ( puis sélectionnez Effacer pour effacer le formulaire).
Les données que vous avez envoyées s’affichent dans le tableau en bas de la page lorsque la page se recharge.

Partager via