Chargement dynamique du KendoGrid dans Blazor

Pour un aperçu, les fonctionnalités de KendoGrid et de KendoButton incluses dans l'interface utilisateur de Telerik pour Blazor Early Preview sont étonnantes. Voici comment les utiliser ensemble pour afficher des données, prendre en charge l'édition et la gestion (presque) des mises à jour.

Dans un précédent article de blog j'ai montré comment configurer un projet Visual Studio 2019 pour utiliser le KendoGrid. contrôle fourni avec l’interface utilisateur Telerik pour l’aperçu rapide du blazor . Cet article a également montré à quel point il est facile de récupérer les objets d'affichage de la grille à partir d'un service Web. Et, grâce à Blazor, tout était piloté par le code C # exécuté dans le client.

Notez que le projet complet référencé dans cet article se trouve sur GitHub .

Getting Real

Cependant, j'ai simplifié un peu les choses dans ce post. Par exemple, j'ai récupéré les données du service Web dès que ma page compatible Blazor a atteint le navigateur. Ce n'est pas toujours réaliste. À tout le moins, l'utilisateur voudra actualiser la grille pour obtenir les dernières données du service Web. Sinon, la grille peut contenir des données que ne devrait pas afficher dès que la page est chargée. Par exemple, l'utilisateur peut avoir besoin de saisir certains critères à envoyer au service Web pour contrôler les données extraites ou la grille peut afficher des données «facultatives» qui ne doivent être récupérées que sur demande.

L'UI de Telerik pour l'aperçu du Blazor inclut le bouton Kendo, qui vous permet d’implémenter tous ces scénarios: lorsque les utilisateurs sont prêts à voir la grille remplie de données, il leur suffit de cliquer sur le bouton. Il suffit d'ajouter le KendoButton au fichier .cshtml avec le KendoGrid et de spécifier le nom de la méthode dans la page qui extraira les données du service Web. 19659003] En supposant que cette méthode s'appelle GetCustomersAsync ce balisage ferait l'affaire:

   Obtenir des clients

La déclaration que j'ai utilisée dans mon dernier message pour la grille n'est pas du tout affectée. Par exemple, je lie toujours la propriété Data de la grille à une propriété de mon code Blazor (j'ai appelé la propriété, clients ), et je lie toujours les colonnes de la grille aux propriétés du Objet client que je suis en train d'afficher. Voici ce balisage:

La prochaine étape consiste évidemment à ajouter la méthode GetCustomers au bloc de fonctions de la page Blazor. Dans cette méthode, je dois faire deux choses: extraire les données du service Web et mettre à jour la propriété à laquelle la propriété Data de la grille est liée. En réalité, tout ce que je fais est de déplacer le code que j'avais dans ma méthode de démarrage dans mon dernier article de blog vers la méthode que j'ai liée à l'événement de bouton click . Ce code (avec la propriété customers ) se présente comme suit:

 @functions
{
  privé IEnumerable  customers = null;
  public async void GetCustomersAsync ()
  {
    HttpClient hc = new HttpClient ();
    HttpResponseMessage rm =
      wait hc.GetAsync ("https: // localhost: 5001 / clients");
    clients =
      wait rm.Content.ReadAsAsync <IEnumerable > ();
    StateHasChanged ();
  }
} 

Ce que j'aime dans Blazor, c’est qu’il s’agit simplement d’un «vieux code C #». La seule chose qui indique qu’il s’agit d’un code Blazor côté client est l’appel à la méthode StateHasChanged du composant Blazor ( cette méthode notifie à Blazor que l'interface utilisateur a été mise à jour afin que Blazor redessine les zones affectées de la page)

Gestion des mises à jour et de l'état

En fait, la version de prévisualisation de KendoGrid est presque prête à gérer des mises à jour simples. La grille permet déjà aux utilisateurs de modifier les valeurs dans la grille en double-cliquant sur une cellule. Ce qui manque, c’est la possibilité de savoir quelles lignes de la grille ont été modifiées. En ignorant ce problème (pour le moment), il est relativement facile de créer un code initial qui renvoie les objets modifiés au service Web pour les mettre à jour.

La première étape consiste à ajouter un autre bouton pour permettre à l'utilisateur de déclencher les mises à jour. Le balisage pour cela ressemblerait à quelque chose comme ceci (cette fois, j'ai lié la méthode à l'événement du clic du bouton en utilisant une expression lambda juste pour montrer que vous avez cette option):

Articles similaires