Charger des données relationnelles dans ASP.NET Core Grid avec Microsoft SQL

Dans cet article, nous passerons en revue les subtilités de l’intégration des données relationnelles d’une base de données SQL Server dans une interface utilisateur Telerik pour le composant ASP.NET Core Grid.

Progrès Interface utilisateur Telerik pour ASP.NET Core fournit des outils riches pour créer des vues de grille sophistiquées. Je vais vous montrer comment combiner rapidement ces outils avec des données côté serveur dans ASP.NET Core, principalement lorsqu’il s’agit de bases de données relationnelles telles que SQL Server.

Nous adaptons et utilisons le référentiel ASP.NET Core officiel de Progress Telerik : ui-pour-aspnet-core-exemples.

Nous récupérons et lions les données relationnelles de SQL Server pour remplir un Grille.

@(Html.Kendo().Grid<ForeignKeyOrderViewModel>()
  .Name("grid")
  .Columns(columns =>
  {
    columns.Bound(p => p.OrderID).Filterable(false).Width(110);
    columns.Bound(p => p.Freight).Width(100);
    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(220);
    columns.Bound(p => p.ShipName).Width(150);

    columns.ForeignKey(p => p.TaskID, ds => ds.Read(r => r.Action("List", "Tasks")), "TaskID", "Title")
      .Title("To do").Width(200);

    columns.ForeignKey(p => p.ShipCityId, 
      (System.Collections.IEnumerable)ViewData["cities"], "CityID", "CityName")
      .Title("City").Width(400);
    columns.Command(c => c.Edit());
})

Nous allons commencer à utiliser la source disponible dans le référentiel GitHub officiel de Telerik pour les exemples ASP.NET Core. Nous adapterons les exemples à notre application ASP.NET Core et montrerons comment lier les données SQL Server à une grille d’interface utilisateur Telerik avec une clé étrangère.

Cette image montre notre objectif final. La colonne « À faire »* est une clé étrangère de SQL Server.

*Cela démontre que la relation, l’ordre et les tâches ne sont que des exemples.

Commençons!

1. Commencez à cloner le référentiel https://github.com/telerik/ui-for-aspnet-core-examples.
2. Dans Controllers\Grid, créez un cs nommé TasksController.cs :
   
3. Ajoutez ce code à TasksController.cs :

using Kendo.Mvc.Extensions;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;
using Telerik.Examples.Mvc.Models;

namespace Telerik.Examples.Mvc.Controllers.Grid;

public class TasksController : Controller
{
  private readonly GeneralDbContext _context; 

  public TasksController(GeneralDbContext context)
  {
    _context = context;
  }
  public ActionResult List()
  {
    IEnumerable<Telerik.Examples.Mvc.Models.Task> taks;

    taks = _context.Tasks
      .Select(c => new Telerik.Examples.Mvc.Models.Task
      {
        TaskID = c.TaskID,
        Title = c.Title
      })
      .OrderBy(e => e.Title).ToList();

    return Json(taks);
  }
}

4. Ajoutez au modèle ForeignKeyOrderViewModel.cs le champ TaskID :

Code source:

public int TaskID
{
  get;
  set;
}

5. Ajoutez la colonne à la grille :

Code source:

columns.ForeignKey(p => p.TaskID, ds => ds.Read(r => r.Action("List", "Tasks")), "TaskID", "Title")
  .Title("To do").Width(200);

6. Ajoutez Telerik à votre NuGet.config :

<add key="Telerik" value="https://nuget.telerik.com/v3/index.json" />

7. Vous devez installer votre essai Telerik à partir de https://www.telerik.com/try/devcraft-ultimate et remplacez la référence Telerik.UI.for.AspNET.Core.Trial par Telerik.UI.for.AspNet.Core :

8. Il est prêt à fonctionner à https://localhost:44316/EncodedForeignKeyValues/EncodedForeignKeyValues.

Comment fonctionne la magie ?

Analysons le Program.cs. Le contexte de la base de données est initialisé. Il est nécessaire de démarrer le DbContext dans la base de données.

builder.Services.AddDbContext<GeneralDbContext>(options =>
   options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

DbContext relie vos classes de domaine ou d’entité et la base de données C# ASP.NET Core. Il gère les connexions aux bases de données, la récupération d’objets, le suivi des modifications et la traduction des requêtes en SQL dans le cadre du package Entity Framework Core (EF Core). Il vous permet de vous interfacer avec la base de données via des requêtes LINQ ou SQL direct.

Le Connexion par défaut est stocké dans la solution appsettings.json. « Connexion par défaut » est le nom de la chaîne de connexion et doit être ajouté comme code pour référence.

Le GénéralDbContext lie les tables de la base de données SQL Server :

public class GeneralDbContext : IdentityDbContext
{
  public GeneralDbContext(DbContextOptions<GeneralDbContext> options)
    : base(options)
  { }

  public DbSet<EditorData> EditorData { get; set; }
  public DbSet<Task> Tasks { get; set; }
}

Le DbSet représente chaque table de la base de données SQL Server :

Comment fonctionne la colonne dans l’interface utilisateur de Telerik ?

columns.ForeignKey(p => p.TaskID, ds => ds.Read(r => r.Action("List", "Tasks")), "TaskID", "Title")
  .Title("To do").Width(200);

Dans ce cas précis, la méthode ForeignKey possède quatre paramètres :

ForeignKey (method)

Expression<Func<TModel, TValue>> expression – we select the field that has a foreign key: p.TaskID;
 
Action<ReadOnlyDataSourceBuilder> dataSource – we add the data source using the API List from the Tasks controller: ds => ds.Read(r => 
  r.Action("List", "Tasks"));

string dataFieldValue – we identify the key field of the foreign key: TaskID;

string dataFieldText – we identify the description for the column, in this case, “Title.”

.Title() – Defines the caption for the column and .Width() the size of the column.

La liste API pour les tâches renvoie une lecture IEnumerable à partir de la référence _context.Tasks :

public ActionResult List()
{
  IEnumerable<Telerik.Examples.Mvc.Models.Task> taks;

  taks = _context.Tasks
    .Select(c => new Telerik.Examples.Mvc.Models.Task
    {
      TaskID = c.TaskID,
      Title = c.Title
    })
    .OrderBy(e => e.Title).ToList();

  return Json(taks);
}

Le _contexte est automatiquement initialisé avec le Contrôleur :

private readonly GeneralDbContext _context; 

public TasksController(GeneralDbContext context)
{
  _context = context;
}

Pour cet exemple, j’ai personnalisé les villes :

private void PopulateCities()
{
  var cities = new CityViewModel[] { new() { CityID = 1, CityName = "Washington, D.C." }, new() { CityID = 2, CityName = "London" }, new() { CityID = 3, CityName = "Berlin" }, new() { CityID = 4, CityName = "Tokyo" }, new() { CityID = 5, CityName = "Beijing" }, new() { CityID = 6, CityName = "Canberra" }, new() { CityID = 7, CityName = "Ottawa" }, new() { CityID = 8, CityName = "Paris" }, new() { CityID = 9, CityName = "Rome" }, new() { CityID = 10, CityName = "Madrid" }, new() { CityID = 11, CityName = "Moscow" }, new() { CityID = 12, CityName = "New Delhi" }, new() { CityID = 13, CityName = "Brasilia" }, new() { CityID = 14, CityName = "Cairo" }, new() { CityID = 15, CityName = "Buenos Aires" }, new() { CityID = 16, CityName = "Seoul" }, new() { CityID = 17, CityName = "Cape Town" }, new() { CityID = 18, CityName = "Helsinki" }, new() { CityID = 19, CityName = "Oslo" }, new() { CityID = 20, CityName = "Stockholm" } };

  ViewData["cities"] = cities;
}

Conclusion

L’ajout d’une clé étrangère dans le composant Grid de Telerik UI pour ASP.NET Core est plus simple qu’il n’y paraît. Vous pouvez créer une grille solide et efficace en organisant soigneusement les éléments. Espérons que cet article ait dissipé toute confusion et vous ait fourni un excellent cadre à partir duquel construire. N’hésitez pas à continuer d’expérimenter pour tirer le meilleur parti de votre implémentation de Telerik UI Grid.

Téléchargez une version d’essai aujourd’hui et commencez immédiatement à utiliser Telerik UI. Rassurez-vous, vous pouvez contacter l’équipe d’assistance légendaire pour obtenir de l’aide à tout moment, même pendant la période d’essai.

Les références

GitHub – https://github.com/telerik/ui-for-aspnet-core-examples
Document de clé étrangère – https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/columns/foreignkey-column
Démo – https://demos.telerik.com/aspnet-core/grid/foreignkeycolumn