Voici un composant Blazor qui utilise C # pour extraire des données d’un service Web et les afficher dans le nouveau KendoGrid compatible avec Blazor. En d'autres termes: mises à jour côté client sans JavaScript.

Comme vous pouvez le voir ici, grâce à l'interface utilisateur Telerik pour Blazor Early Preview vous pouvez déjà commencer à utiliser les composants de l'interface utilisateur Telerik dans un environnement Blazor. Le principal problème de cette technologie réside dans la création de l'environnement dans lequel elle s'exécute – les composants eux-mêmes fonctionnent exactement comme annoncé.

Configuration

Cette technologie est fondamentalement une prévisualisation, vous aurez donc besoin de utiliser les deux aperçus pour Visual Studio 2019 et .NET Core 3.0 SDK .

Une fois ces téléchargements installés, vous créerez votre projet en lançant Visual Studio 2019 Aperçu et sélection de Créer un nouveau projet parmi les choix à droite du cadran initial. Dans la boîte de dialogue "Créer un nouveau projet" qui apparaît, sélectionnez Applications Web ASP.NET Core et cliquez sur le bouton Suivant. La boîte de dialogue suivante vous permettra de nommer votre projet (parmi d'autres options de configuration). Cliquez sur le bouton Créer une fois que vous avez terminé avec cette page et (enfin!) Choisissez le type de projet que vous souhaitez créer. Pour utiliser Blazor, vous souhaiterez utiliser le modèle Composants Razor, sélectionnez-le, puis cliquez sur le bouton Créer pour initialiser votre projet dans sa solution.

C'est la première fois que vous vérifiez que vous avez bien installé le logiciel. «ensemble complet»: si votre solution Visual Studio contient un seul projet comportant, dans son dossier Composants / Pages, des fichiers avec l'extension .razor, vous disposez de la bonne combinaison de Visual Studio et de .NET Version 3.0.

Les composants Razor ne sont pas «vrais» Blazor dans le sens où le code C # est exécuté dans le navigateur. À la place, Razor Components exécute votre code C # sur le serveur et utilise SignalR pour communiquer entre le client et le serveur. Cela limite évidemment l'évolutivité de votre application par rapport à l'exécution complète de tout le code sur le client. Cependant, cela évite également le téléchargement de deux mégaoctets qu'exige actuellement «Blazor sur le client» (et, pour être juste, dans ASP.NET Core avec la topologie appropriée, la limite de mise à l'échelle de SignalR est assez élevée ). . Le principal avantage de l'expérimentation de Razor Components réside dans le fait qu'il s'agit d'une technologie officielle incluse dans .NET Core 3.0, tandis que «Blazor sur le client», bien qu'il soit dans la version 0.9.0, est toujours – et je cite Microsoft ici – dans «pre-alpha». Cependant, le code et le HTML de ce message devraient fonctionner tels quels avec «Blazor on the Client» lorsque (ou si) cette technologie sort de l'alpha.

Une des rides que j’ai trouvées après avoir tout configuré est que j’apporterais des modifications à mon code et que cela ne ferait aucune différence pour mon application en cours d’exécution tant que je n'aurais pas choisi Construire | Reconstruire la solution. Si vous êtes fatigué de demander constamment des reconstructions (ou, comme je l'ai fait, oubliez de le faire), la solution la plus simple consiste à déclencher une reconstruction à chaque fois que vous déboguez dans chaque projet en allant dans Outils | Options | Projets et solutions | .NET Core et un vérifiant l'option Contrôles jusqu'à la date. Si cette solution vous semble trop compliquée, vous pouvez résoudre le problème du projet sur lequel vous travaillez en consultant le fichier .csproj du projet et en ajoutant ceci:

   comment configurer votre application pour utiliser les nouveaux composants activés pour Blazor . Vous devrez également modifier votre fichier de projet.
 Hé, personne n’a dit qu’il serait facile d’explorer l’avenir de la technologie.
 L’étude de cas
 Pour l’étude de cas que je vais utiliser. ici, j'ai ajouté un deuxième projet API ASP.NET Core à ma solution. Ce service Web fournira un ensemble d’objets client. J'ai défini mon objet Client dans un autre projet de bibliothèque de classes (.NET Standard) auquel j'ai fait référence à partir de mes projets Razor Components et API. J'ai ajouté ces deux projets en cliquant avec le bouton droit de la souris sur le nœud Solution dans Solution Explorer et en sélectionnant Ajouter | Nouveau projet.
 Ma classe de client est ridiculement simple:
espace de noms Customers.Common
{
  public class Client
  {
    public int Id {get; ensemble; }
    chaîne publique FirstName {get; ensemble; }
    chaîne publique LastName {get; ensemble; }
  }
} 
 Et ma classe d'API n'était pas beaucoup plus compliquée. J'ai créé une liste d'objets Client dans le constructeur d'une classe de contrôleurs (astucieusement appelée Clients) et renvoyé cette collection à partir de la méthode Get de ma classe de contrôleurs:
 [Route("Customers")]
[ApiController]
Classe publique Customers: ControllerBase
{
  Liste  custs = new Liste  ();
  clients publics ()
  {
    custs.Add (nouveau client
    {
      Id = 1,
      Prénom = "Peter",
      LastName = "Vogel"
    });

    // plus de clients ajoutés
  }

  [HttpGet]
  public ActionResult <IEnumerable > Get ()
  {
    renvoyer les custs;
  }
} 
 J'ai également configuré la solution pour qu'elle lance le débogage avec deux projets de démarrage en cliquant avec le bouton droit de la souris sur le nœud de la solution, en sélectionnant Définir les projets de démarrage et en sélectionnant l'option "Plusieurs projets de démarrage" dans la boîte de dialogue résultante. Dans la liste des projets qui suivent cette option, je règle la liste déroulante Action sur "Démarrer" pour mon projet Composants Razor et mon projet API avant de cliquer sur le bouton OK.
 Création de l'interface utilisateur Blazor
 mettez tout cela en place, puis vous êtes prêt à créer une page Razor Components qui utilise KendoGrid pour afficher une liste des objets Client récupérés à partir d'un service Web. Pour ajouter la page, cliquez avec le bouton droit de la souris sur le dossier Composants / Pages du projet de Razor Components et sélectionnez Ajouter | Nouvel article. Malheureusement, la boîte de dialogue Ajouter un nouvel élément n'inclut pas actuellement de modèle générant une classe Razor Components. Toutefois, si vous sélectionnez le modèle Razor View et définissez le nom du fichier avec l'extension .razor, tout se passera bien (c'est l'extension .razor qui définit un composant Razor). J'ai appelé mon fichier DisplayCustomers.razor.
   
 En haut de mon composant Razor, j'ai défini le chemin de l'URL pour extraire ce composant, ajouté l'espace de noms de la bibliothèque de classes contenant la définition de ma classe Client et activé les assistants de balise dans l'espace de noms Kendo.Blazor (j'aurais aussi pu effectuer cette dernière étape dans l'un des fichiers _ViewImports de mon projet). Voici à quoi cela ressemblait:
 @page "/ displaycustomers"
@utilisant clients.Common
@addTagHelper *, Kendo.Blazor 
 Dans ma page, j'ai ajouté un en-tête et utilisé les aides de tag Kendo pour définir mon KendoGrid. Cela vous donne un autre point de contrôle pour voir si vous avez le «paquet de bonnes choses»: si vos tags KendoGrid ne sont pas en gras, le package Telerik.UI.for.Blazor NuGet ne s’est pas installé correctement. [19659022]
 Liste de clients

   
     
     
     
   
  
 Cette grille est attachée à un champ de mon composant Razor qui fournira les données à afficher (j'ai également activé le tri automatique car, eh bien, pourquoi pas?). J'ai défini trois colonnes dans ma grille, une pour chacune des trois propriétés de mon objet Client. J'ai également défini le titre des colonnes dans lesquelles ces propriétés sont affichées.
 Maintenant, je dois définir le champ qui contiendra ces données. Ce code ressemble à ceci:
 @functions {
  private IEnumerable  customers = null;
} 
 À ce stade, il ne reste plus qu'à afficher une grille vierge. Pour commencer à récupérer les données du service Web, j'ai besoin, dans le bloc de fonctions de mon composant, de remplacer la méthode  OnInitAsync  du composant. Cette méthode est automatiquement exécutée lors de l'initialisation du composant tel qu'il est affiché. C'est donc un bon endroit pour effectuer toute initialisation du composant. Plutôt que de charger beaucoup de code dans la méthode  OnInitAsync je vais mettre le code qui fait tout le travail dans une méthode distincte que j'appellerai  GetCustomers :
 @ les fonctions {
  private IEnumerable  customers = null;
  Protection protégée Task OnInitAsync ()
  {
    GetCustomers ();
    retourne base.OnInitAsync ();
  }
} 
 Pour cette méthode  GetCustomers je viens d'écrire du code C # en exploitant les API .NET Core. J'ai ajouté cette méthode juste en dessous de ma  OnInitAsync :
 public async void GetCustomers ()
{
  HttpClient hc = new HttpClient ();
  HttpResponseMessage rm =
    wait hc.GetAsync ("https: // localhost: 5001 / clients");
  clients =
    wait rm.Content.ReadAsAsync <IEnumerable > ();
  StateHasChanged ();
} 
 Pour utiliser la méthode ReadAsAsync pour appeler mon service, je devais ajouter un package NuGet à mon projet (Microsoft.AspNet.WebApi.Client). Mais, remarquons-le, il ne s'agit que d'un autre package C #.
 En réalité, seul l'appel à la fin de la méthode à la méthode  StateHasChanged  de Razor Component montre que ce code met à jour les ressources côté client. . La méthode  StateHasChanged  notifie à Blazor que le DOM du client a été mis à jour, ce qui force Blazor à comparer le DOM mis à jour à ce que l'utilisateur voit actuellement, à déterminer ce qui est différent et à mettre à jour la vue de l'utilisateur pour refléter les données chargées.
 Et il y a toute la beauté de Blazor: des mises à jour côté client efficaces sans ligne JavaScript et avec accès à la totalité de l'API .NET Core. Ma boîte à outils côté client est soudainement devenue beaucoup plus ciblée.
 Le projet complet référencé dans cet article se trouve  ici .
 Pour en savoir plus sur l'interface utilisateur de Telerik pour Blazor
 Pour en savoir plus l'interface utilisateur de Telerik pour Blazor et téléchargez l'aperçu, n'oubliez pas de consulter cet article de blog d'introduction   ou de consulter la page du produit  ici .