Opérations CRUD, migrations EF Core — Telerik .NET MAUI — Partie 1

Dans la première partie, nous implémentons les opérations CRUD avec Telerik UI pour .NET MAUI et EF Core.

Les données sont une partie importante de chaque application et c’est avec elles que l’interface utilisateur est alimentée. Travailler avec des données dans une application multiplateforme qui fonctionne simultanément sur quatre plates-formes (Android, iOS, macOS et Windows) peut s’avérer délicat.

Nous devons décider où le stocker : devons-nous utiliser une base de données locale ou nous connecter à un service REST ? Quel fournisseur devons-nous utiliser ?

L’un des éléments à prendre en compte lors du choix est la performance. Et les performances peuvent être améliorées si nous ne nous connectons pas tout le temps au service REST mais conservons au moins une partie des données localement. C’est pourquoi travailler avec des données locales est au centre de cet article.

Vous pouvez stocker ces données en utilisant plusieurs technologies différentes. Mais une norme éprouvée pour les applications .NET MAUI et le travail avec des données relationnelles est une base de données SQLite, et c’est ce que nous continuerons. .NET MAUI offre un excellent support pour SQL via le
SQLLite.NET que vous pouvez en savoir plus dans le Article Microsoft.

Nous ajouterons un composant supplémentaire à notre article et il s’agit d’Entity Framework Core, ou simplement EF Core. Nous le faisons pour plusieurs raisons :

• Il fonctionne avec une base de données utilisant des objets .NET.
• Cela élimine le besoin d’écrire la majeure partie du code d’accès aux données qui doit généralement être écrit.
• Parfois, nous devons modifier les exigences des applications, ajouter ou supprimer de nouvelles propriétés à nos modèles, ce qui entraînera une modification du schéma de notre base de données. EF Core est là pour résoudre cette tâche.
• Si vous venez du monde de bureau de WinForms ou de WPF, vous disposez probablement déjà d’un code existant que EF Core peut réutiliser.

Ayant tout ce qui précède, c’est le but de cet article : examiner et débloquer un aspect commun de la création d’applications pour les utilisateurs de Telerik –remplir l’interface utilisateur de Telerik à l’aide d’EF Core et SQL.

Alors, commençons! 😎

Préparer une application .NET MAUI

En utilisant une nouvelle application .NET MAUI vierge, nous devons d’abord ajouter les packages suivants :

• Microsoft.EntityFrameworkCore.Sqlite
• Telerik.UI.Maui

Note: Appel UseTelerik();. N’oubliez pas d’appeler le UseTelerik() méthode dans le fichier MauiProgram.cs de votre projet .NET MAUI. Ceci est nécessaire pour tous les composants Telerik UI pour .NET MAUI.

Ajouter des composants d’interface utilisateur Telerik

Dans cette démo, j’ajouterai un Grille de données Telerik .NET MAUI et liez-le pour illustrer les opérations CRUD. Cependant, les étapes sont les mêmes pour tout autre contrôle d’éléments que vous pouvez utiliser depuis Progress. Interface utilisateur Telerik pour .NET MAUItel que ComboBox Telerik .NET ou Telerik .NET MAUI TreeView.

XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
<telerik:RadDataGrid x:Name="dataGrid"/>

Préparer le modèle de données

Dans cette démo, nous utiliserons des données factices pour gérer une liste de tâches. Nous allons donc créer des données simples TodoItem classe représentant le modèle :

C#

public class TodoItem
{
  public int ID { get; set; }
  public string Name { get; set; }
  public bool Done { get; set; }
}

Créer DataContext avec EF Core

Pour créer une relation entre la base de données et ce que nous allons afficher, nous avons besoin d’un contexte de données : une session avec la base de données. L’objet contextuel nous permettra d’interroger et de sauvegarder des données. EF Core offre une base DbContext classe qui regroupe les requêtes et les modifications de la base de données. Nous en hériterons et l’étendrons avec notre ensemble de TodoItemla collection :

La classe C# complète :

public class DbDataContext : DbContext
{
  public DbSet<TodoItem> TodoItems { get; set; }
  public DbDataContext()
  {
    SQLitePCL.Batteries_V2.Init();
    this.Database.EnsureCreated();
  }
  protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
  {
    string dbPath = Path.Combine(FileSystem.AppDataDirectory, "todos.db3");
    
    optionsBuilder
      .UseSqlite($"Filename={dbPath}");
  }
}

Notez les parties importantes suivantes ci-dessus :

• L’endroit où nous pouvons créer notre fichier de base de données sur un appareil physique : le OnConfiguring fonction.
• Jetez un oeil à SQLitePCL.Batteries_V2.Init() doubler. Il est nécessaire dans le constructeur pour lancer SQLite sur iOS.

Maintenant, lisons les données et lions-les à Telerik DataGrid pour .NET MAUI ou à tout autre composant Telerik UI pour .NET MAUI.

Opérations CRUD

LIRE : Charger les données

Voici les étapes pour lire les éléments TODO et les charger dans notre DataGrid :

1. Dans Main.cs (ou dans toute vue contenant les éléments de l’interface utilisateur), j’ai créé un static IList<TodoItem> todoitems pour contenir les éléments qui seront extraits de la base de données.
2. Chargez les données à partir du contexte de données et affectez-les dans une méthode distincte. Nous appellerons cela initialement et après avoir ajouté ou supprimé un élément :

private void Load(){
  using (var dbContext = new DbDataContext())
  {
    todoitems = dbContext.TodoItems.ToList();
    grid.ItemsSource = todoitems;
  }
}

3. Passer outre OnAppearing et appelle le Load méthode:

protected override void OnAppearing()
{
  base.OnAppearing();
  Load();
}

CRÉER : Ajouter un nouvel élément

J’ajouterai un nouvel élément en cliquant sur un bouton. J’utiliserai le bouton Compteur présent dans chaque nouvelle application .NET MAUI et modifierai son gestionnaire d’événements de clic comme ceci :

private async void OnCounterClicked(object sender, EventArgs e)
{
  using (var dbContext = new DbDataContext())
  {
    var todo = new TodoItem { Name = "todo task " + dbContext.TodoItems.Count()};
    dbContext.Add(todo);
    await dbContext.SaveChangesAsync();
  }
  Load();       
}

Les choses importantes à noter ici sont :

• Remplacez-le par une méthode asynchrone à appeler await dbContext.SaveChangesAsync();.
• Appeler le Load() méthode pour extraire les nouvelles données et recharger le DataGrid.

MISE À JOUR : Modifier un élément

Telerik DataGrid pour .NET MAUI propose plusieurs commandes que nous pouvons utiliser pour gérer différents scénarios lors de l’édition.

Pour cette démo, j’hériterai de la commande et remplacerai sa méthode Execute où :

public class CommitEditCommand : DataGridCommand
{
  public CommitEditCommand()
  {
    this.Id = DataGridCommandId.CommitEdit;
  }
  public async  override void Execute(object parameter)
  {
    var todoItem = ((EditContext)parameter).CellInfo.Item as TodoItem;
    this.Owner.CommandService.ExecuteDefaultCommand(DataGridCommandId.CommitEdit, parameter);
    using (var dbContext = new DbDataContext())
    {
      var todoEdit = await dbContext.TodoItems.FirstAsync(i => i.ID == todoItem.ID);
      todoEdit.Name = todoItem.Name;
      todoEdit.Done = todoItem.Done;
      await dbContext.SaveChangesAsync();
    }
  }
}

SUPPRIMER : Supprimer un élément

Tout d’abord, jouons un peu avec la grille pour ajouter une colonne qui affichera un bouton de suppression. Pour ce faire, j’utiliserai un TemplateColumn et mettez à jour la définition DataGrid XAML comme ceci :

Note: Nous devons définir le BindingContext du bouton Supprimer afin que nous sachions quelle ligne supprimer.

<telerik:RadDataGrid x:Name="grid" AutoGenerateColumns="True" SelectionMode="Single"  >
  <telerik:RadDataGrid.Columns>
    <telerik:DataGridTemplateColumn CanUserReorder="True">
      <telerik:DataGridTemplateColumn.CellContentTemplate>
        <DataTemplate>
          <Button WidthRequest="100"  Text="Delete " BindingContext="{Binding .}"  Clicked="ButtonDel_Clicked"/>
        </DataTemplate>
      </telerik:DataGridTemplateColumn.CellContentTemplate>
    </telerik:DataGridTemplateColumn>
  </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

Ensuite, le code à supprimer ira au gestionnaire d’événements Clicked :

C#

private async void ButtonDel_Clicked(object sender, EventArgs e)
{
  var btn = sender as Button;
  var todoitem = btn.BindingContext as TodoItem;
  using (var dbContext = new DbDataContext())
  {
    dbContext.RemoveRange(dbContext.TodoItems.Where(i=> i .ID==todoitem.ID));
    await dbContext.SaveChangesAsync();
  }
  Load();
}

Et après

Dans cet article, nous avons montré comment réaliser des opérations CRUD avec EF Core, mais dans le monde réel, les exigences et le code changent et nous devons mettre à jour la base de données en conséquence. Si tel est votre cas, restez à l’écoute de la partie 2 de cette mini-série : Travailler avec les migrations EF Core.

En attendant, pour approfondir les sujets que nous avons abordés, vous pouvez vous référer aux articles ci-dessous :

Cet article utilise Grille de données Telerik .NET MAUImais les étapes ci-dessus sont valables pour charger avec des données l’un des 60+ Interface utilisateur Telerik pour .NET MAUI Composants. D’autres exemples avec l’interface utilisateur Telerik peuvent être trouvés sur Exemples de contrôles Telerik,
exemples axés sur les développeurs et Documentation Telerik.

Si vous êtes curieux de savoir quoi d’autre vient télécharger le package et essayez-le maintenant. 👇

Essayez l’interface utilisateur Telerik pour .NET MAUI