août 4, 2020

Incorporation de rapports dans vos applications Web ASP.NET Core

Ce didacticiel vous apprend à obtenir des rapports à partir d'un service REST de rapports Telerik et à les afficher dans les applications ASP.NET Core.

Ce billet de blog montre comment intégrer la visionneuse de rapports Telerik HTML5 (ou la visionneuse en abrégé) et hébergez le service REST Telerik Reporting (ou service en abrégé) dans votre application Web ASP.NET Core 3+. Voici les sujets que je vais aborder:

Qu'est-ce que la visionneuse de rapports HTML5?

Le but de la visionneuse est d'afficher les documents de rapport sur une page Web. Sous le capot, le visualiseur est un widget personnalisé basé sur jQuery. Les widgets sont des plugins riches en fonctionnalités et avec état qui ont un cycle de vie complet, ainsi que des méthodes et des événements. La mise en page de la visionneuse est stockée dans un modèle HTML qui prend en charge les navigateurs mobiles et de bureau et est entièrement personnalisable. Semblable aux widgets d'interface utilisateur de Kendo le modèle HTML par défaut de la visionneuse prend en charge thèmes prédéfinis et thèmes personnalisés .

 ] services.AddRazorPages (). AddNewtonsoftJson ();

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

 services.AddControllers ();

 app.UseEndpoints (endpoints =>  
   { 
    endpoints.MapRazorPages ();   
     endpoints.MapControllers ();    
  });

 en utilisant   Microsoft.AspNetCore.Mvc;  
   en utilisant   Telerik. Reporting.Services;  
   using   Telerik.Reporting.Services.AspNetCore;  
  
   namespace   AspNetCoreReportViewerSample.Controllers  
   { 
    [Route( "api / reports" )]   [19659002]    public   class   ReportsController: ReportsControllerBase   
    {  
    public   ReportsController (IReportServiceConfiguration reportServiceConfiguration)   
   :  base  (reportService)  base  (reportService)  

    {  
   }   
   }   
  }

 < tête >  
    ...   
  
    @RenderSection ("Head", obligatoire: false)   
   </  head > [19659107] Dans  Pages / Index.cshtml vous avez besoin d'un élément  div  pour contenir le visualiseur. Cet élément doit avoir une valeur d'attribut unique  id qui sera utilisée ultérieurement dans le JavaScript du visualiseur. Il est également nécessaire de définir les dimensions de l'élément  div  via un fichier CSS ou un style en ligne, sinon le visualiseur ne sera pas visible sur la page: 

 < div   id  =  "reportViewer1"   style  =  "largeur: 940px; hauteur: 1300px" >  
   </  div  ]> 



  


               



 Ajoutez des liens vers le thème d'interface utilisateur Kendo souhaité dans la section personnalisée  Head  préparée précédemment:
 Enfin, ajoutez un lien vers le fichier JavaScript du widget de visualisation dans un  Scripts  et appelez la méthode  telerik_ReportViewer .
 La section  Scripts  aidera à insérer le script du visualiseur après la référence à jQuery dans le fichier de mise en page commun. Le visualiseur pourra alors trouver sa dépendance jQuery et étendre l'instance d'objet jQuery globale avec la méthode  telerik_ReportViewer .
  telerik_ReportViewer  est une méthode d'extension jQuery qui crée et configure le visualiseur objet. Dans cet exemple, l'objet visualiseur est créé à l'intérieur de l'élément  # reportViewer1   div .  serviceUrl  correspond à l'URL de la route  ReportsController  et la valeur de l'option  report  est le nom de fichier de la définition de rapport:
 @section Scripts { ] 
    <script src =  "/ api / reports / resources / js / telerikReportViewer" >    
  
    <script type =  "text / javascript" >   
    $ (document ) .ready ( function   () {  
    $ ( "# reportViewer1" )   
    .telerik_ReportViewer ({  
    serviceUrl:  "api / reports"   
    reportSource: {  
    report:  "Report Catalog.trdp"   
   },   
    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,   
  [1945169035] 
  [1945169035] ] échelle: 1,0   
   });   
   });   
       
  } 
 Ci-dessus se trouve la configuration minimale requise de l'objet spectateur. Pour une liste complète des options de configuration, des méthodes et des événements, consultez la  documentation de la visionneuse de rapports HTML5 .
 Voici à quoi ressemble le  Index.cshtml  final:
 @ page  
   @model IndexModel  
   @ { 
    ViewData ["Title"] = "Page d'accueil";   
  }  
  
   @section Head {


}  
  
   < div   class  =  "text-center" >  
    < div   id  =  "reportViewer1"   style  =  "largeur: 940px; hauteur: 1300px" >   
    </  div >   
   </  div >  
  
   @section Scripts { 
    <  script   src  =  "/ api / reports / resources / js / telerikReportViewer" > </  script >   
  
    < script   type  =  "text / javascript" >   
    $ (document) .ready (function () {  
    $ ("# reportViewer1")   
    .telerik_ReportViewer ({  
    serviceUrl: "api / reports",   [19659002]    reportSource: {  
    rapport: "Report Catalog.trdp"   
   },   
   [19659163] scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,   
    scale: 1.0   
   }) ;   
   });   
    </  script >   
  } 
 Il ne reste plus qu'à appuyer sur  F5  dans Visual Studio et voir comment le visualiseur de rapports HTML5 demandera le catalogue de rapports . rapport trdp  du service. Le service demandera au moteur de rapport de rendre la définition de rapport au format HTML5 et de la renvoyer à la visionneuse sous forme de document de rapport. Si tout se passe comme prévu, vous vous retrouverez à regarder un écran similaire:
  
 Si vous rencontrez des problèmes, appuyez sur  F12  pour rechercher des erreurs dans la console du navigateur et enregistrez le trafic réseau en utilisant  Fiddler . Toutes ces informations seront extrêmement précieuses si vous décidez de  contactez notre équipe d'assistance légendaire .
 Vous pouvez télécharger l'exemple d'application à partir du référentiel GitHub  telerik / reporting-samples .
 Tried Telerik DevCraft?
 Vous pouvez choisir  Telerik Reporting  et  Telerik Report Server  en tant que produits individuels ou profitez-en dans le cadre des offres groupées Telerik DevCraft.
   Essayez Telerik DevCraft 
 Telerik DevCraft est la meilleure collection d'outils de développement logiciel parmi les technologies .NET et JavaScript, qui comprend des composants d'interface utilisateur modernes, riches en fonctionnalités et conçus par des professionnels pour les applications Web, de bureau et mobiles, des solutions de gestion de rapports et de rapports, des bibliothèques de traitement de documents, des tests automatisés et des simulations outils des suites Telerik et Kendo UI. DevCraft vous fournira tout ce dont vous avez besoin pour fournir des applications exceptionnelles en moins de temps et avec moins d'efforts. Avec le soutien de notre équipe de support légendaire, qui se compose des développeurs qui créent les produits, et une tonne de ressources et de formations, vous pouvez être assuré que vous avez un partenaire stable sur lequel compter pour vos défis quotidiens tout au long de votre parcours de développement logiciel. [19659272]
 
 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
 août 4, 2020  Incorporation, rapports

Blog ARC Optimizer

Qu'est-ce que la visionneuse de rapports HTML5?

Qu'est-ce que le service Reporting REST?

Comment héberger le service REST de rapports dans votre application Web ASP.NET Core?

Comment demander un rapport et l'afficher dans la visionneuse de rapports HTML5?

Tried Telerik DevCraft?

Partager :

Articles similaires