Sélectionnez et filtrez les rapports avec Blazor et Telerik Reporting

La visionneuse de rapports Telerik permet à l'utilisateur de sélectionner facilement le rapport qu'il souhaite voir et de filtrer les données de ce rapport pour obtenir les informations dont il a besoin. Voici comment y parvenir dans une application Blazor.

La visionneuse de rapports de Telerik Reporting permet à vos utilisateurs d'obtenir facilement les informations dont ils ont besoin en sélectionnant le rapport de leur choix et en filtrant les données dans ce rapport. Voici comment y parvenir dans une application Blazor.

Bien que le contrôle Telerik ReportViewer facilite l'affichage des rapports intégrés dans votre application / service Web ou extraits du serveur de rapports Telerik, ce n'est que le début de l'histoire. Prêt à l'emploi, le ReportViewer donne aux utilisateurs la possibilité de zoomer / dézoomer, de télécharger le rapport dans une variété de formats (PDF, Excel, PowerPoint, etc.) et de contrôler l'affichage de la page. Mais, si vous êtes prêt à ajouter environ six lignes de code, vous pouvez également laisser l'utilisateur basculer entre les rapports et modifier les paramètres du rapport qui contrôlent les données affichées, le tout sans quitter la page.

Une des beautés de le ReportViewer est qu'il prend en charge des fonctionnalités identiques dans tous les frameworks .NET (Web Forms, MVC, .NET Core). Dans cet article, je couvrirai le code que vous utiliserez dans une application Blazor où le rapport est conservé dans un service Web que vous avez créé.

Blazor: Sélection de rapports

L'utilisation de ReportViewer dans une application Blazor nécessite Balisage d'interface utilisateur comme le suivant (ce balisage affiche un rapport appelé ContactList.trdp, récupéré à partir d'un service Web dans le même projet Web que la page de la visionneuse de rapport à l'URL relative api / reports). En ce qui concerne cet article, le point clé de ce balisage est l'attribut @ref qui lie le ReportViewer à une variable appelée reportViewer dans mon code Blazor:

Dans mon code Blazor, je dois déclarer (en tant que ReportViewer) la variable reportViewer cela me permet d'accéder au visualiseur depuis mon code:

 ReportViewer reportViewer;

Pour aider l'utilisateur à sélectionner un rapport différent du même service, je charge une liste déroulante sur la page avec une liste des rapports disponibles, en mettant le nom du rapport dans l'attribut value de chaque élément d'option. Je lie également l'événement onchange de la liste déroulante à une méthode appelée changeReport, en passant l'objet d'argument d'événement associé à la méthode:

 Liste de contacts 
     Liste de contacts par ville 
    … Plus de rapports…

Dans cette méthode changeReport, j'extrait le nom du rapport de la propriété Value de l'objet d'argument événement et j'utilise cette valeur pour modifier le rapport affiché. Pour afficher un nouveau rapport, il me suffit de modifier le nom du rapport contenu dans l’objet ReportSourceOptions du visualiseur. Je peux le faire en créant un nouvel objet ReportSourceOptions et en définissant sa propriété Report sur le nom de mon rapport.
Ce code crée un objet ReportSourceOptions, modifie le nom du rapport, puis définit le ReportSource de la visionneuse sur ce nouvel objet ReportSourceOptions à l'aide de la méthode SetReportAsync de la visionneuse:

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

Désormais, lorsque l'utilisateur sélectionne un nouveau rapport, ReportViwer affichera le nouveau rapport. Dans le cadre de l'affichage du rapport, le ReportViewer met également à jour ReportSourceOptions avec les options du nouveau rapport.

Blazor: Définition des paramètres

La mise à jour de ReportSourceOptions est importante car ce n'est pas seulement le nom du rapport qui est contenu dans l'objet d'options – tous les paramètres du rapport sont également conservés dans l'objet d'options. Les paramètres de rapport peuvent être utilisés de différentes manières dans les rapports Telerik, mais si vous utilisez ces paramètres pour filtrer les données du rapport, vous pouvez autoriser l'utilisateur à contrôler les données du rapport. Tout ce dont vous avez besoin est un code comme la méthode qui permet à l'utilisateur de sélectionner le rapport.

Par exemple, j'ai un rapport qui utilise un paramètre appelé Ville qui contrôle les données affichées dans le rapport. Pour filtrer les données du rapport, il me suffit de modifier la valeur de la ville dans le rapport. Cependant, plutôt que de créer un nouvel objet ReportSourceOptions comme je l'ai fait lors de la modification du rapport, j'utilise la méthode GetReportSourceAsync de la visionneuse pour récupérer l'objet ReportSourceOptions, puis mettre à jour les paramètres contenus dans l'objet.

Comme pour la sélection de rapports, je commence par fournir le utilisateur avec une liste déroulante de villes à choisir. Le balisage pour faire cela ressemble à ceci (et lie également cette liste déroulante à une méthode appelée changeCity):

 Minneapolis 
     Redmond 
    … Plus de villes…

Dans l'événement changeCity, je récupère les options ReportSourceOptions de la visionneuse (qui contient désormais à la fois le nom et les paramètres du rapport), définissent le paramètre City sur la valeur transmise dans l'argument d'événement et mets à jour les options du rapport. Étant donné que je récupère maintenant une valeur d'une méthode asynchrone, je dois utiliser le mot clé await sur mes appels de méthode et marquer la méthode avec le mot clé async. La méthode changeCity finit par ressembler à ceci:

 async void changeCity (ChangeEventArgs e)
{
   ReportSourceOptions rso = attendre reportViewer.GetReportSourceAsync ();
   rso.Parameters ["City"] = e.Value;
   attendre reportViewer.SetReportSourceAsync (rso);
}

Dans une application réelle, bien sûr, j'aurais besoin de plus que ces six lignes de code. J'aurais besoin, par exemple, de m'assurer que je n'affiche ma liste déroulante de villes que lorsque le rapport prend en charge le filtrage par ville. Mais même ainsi, avec ces six lignes de code, j’ai donné beaucoup de contrôle à l’utilisateur. Et c’est toujours une bonne chose.