Création d'un modal blazor réutilisable et sans JavaScript

Dans ce guide, Chris Sainty vous aide à apprendre à créer un modal réutilisable sans utiliser de code JavaScript pour vos applications Blazor et Razor.

Les modaux sont une fonctionnalité courante des applications Web d’aujourd’hui. Vous les trouverez dans la plupart des cadres d'interface utilisateur, et ils vont de simples boîtes de confirmation à des formulaires complets. Dans cet article, je vais vous expliquer comment construire un modal réutilisable sans JavaScript pour vos applications Blazor / Razor Components. Pour rendre les choses encore plus intéressantes, nous allons construire le modal de manière à ce que nous puissions passer les composants à l’affichage au lieu du texte brut ou des chaînes de balisage.

Pour les débutants de Blazor, laissez-moi vous en donner une. Rapide vue d'ensemble. Blazor est un framework de type SPA développé par Microsoft. Il existe un modèle côté client, qui s'exécute via un environnement d'exécution .NET basé sur WebAssembly . Il existe également un modèle côté serveur (Composants Razor), qui s’exécute sur le runtime standard .NET Core. Pour en savoir plus, consultez le site Blazor.net .

Préparation de la configuration

Si vous débutez dans le développement de Blazor, vous devez vous assurer que vous disposez de la dernière version du logiciel .NET Core SDK installé . Vous devrez également installer les services Blazor Language ainsi que les modèles Blazor via l'interface de ligne de commande dotnet.

 dotnet new -i Microsoft.AspNetCore.Blazor.Templates

Création d'une bibliothèque Blazor

Nous voulons pouvoir utiliser notre modal dans tous les projets qui nous conviennent. Le meilleur moyen d'y parvenir consiste à utiliser le projet Blazor Library inclus dans les modèles CLI que nous avons installés ci-dessus. Ce type de projet fonctionne de manière similaire à une bibliothèque de classes et nous permet de partager des composants et leurs actifs (images, CSS, etc.) entre les applications Blazor.

Comme ce type de projet n’est actuellement disponible qu’à l’aide de la CLI de dotnet, nous pouvez exécuter les commandes suivantes pour créer un nouveau répertoire ainsi que le projet de bibliothèque Blazor.

 mkdir BlazorModal
cd BlazorModal
nouveau blazorlib de dotnet

Nous avons maintenant un nouveau projet de bibliothèque Blazor que nous pouvons ouvrir dans Visual Studio. Avant toute chose, supprimons certains des éléments par défaut fournis avec le modèle. La seule chose que nous souhaitons conserver est le style.css, le projet devrait donc ressembler à ceci:

Modal Service [19659005] La première chose que nous allons construire est le ModalService qui va être la colle qui joindra notre composant modal à tout autre composant souhaitant l’utiliser. À la racine du projet, ajoutez une nouvelle classe appelée ModalService.cs avec le code suivant:

 en utilisant  Microsoft .  AspNetCore .  Blazor ; 
  en utilisant  Microsoft .  AspNetCore .  Blazor .  Composants ; 
  en utilisant  Système ; 
 espace de noms  ] BlazorModal .  Services
  {
  public   classe   ModalService 
  {
  public   événement  Action  < chaîne  RenderFragment  ]>  OnShow ; 
  public   événement  Action OnClose ; 
  public   vide   Afficher  ( chaîne de caractères
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires