Téléchargement, info-bulle et état de la grille

La version Telerik UI pour Blazor 2.9.0 inclut les composants Upload et Tooltip, Grid State Management, Visual Studio Code Extension, la prise en charge de WebAssembly 3.2.0 Preview 2 et plus. Plongeons-nous.

La nouvelle version 2.9.0 de Telerik UI pour Blazor est arrivée et apporte de nouveaux composants et fonctionnalités natifs prêts pour la production! L'interface utilisateur de la bibliothèque Blazor comprend désormais de nouveaux composants de téléchargement et d'infobulles, de multiples améliorations de la grille, notamment la gestion des états, le tri et le regroupement à partir du code, les rendez-vous récurrents du planificateur, l'assistant de modèle de projet Visual Studio Code, la compatibilité de WebAssembly 3.2.0 Preview 2 et plus encore! Dans cet article, nous allons parcourir les avantages de la version 2.9.0 et discuter en détail de toutes les améliorations que vous pouvez apporter à vos applications Blazor.

L'interface utilisateur de Telerik pour Blazor prend en charge à la fois côté serveur et WebAssembly 3.2.0 Aperçu 2

Comme toujours, les versions de Telerik UI pour Blazor vont de pair avec les versions d'aperçu publiées par Microsoft. Nous sommes heureux d'annoncer que la dernière version de Telerik UI pour Blazor 2.9.0 est compatible avec la dernière version preview 2 de Blazor WebAssembly 3.2.0 .

L'aperçu 2 de Blazor WebAssembly apporte de nombreuses nouveautés intéressantes – intégration avec les ressources Web statiques ASP.NET Core, modèle PWA, authentification basée sur des jetons, configuration de l'éditeur de liens mise à jour, et comme Microsoft l'a déclaré: «Blazor WebAssembly est sur un régime extrême ", ce qui signifie que les fichiers d'exécution et de cadre ne sont que de 159 Ko – comme c'est cool!

Blazor WebAssembly 3.2.0 Preview 2 – source de l'image: https://devblogs.microsoft.com/

Nouveau composant de téléchargement Blazor

Nous écoutons toujours vos commentaires et dans cette version, nous avons implémenté l'un des les éléments les plus attendus du Telerik UI for Blazor feedback portal – le composant de téléchargement de fichiers!

Présentation

Vous pouvez désormais télécharger des fichiers de manière asynchrone dans vos applications Blazor en toute simplicité – dites bonjour au tag!

Telerik UI for Blazor Upload Component

Le nouveau Blazor Upload component a plusieurs options de configuration et événements pour vous permettre de créer et de personnaliser le téléchargement de fichiers nécessaire pour vos scénarios.

Avec juste une ligne de code, vous pouvez laisser vos utilisateurs télécharger un ou plusieurs fichiers.

 < TelerikUpload   SaveUrl  =  "@ SaveUrl"   RemoveUrl  =  "@ RemoveUrl"  /> 

Dans l'exemple ci-dessus, en utilisant SaveUrl = "@ SaveUrl", vous spécifiez l'URL du gestionnaire (point final, contrôleur) qui recevra les fichiers téléchargés. Pour gérer la suppression des fichiers, définissez RemoveUrl = "@ RemoveUrl" – avec l'URL du point de terminaison pour la demande de suppression.

Nous avons pris en considération les cas où un téléchargement doit se produire immédiatement après la sélection du fichier et avons exposé la propriété AutoUpload . En l'utilisant, vous pouvez configurer soit un téléchargement de fichier immédiat (par défaut), soit le faire en sorte que l'utilisateur doive cliquer sur le bouton "Télécharger".

Validation

Le composant Telerik UI for Blazor Upload propose plusieurs paramètres pour vous aider à valider les fichiers sélectionnés sur le client. Vous pouvez définir des restrictions à la taille autorisée à l'aide de MinFileSize et MaxFileSize ou au format de fichier à l'aide du paramètre AllowedExtensions comme indiqué dans l'exemple d'extrait de code ci-dessous:

 < TelerikUpload   SaveUrl  =  "@ SaveUrl "  RemoveUrl  = " @ RemoveUrl " 
    AllowedExtensions =" ​​@ (nouvelle liste  () {".jpg", " .pdf "," .png "})"   
    MaxFileSize = "2048000" MinFileSize = "1024" /> 

Événements

Vous avez plusieurs événements disponibles pour gérer à la fois les fichiers et le processus de téléchargement à l'aide de votre nouveau composant de téléchargement Blazor. Vous trouverez ci-dessous un résumé des événements disponibles et de leurs déclencheurs:

• OnSelect – se déclenche chaque fois que l'utilisateur sélectionne de nouveaux fichiers à télécharger.
• OnUpload – se déclenche lorsque les fichiers seront téléchargés. Par défaut, il se déclenchera immédiatement après OnSelect, sauf si vous définissez AutoUpload = "false".
• OnRemove – se déclenche lorsque les utilisateurs cliquent sur le bouton [x] d'un fichier téléchargé. Il envoie une demande au serveur afin que vous puissiez nettoyer le fichier sur lequel l'utilisateur a changé d'avis. Il ne se déclenche pas lorsque l'utilisateur supprime un fichier qui n'a pas encore été téléchargé.
• OnProgress – se déclenche chaque fois qu'un fichier progresse dans son processus de téléchargement
• OnSuccess – se déclenche chaque fois qu'une demande est réussi – soit un téléchargement d'un fichier, ou la suppression d'un fichier.
• OnError – se déclenche chaque fois qu'une demande échoue – soit le téléchargement d'un fichier, soit la suppression d'un fichier
• OnCancel – se déclenche lorsque l'utilisateur clique sur le bouton "Annuler" d'un fichier qui est en cours de téléchargement
• OnClear – se déclenche lorsque l'utilisateur clique sur le bouton "Effacer"

Les arguments des événements fournissent la liste des fichiers, les actions correspondantes (téléchargement, suppression, etc.) et l'accès aux objets de requête afin que vous

Nouveau composant Blazor Tooltip

Un autre élément demandé par l'utilisateur que nous avons réussi à fournir dans cette version est le Tooltip component .

. peut fournir des métadonnées au serveur (telles que des informations d'authentification).

Le nouveau composant Blazor Tooltip vous permettra d'enrichir les informations affichées (en utilisant du texte, des images, du HTML et même des composants) dans une fenêtre contextuelle en réponse à des événements tels qu'un clic ou un survol.

Vous pouvez facilement remplacer l'info-bulle du navigateur par défaut pour afficher le titre Attributs e et alt d'une cible dans une fenêtre contextuelle élégante avec juste une ligne de code.

 < TelerikTooltip   TargetSelector  =  "pa Upload, Tooltip & Grid State" >  ] 
   </  TelerikTooltip >  
   < p >  
    < un   titre  =  "Bonjour Telerik UI Tooltip '?"    

   [19659076] </  p > 

Modèles

Pour pimenter la visualisation des données, le composant Info-bulle propose un modèle qui vous permet de personnaliser le contenu avec des images ou - pourquoi pas - d'autres composants, comme illustré dans l'exemple ci-dessous. Vous pouvez même l'utiliser pour charger du contenu à la demande en fonction des métadonnées cibles de l'infobulle.

Position

Vous pouvez facilement définir l'emplacement du composant Tooltip en fonction de son élément cible à l'aide du paramètre Position. Choisissez l'un des membres de l'énumération Telerik.Blazor.TooltipPosition et style en conséquence:

• Haut (valeur par défaut)
• Bas
• Droite
• Gauche

Tooltip Show Event

Vous pouvez contrôler ce l'interaction de l'utilisateur est montrée avec la cible de l'infobulle via le paramètre ShowOn qui prend un membre de l'énumération Telerik.Blazor.TooltipShowEvent:

 @ * La définition d'un événement show n'est pas obligatoire, elle est par défaut Hover * @  
   < TelerikTooltip   TargetSelector  =  "# hoverTarget"   ShowOn  =  "@ TooltipShowEvent.Hover" >  
   </  TelerikTooltip >  



  


               




   < div   id  =  "hoverTarget"   title  =  "Telerik Tooltip Component" >>  
    < fort > Survolez </  fort > moi pour voir l'info-bulle.   
   </  div >  
   @code { 
    TooltipShowEvent showEvent {get ; ensemble; } = TooltipShowEvent.Hover;   
  }  
   < style >  
    #hoverTarget {  
    position: absolue;   
   [19659131] haut: 200px;   
    gauche: 200px;   
    largeur: 200px;   
    fond: jaune;   
   }   
   </  style >  
  } 

Blazor Grid Nouvelles fonctionnalités

Comme le composant Grid a beaucoup d'attention de la part de notre développeur communauté, nous avons inclus dans le rel faciliter la livraison de deux éléments essentiels à partir du portail de commentaires Telerik UI for Blazor. Gestion de l'état du réseau & Le regroupement à partir du code donnera désormais aux développeurs le contrôle nécessaire sur le tri, le filtrage, le regroupement et les index hiérarchiques étendus à partir du code!

Gestion de l'état du réseau Blazor

A Le scénario courant lorsque vous travaillez avec une grille de données est de pouvoir définir par programmation différents aspects de la grille à partir du code, de permettre aux utilisateurs de personnaliser et d'enregistrer la façon dont les données sont structurées et visualisées, ou simplement de les laisser continuer là où ils se sont arrêtés.

La nouvelle fonctionnalité Telerik Blazor Grid State Management vous permettra d'enregistrer, de charger et de modifier tous les éléments configurables par l'utilisateur Grid: pagination, tri, filtrage, ordre des colonnes, regroupement de données et plus encore. Les événements OnStateInit et OnStateChanged et les méthodes SetState et GetState .

Avec la gestion de l'état du réseau, vous pourrez couvrir des cas d'utilisation courants tels que:

• Partager un état pour plusieurs utilisateurs clients
• Synchronisez l'état des différentes grilles sur une seule page
• Autorisez les utilisateurs à poursuivre leur filtrage, leur regroupement et leur modification s'ils ferment accidentellement leur navigateur sans aucune perte d'état

Consultez le Article de documentation de l'état de la grille pour plus de référence sur la gestion de l'état de la grille et plus d'exemples sur la façon de le gérer à l'aide de différents fournisseurs de stockage.

Groupement de grilles Blazor à partir du code

En plus du g existant option de rouping pour définir la propriété Groupable de la grille sur true, nous avons accordé la flexibilité de grouper les données de grille du code à l'état de grille.

Vous pouvez maintenant spécifier dans la logique de votre application les champs à regrouper également.

Blazor Grid Sorting from Code

Une autre histoire intéressante liée à la fonction Grid State est la capacité de effectuer grille de données triée à partir du code .

Vous pouvez spécifier le membre et le type de membre à trier, ainsi que la direction de mémorisation - ascendante ou descendante.

Rendez-vous récurrents du Planificateur Blazor

Le Planificateur a été enrichi avec l'option de définir les rendez-vous comme des événements récurrents - quotidiens, hebdomadaires, mensuels ou annuels. Pour chaque récurrence, vous pouvez spécifier son intervalle, le nombre de récurrences et les exceptions en définissant les paramètres RecurrenceIdField, RecurrenceRuleField et RecurrenceExceptionsField dans la balise .

Extension de code Visual Studio pour les projets Blazor

Bonne nouvelle pour tous les fans de Visual Studio Code - l'interface utilisateur Telerik pour Blazor 2.9.0 comprend une extension VS Code pour accélérer votre développement Blazor! Vous pouvez créer et configurer des projets Blazor en quelques étapes via un assistant directement dans Visual Studio Code.

Interface utilisateur Telerik pour l'extension de code Blazor Visual Studio

Vous pouvez télécharger l'extension à partir de Visual Studio Marketplace .

Télécharger Telerik UI pour Blazor 2.9.0

Rendez-vous sur la page Telerik UI pour Blazor et téléchargez la 2.9 Version .0 de Telerik UI pour Blazor Native Components. Continuez à nous dire ce qui fonctionne bien, ce qui doit changer et ce que vous aimeriez voir ensuite dans le portail dédié de commentaires Blazor ou dans la section des commentaires ci-dessous!

Si vous débutez avec Telerik UI pour Blazor, vous pouvez profiter d'un essai gratuit et commencer à jouer avec la dernière version immédiatement.

Commencer un essai gratuit aujourd'hui

Merci!

Que vous essayiez simplement Telerik UI pour Blazor pour la première fois ou que vous ayez été avec nous dans ce voyage au cours de la dernière année, merci à toute l'équipe Telerik UI pour Blazor de Progress d'avoir participé et de nous aider à grandir. et rendre l'interface utilisateur Telerik pour Blazor plus grande et meilleure.