Fermer

juin 9, 2020

Intégrer de beaux rapports dans vos applications Blazor


Il est facile d'afficher des rapports puissants dans vos applications Blazor à l'aide de Telerik Report Server et Report Viewer. Découvrez comment dans ce didacticiel rapide.

L'architecture de la solution Telerik Reporting facilite l'ajout de rapports à votre application Blazor côté client ou côté serveur. Étant donné que Telerik Report Viewer récupère les rapports en émettant des appels Ajax vers un serveur de rapports, cela n'a vraiment pas d'importance pour votre client Blazor que vous exécutiez dans Blazor côté client ou côté serveur (bien que vous ayez besoin de Blazor 3.1 ou version ultérieure)

Quelques informations techniques (n'hésitez pas à ignorer les deux paragraphes suivants): Pour configurer ce projet, j'ai d'abord installé Report Server à partir de mon compte Telerik. J'ai ensuite créé mon projet en utilisant la version 2.12.0 des contrôles Telerik, l'aperçu Visual Studio 2019 (version 16.6.0 Preview 6.0) et ASP.NET Core 16.6.934 / Razor Language Tools 16.1.0 / WebAssembly 3.2. 0 . J'ai créé deux applications à l'aide du modèle d'application Telerik C # Blazor: une avec le modèle d'application cliente vide et une avec le modèle d'application serveur vide. J'ai également téléchargé la base de données AdventureWorks pour l'utiliser avec mon rapport.

Configuration du Report Server

Avant d'utiliser Report Viewer dans un composant, vous devez configurer un projet pour agir en tant que Report Server (cela peut prendre jusqu'à cinq minutes). Pour cet article, je vais supposer que le projet affichant des rapports est également le projet Report Server (de cette façon, je n'ai pas à configurer les projets pour les problèmes de demande d'origine croisée).

Si vous travaillez avec Blazor côté serveur, vous n'avez qu'un seul projet dans votre solution, vous allez donc apporter toutes vos modifications à ce seul projet. Cependant, si vous travaillez avec Blazor côté client (nom officiel actuel: Blazor WebAssembly), vous aurez trois projets dans votre solution. Par conséquent, pour Blazor côté client, vous devez vous assurer que vous apportez les modifications Report Server (les modifications dans cette section) au projet avec vos contrôleurs côté serveur (le projet dont le nom se termine par «.Server») .

Vous aurez bien sûr besoin d'un rapport à afficher. J'ai créé mon propre rapport à l'aide de Telerik Report Designer R2 2020, exécuté sur la base de données AdventureWorks2017. Lors de la création du rapport, j'ai profité de l'occasion pour incorporer la chaîne de connexion de mon rapport dans le rapport lui-même. J'ai enregistré mon rapport dans un fichier appelé ContactList.trdp. Une fois que vous avez un rapport, vous devez l'ajouter à votre projet côté serveur: créez un dossier dans votre projet de serveur appelé «Rapports» et copiez-y votre rapport (dans mon cas, c'est mon fichier ContractList.trdp). [19659003] Pour commencer à configurer votre projet côté serveur pour agir en tant que serveur de rapports, ajoutez à votre projet de serveur le package NuGet Telerik.Reporting.Services.AspNetCore à partir du site Telerik NuGet à https://nuget.telerik.com/ nuget . Vous devrez également ajouter le package NuGet Microsoft.AspNet.Core.Mvc.NewtonsoftJson, cette fois à partir de NuGet.org .

Avec ces packages ajoutés, vous devez apporter des modifications à votre serveur -Classe de démarrage du projet. Dans la méthode ConfigureServices, recherchez la ligne services.AddRazorPages et modifiez-la comme suit:

 services.AddRazorPages (). AddNewtonsoftJson ();

Toujours dans la méthode ConfigureServices, ajoutez ceci pour une implémentation minimale de Report Server:

 services.TryAddSingleton  (sp => new ReportServiceConfiguration
            {
                Stockage = nouveau FileStorage (),
                ReportSourceResolver = new UriReportSourceResolver (
                        System.IO.Path.Combine (sp.GetService  (). ContentRootPath, "Reports")))
            });

La prochaine modification côté serveur consiste à créer la classe de contrôleur Report Server réelle. Ajoutez simplement une nouvelle classe à votre projet de serveur appelée ReportsController, et mettez-la dedans:

[Route("api/reports")]
 classe publique ReportsController: ReportsControllerBase
{
   public ReportsController (IReportServiceConfiguration reportServiceConfiguration)
            : base (reportServiceConfiguration)
        {
        }
}

Pour un projet Blazor côté client (si vous avez utilisé le même modèle que moi pour créer votre projet et incorporé la chaîne de connexion à votre source de données dans votre rapport, comme je l'ai fait), ce sont toutes les modifications requises dans votre code serveur. Si vous travaillez sur un projet Blazor côté serveur, vous devrez également ajouter cette ligne à la méthode ConfigureServices dans votre classe de démarrage:

 services.AddControllers ();

À partir d'ici, l'ajout de rapports à votre serveur de rapports consiste simplement à déposer le rapport dans le dossier Rapports de votre projet de serveur.

Dans la documentation Telerik, il existe une référence complète à la configuration d'un serveur de rapports qui vous offre davantage d'options, notamment la façon de stocker la chaîne de connexion de votre rapport dans le fichier appsettings.json de votre projet.

Utilisation le Report Viewer

Une fois votre serveur de rapports configuré, vous commencez à configurer vos pages côté client pour afficher des rapports avec ReportViewer. Si vous travaillez avec Blazor côté client, vous devrez basculer vers le projet avec vos pages Razor (le projet dont le nom se termine par «.Client»). Si vous travaillez avec Blazor côté serveur, vous continuerez à travailler dans le même projet.

Une fois que vous êtes sûr de travailler avec le bon projet, votre première étape consiste à ajouter une autre page NuGet à : Telerik.ReportViewer.Blazor (également depuis https://nuget.telerik.com/nuget ).

Vous devez maintenant ajouter le support JavaScript et CSS dont ReportViewer a besoin à la page d'accueil de votre application Blazor. . Si vous travaillez dans Blazor côté client, vous les ajouterez au fichier index.html dans le dossier wwwroot; si vous travaillez dans Blazor côté serveur, c'est le fichier _Host.cshtml dans le dossier Pages que vous souhaitez. Un ensemble minimal de balises, ajouté à l'élément de la page, ressemblerait à ceci (encore une fois, la documentation Telerik a une référence complète ):

Si vous avez déjà ajouté l'élément de script jQuery à cette page, vous devrez le supprimer (l'élément de script jQuery doit précéder l'élément de script telerikReportViewer).

Dans le même fichier, juste avant la fermeture tag, ajoutez cet élément:

Affichage du rapport

Vous êtes maintenant prêt à ajouter le composant ReportViewer aux pages Blazor de votre projet qui afficheront des rapports. Je viens de changer une page: la page Index.razor incluse dans le modèle de projet. Une implémentation minimale ressemble à ce qui suit: assurez-vous simplement de remplacer le nom du rapport par le nom de votre fichier de rapport. Puisque mon rapport était dans un fichier nommé ContactList.trdp, c'est ce que j'ai mis:

Vous aurez également besoin de cette directive en haut de votre fichier Razor:

 @using Telerik.ReportViewer.Blazor

Vous devriez maintenant pouvoir appuyer sur (ou dans un projet Blazor côté serveur) pour voir votre rapport.

Exploiter ReportViewer

Une fois que vous avez votre rapport à l'écran, vous peut commencer à exploiter la puissance de ReportViewer. Sans rien faire de plus, votre utilisateur pourra utiliser le menu de ReportViewer pour parcourir le rapport, le télécharger dans une variété de formats (PDF, CSV, RTF, TIFF) et l'imprimer. Avec une configuration supplémentaire, vous pouvez aider les utilisateurs à envoyer le rapport par e-mail ou à fournir des paramètres pour filtrer le rapport.

Par défaut, les utilisateurs peuvent faire défiler le rapport en continu (de nouvelles pages s'affichent lorsque l'utilisateur défile vers le bas d'une page). ). Si vous souhaitez que les utilisateurs parcourent toujours le rapport, vous pouvez ajouter l'attribut Page à votre composant ReportView et le définir sur PageMode.SinglePage, comme ceci:

     ViewerId = "rv1"
    PageMode = "@ PageMode.SinglePage"

Votre utilisateur peut également effectuer un zoom avant ou arrière sur votre rapport à l'aide des icônes de loupe de la barre de menus de ReportViewer. Cependant, vous pouvez contrôler le niveau de zoom de l'affichage initial avec l'attribut ScaleMode de ReportViewer. La définition de ScaleMode sur SaleMode.FitPage compactera par exemple une page entière du rapport dans une seule fenêtre de navigateur. Vous pouvez également définir ScaleMode sur ScaleMode.Specific et ajouter l'attribut Scale pour spécifier le niveau de zoom sur l'affichage initial du rapport, comme ceci:

   ScaleMode = "@ ScaleMode.Specific"
  Échelle = "1,2"
/>

L'étape la plus évidente est probablement de laisser vos utilisateurs choisir le rapport qu'ils souhaitent. C'est facile à faire: commencez par ajouter une liste déroulante de rapports à votre page (liée à une méthode de modification) et affectez le ReportViewer à un champ de votre code avec un attribut @ref:

 

     <ReportViewer ViewerId = "rv1"
                                @ ref = "theReport"
           …

Maintenant, l'ajout d'une déclaration de champ et de trois lignes de code dans votre méthode de modification permettra à votre utilisateur de sélectionner le rapport qu'il souhaite:

 ReportViewer theReport;

void changeReport (ChangeEventArgs e)
{
   ReportSourceOptions rso = new ReportSourceOptions ();
   rso.Report = e.Value.ToString ();
   theReport.SetReportSourceAsync (rso);
}

Vous êtes prêt à fournir de magnifiques rapports dans votre application Blazor.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link