Intégration des composants Blazor aux vues ASP.NET Core

Ce que les développeurs souhaitent réellement, c’est d’utiliser l’UI Telerik pour les composants Blazor dans un SPA Blazor intégré à Views (ou Razor Pages) dans des projets ASP.NET Core existants. Voici tout ce dont vous avez besoin pour y arriver.

Les applications Web du monde réel intègrent plusieurs technologies. Voici comment intégrer ASP.NET MVC, HTML, CSS, Blazor et les composants de l'interface utilisateur Telerik pour Blazor . Hey! Au moins, vous n'avez pas besoin de JavaScript.

Comme je l'ai dit dans un précédent billet de blog le véritable pouvoir d'utiliser des contrôles tels que l'interface de Telerik pour Blazor réside dans la manière dont ces contrôles fonctionnent ensemble et avec ASP. .NET Core. Avant de commencer à assembler votre interface utilisateur, vous devez assembler un projet qui vous permet de combiner ASP.NET Net Views et Razor Pages, ce dont traite ce message.

Dans cette colonne, je vais intégrer un composant SSB (Server-Side Blazor) dans un projet ASP.NET Core existant. Avec SSB, le code du composant s'exécute sur le serveur en fonction des informations du navigateur. Par conséquent, les rapports sur l'état de la connexion serveur-navigateur doivent également être intégrés à la solution.

L'intégration de Blazor et d'ASP.NET Core aux vues ou pages

L'ajout de SSB à un projet ASP.NET Core existant nécessite quelques modifications au projet. Ces étapes sont les suivantes:

1. Ajoutez la dernière version du paquet NuGet, Microsoft.AspNetCore.Blazor à votre projet
2. Ajoutez deux dossiers à votre projet: (1) Composants à la racine du projet, et (2) Pages au dossier Composants
3. Startup.cs : Dans le ConfigureServices () méthode, ajoutez cette ligne au début de la méthode:

 services.AddServerSideBlazor (); 

Dans la méthode de Configure () ajoutez cette ligne à la fin du corps de l'expression lambda. passé à l'appel de la méthode app.UseEndpoints () :

 endpoints.MapBlazorHub (); 

Bien que je crée éventuellement un View qui héberge un blazor composant qui forme mon SPA, certaines choses ne changent pas. Une méthode Controller Action () qui, par exemple, récupère une collection d'objets Client et les passe à la vue qui hébergera mon SPA, semble très familier:

 public IActionResult Index ()
{
  IEnumerable  custs;
  custs = CustomerRepo.GetAll ();
  retourner la vue (custs);
} 

Intégration d'un point de vue ou d'une page

Mise en garde cruciale: je parlerai exclusivement des points de vue de cette section, mais tout ce qui est présenté ici fonctionnerait aussi bien dans un rasoir . J'en avais juste marre de taper Voir ou Page .

Une vue fonctionnant avec Blazor nécessite un support spécial (en plus de la tâche typique de a acceptant la collection Customer créée dans la méthode de Controller de () . Premièrement, j'ai besoin de la bibliothèque JavaScript qui prend en charge le composant Blazor qui communique avec mon code sur le serveur. Pour prendre en charge les composants Telerik, j'ai également besoin de cette bibliothèque JavaScript:

 @model IEnumerable 
 

Pour que ma grille s'affiche correctement, j'ai également besoin d'une feuille de style Telerik en cascade (la syntaxe amusante ci-dessous est nécessaire pour gérer le symbole @ au milieu de l'URL Telerik). . J'ai également inclus une feuille de style avec les styles que je vais utiliser lors de l'affichage du code HTML pour informer l'utilisateur de la perte de la connexion au serveur:

Tous ces éléments de lien et de script pourraient bien entendu être placés dans la vue de présentation du site plutôt que répétés dans chaque page ou page rasoir.

Pour gérer la notification à l'utilisateur de l'état de la connexion, j'ai besoin un élément avec un identifiant de «components-reconnect-model». Blazor affecte une classe CSS à cet élément lorsque la connexion SignalR au serveur est perdue. Si la connexion ne peut pas être rétablie, Blazor attribue un style différent. La bibliothèque JavaScript Blazor inclut une méthode de reconnexion que vous pouvez appeler pour essayer de rétablir la connexion si Blazor ne parvient pas à se reconnecter, ce dont je souhaite profiter. Voici un code HTML simple et un script pour gérer tout cela:

  

     Connexion perdue - veuillez patienter, essayez de vous reconnecter
  
  

     Impossible de se reconnecter. Cliquez pour tenter de vous reconnecter:
    
  

Il s'agit de la feuille de style BlazorConnection.css que j'ai créée pour travailler avec Blazor afin d'afficher des messages d'état concernant l'état de la connexion. Il définit les styles utilisés par Blazor (composants-reconnect-cacher, composants-reconnect-show, composants-reconnect-échoués), ainsi que les règles d'affichage / masquage des éléments div dans ma vue:

 .components-reconnect-hide {
  affichage: aucun;
}

.components-reconnect-show {
  bloc de visualisation;
}

.components-reconnect-failed {
  bloc de visualisation;
}

.components-reconnect-show .reconnect-wait {
  bloc de visualisation;
}

.components-reconnect-failed .reconnect-wait {
  affichage: aucun;
}

.components-reconnect-show .reconnect-button {
  affichage: aucun;
}

.components-reconnect-failed .reconnect-button {
  bloc de visualisation;
} 

Je réalise que cela montre mon ignorance presque complète de CSS.

Dans la vue vous êtes prêt à appeler un composant Blazor ( Customers.razor ). les données dont le composant a besoin (dans mon code ci-dessous, je passe la propriété Model de la vue ). Bien que le code doive être inclus dans un élément, le nom de l'élément n'a aucune importance:

 
  @ (wait Html.RenderComponentAsync  (new {custs = Model}))

Intégration des composants Telerik

Enfin, il est temps de créer le composant. Pour ajouter un composant, cliquez avec le bouton droit de la souris sur le dossier Pages que vous avez ajouté précédemment et sélectionnez Razor Voir (il n'existe actuellement aucun modèle pour un composant Razor). Entrez le nom de votre fichier de composant (qui sera également le nom de votre composant) et attribuez-lui une extension de fichier .razor ( Customers.razor ).

Votre composant n'a pas besoin d'une directive de page car il est appelé depuis un View . Toutefois, le composant a besoin d'une propriété dont le nom correspond au paramètre utilisé dans l'appel RenderComponentAsync () pour transmettre des données au composant ( cust dans mon cas). Ce paramètre doit également être décoré avec l'attribut Parameter comme dans cet exemple:

 @using BlazorFromMVC.Models

@les fonctions
{
  [Parameter]
  private IEnumerable  custs {get; ensemble; }
} 

Dans le composant, le moyen le plus simple d'afficher la collection de clients est d'utiliser un TelerikGrid . Pour l'utiliser, vous devez télécharger le package d'installation de l'interface utilisateur de Telerik pour Blazor . Une fois le téléchargement et l'installation terminés, vous devrez suivre ces instructions pour ajouter le flux Telerik NuGet à votre gestionnaire NuGet. Après cela, vous pouvez utiliser le gestionnaire NuGet pour ajouter le package Telerik.UI.for.Blazor à votre projet.

Dans votre projet, pour ajouter les classes Telerik nécessaires au conteneur d'injection de dépendance de votre projet, vous Vous aurez besoin de cette ligne de code dans la méthode Startup.cs de ConfigureServices () :

 services.AddTelerikBlazor (); 

La dernière étape avant d'ajouter Telerik est de revenir à la liste de vos composants Fichier Razor et ajoutez une directive using pour l'espace de noms de la grille:

 @using Telerik.Blazor.Components.Grid 

Ceci mis en place, vous pouvez ajouter votre grille à votre composant Blazor. Pour que la grille affiche votre collection, vous devez:

1. Définir l'attribut Data de la grille sur la propriété contenant la collection
2. Définissez une colonne pour chaque propriété des objets de la collection. veux afficher

J'ai couvert cela en détail dans un autre article .

Voici un exemple pour ma collection Customers :

Mais, bien entendu, aussi puissant que le TelerikGrid il s'agit simplement de l'interface utilisateur la plus simple possible pour afficher une collection. Créer une interface utilisateur vraiment utile nécessite de combiner plusieurs composants, comme je le montrerai dans mes prochains messages. Restez à l'écoute.