Prise en main du Concepteur de rapports Web dans .NET

 @ {
 ViewData ["AppName"] = "MSWA.AspNetCore.Web"; 
} 
 



 
 
 
 
 <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
 intégrité = " sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXm "
 crossorigin =" anonyme "> 
 [19659097rc] 
 styles @RenderSection requis [19451290] [19451290] [scriptRenderSection requis] [19451290] //code.jquery.com/jquery-3.3.1.min.js"
 intégrité = "sha256-FgpCb / KJQlLNfOu91ta32o / NMZxltwRo8QtmkMRdAu8 =" 
 crossorigin = "anonyme"> 
 <script src = "anonyme"> 
 https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
 intégrité = "sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQorigskAP7hUibXfa" 194512Q crossbus " anonyme "> [1 9659098] <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
 intégrité = "sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQorigGiRRSQ1" CrossVLEHfe / JQorigGiRRSQ1 "crossVinFWpi = 1945VLEHfe / JQorigiRRSQQxSf125125125 "anonyme"> 
 
 
 
 @RenderSection ("scripts", obligatoire: faux) 


 

 

 @RenderBody () 
 [19659106] 


 

La page Report Designer

 @page   
   
   @ {  [19659007]    ViewData ["Title"] = "Web Report Designer";    
  }   
   
   @section styles {

}   
   
   @section scripts {  
   
    < script   src  =  "api / reportdesigner / resources / js / telerikReportViewer" > </  script >    
    < script   src  =  "api / reportdesigner / designerresources / js / webReportDesigner "> </  script >    
   
    < script   type  =  "text / javascript" >    
    $ (document) .ready (function () {   
    $ ("# webReportDesigner"). telerik_WebReportDesigner ({   [19659007]    persistSession: false,    [19659007]    toolboxSurface: {   
    layout: "list"    [19659007]   },    
    serviceUrl: "api / reportdesigner /",    
    rapport: "Product Catalog.trdp"    
   }). Data ("telerik_WebDesigner ");    
   });    
    </  script >    
   
  }   
   
   < div   id [19659125] =  "webReportDesigner" >   
    chargement ...    
   </  div > 

Client ASP.NET MVC

Il est important de noter que ci-dessus, le client de conception de rapports ASP.NET Core pourrait également utiliser une page HTML / CSS / JS simple qui est illustré dans l'article de documentation. Cependant, les extraits de code précédents peuvent également être utilisés dans l'implémentation ASP.NET MVC.

Pour plus de détails sur l'utilisation d'ASP.NET MVC, consultez Comment configurer WebReportDesigner dans l'application ASP.NET MVC qui montre également une approche légèrement différente de celle des extraits de code ci-dessous.

La vue Mise en page

 
 
   @ {  
    ViewBag.AppName = "AspNetMvc.Web";    
  }   
   
      
   < html >   
   <[19659123] head >   
    < meta   charset  =  "utf-8"   / >    
    < m eta   name  =  "viewport"   content  =  "width = device-width, initial-scale = 1.0" >    
    < title > @ ViewBag.Title - @ ViewBag.AppName </  title >    
    @ Scripts.Render ("~ / bundles / modernizr")    
    <[19659123] lien   rel  =  "feuille de style"   href  =  "// maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"    
    intégrité  =  "sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvSAiH0EJ [194500W6] [194500W6] [194500W6] [194500W6]    crossorigin  =  "anonyme" >    

 [1 9459106]   < link   rel  =  "stylesheet"   href  =  "~ / Content / Site.css"   />    
    @RenderSection ("styles", obligatoire: faux)    
   
    < script   src  =  "// code.jquery.com/jquery-3.3.1.min.js"    
    intégrité  =  "sha256-FgpCb / KJQlLNfOu91ta32o / NMZxltwRo8QtmkMRdAu8] [1945006] [1945006] [1945006] [1945006] [1945006] [1945906]    crossorigin  =  "anonyme" > </  script >    

    < script   src  =  "// cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"    
    intégrité  =  "sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQsAP7hUib039j7fakFP4 [194500skv6] [194500skv6] [194500skv6] [194500skv6] [194500skv6] [194500skv6] [194500skv6]  crossorigin  =  "anonyme" > </  script >    

   [19659113] < script   src  =  "// maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"    [19659007]    intégrité  =  "sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQGiRRSQQxSfFWpi1MquVdAyorigUar5 + 76PVCmYl         =  "anonyme" > </  script >    
    < script   src  =  "// kendo.cdn.tele rik.com/2020.1.114/js/kendo.all.min.js"> </  script >    
    @RenderSection ("scripts", obligatoire: faux)    
   </  head >   [19659007]   < body >   
    < div   class  =  "Contenu du corps du conteneur" >    
    @RenderBody ()    
    </  div >    
   </  body >   
   </  html > 

La vue du concepteur de rapports

 @ {  
    ViewBag .Title = "Web Repor t Designer ";    
  }   
   
   @section styles {  
    < link   href  =  "// fonts.googleapis.com/css?family=Roboto: 400 500 & display = swap "  rel  = " styleheet ">    
  }   [19659007]   
   @section scripts {  
    < script   src  =  "~ / api / reportdesigner / resources / js / telerikReportViewer" > </  script >    
   [19659113] < script   src  =  "~ / api / reportdesigner / designerresources / js / webReportDesigner" > </  script  >    
   
    < script   type  =  "text / javascript ">    
    $ (document) .ready (function () {   
    $ ("# webReportDesigner"). Telerik_WebReportDesigner ({   
    persistentSession: [1945900699] ]  

    toolboxZone: {   
    layout: "list"   ]  
   },    
    serviceUrl: "api / reportdesigner /",    
  [1 9459107]  rapport: "Product Catalog.trdp"    
   }). Data ("telerik_WebDesigner");    
   });    
    </  script >    
   
  }   
   [1965109007]    ] < div   id  =  "webReportDesigner" >   

    loading ...    
   </  div > 

Service REST du concepteur de rapports Web

De la même manière que nos visionneuses de rapports, le concepteur de rapports Web utilise un backend REST . En fait, l'API ReportDesignerControllerBase hérite de l'API ReportControllerBase utilisée dans l'implémentation du service REST de rapport.

La ​​principale différence entre les implémentations ASP.NET Core et ASP.NET MVC réside dans les capacités du framework. Principalement, ASP.NET Core inclut l'injection de dépendances et MVC ne le fait pas. À part cela, la configuration sera presque identique.

Service de concepteur de rapports Web ASP.NET Core

ASP.NET Core utilise une classe de démarrage pour configurer ses applications. Le Concepteur de rapports Web dans ASP.NET Core est également configuré ici également. La configuration comprendra une section pour ReportingService et WebReportDesignerService, comme indiqué dans l'extrait de code suivant.

 public   class   Startup   
   {  
    public   Démarrage (configuration IConfiguration)    
    {   
    Configuration = configuration;    
   }    
   
    public   IConfiguration Configuration { get ; }    
   
    public   void   ConfigureServices (services IServiceCollection)    
    {   
    // Add CORS (Ceci est ouvert à des fins d'illustration)    
    services.AddCors (opts =>    
    {   
    opts.AddDefaultPolicy (p =>    
    {   
    p.AllowAnyOrigin ();    
    p. ();    [19659007]    p.AllowAnyHeader ();    
   });    
   });    
   
    // Add WebAPI for ASP.NET Core    
    services.AddControllers ();    
   [19659007]    // Ajouter des pages de rasoir    
    services.AddRazorPages ()    
    .AddNewtonsoftJson ();    
   
    // Ajoutez l'E / S synchrone IIS    
    services.Configure  (options =>    
    {   [19659007]    options.AllowSynchronousIO =  true ;    
   });    
   
    // Configurer les dépendances pour ReportServiceConfiguration.    
   
  
   services.TryAddSingleton  (sp =>    
    new   ReportServiceConfiguration      ]    {   

    ReportingEngineConfiguration = sp.GetRequiredService  (),  
 (),  
 

    HostAppId =  "DotNetCoreApp"    
    Storage 19659123] nouveau   FileStorage (),    
    ReportSourceResolver =  new   TypeReportSourceResolver () [19450090699] [1945990699] [1945990699]

                .AddFallbackResolver(new UriReportSourceResolver(
                    Path.Combine(sp.GetService().ContentRootPath, "Reports")))
            });
 
        // Configure dependencies for ReportDesignerServiceConfiguration. 
        services.TryAddSingleton(sp => new ReportDesignerServiceConfiguration {
            DefinitionStorage = new FileDefinitionStorage(Path.Combine(sp.GetService().ContentRootPath, "Reports")),
            SettingsStorage = new FileSettingsStorage(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting")),
            ResourceStorage = new ResourceStorage(Path.Combine(sp.GetService().ContentRootPath, "Reports""Resources")),
        });
    }
 
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
 
        // Uses CORS
        app.UseCors();[19659007] 
        // Uses Static Files
        app.UseStaticFiles();
 
        // Uses Routing
        app.UseRouting();
 
        // Maps Web API and Razor Pages
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapRazorPages();
        });
    }
}

ASP.NET Core's Dependency Injection makes the controller implementation simple as shown in the below code snippet.

[Route("api/[controller]")]
public class ReportDesignerController : ReportDesignerControllerBase
{
    public ReportDesignerController(IReportDesignerServiceConfiguration reportDesignerServiceConfiguration,
        IReportServiceConfiguration reportServiceConfiguration) 
        : base(reportDesignerServiceConfiguration, reportServic eConfiguration)
    { }
}

ASP.NET MVC Web Report Designer Service

ASP.NET MVC configuration will need to be in the constructor of the controller. This is also exactly like the MVC Report Viewer implementations as well. Furthermore, it will also include both the ReportService and ReportDesignerService configurations.

public class ReportDesignerController : ReportDesignerControllerBase
{
    static readonly ReportServiceConfiguration ConfigurationInstance;
    static readonly ReportDesignerServiceConfiguration DesignerConfigurationInstance;
 
    static ReportDesignerController()
    {
        //This is the folder that contains the report definitions
         //In this case this is the Reports folder
        string reportsPath = Path.Combine(HttpContext.Current.Server.MapPath("~/"), "Reports"); 
 
        //Setup the ReportServiceConfiguration
        ConfigurationInstance = new ReportServiceConfiguration
        {
            HostAppId = "AspNetMvcApp",
            Storage = new FileStorage(),
            ReportSourceResolver = CreateResolver(reportsPath),
            //ReportSharingTimeout = 1000,
            //ClientSessionTimeout = 20, 
        };
 
        DesignerConfigurationInstance = new ReportDesignerServiceConfiguration
        {
            DefinitionStorage = new FileDefinitionStorage(reportsPath),
            SettingsStorage = new FileSettingsStorage(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting"))
        };
    }
 
     public ReportDesignerController()
    {
        //Initialize the service configuration
        ReportServiceConfiguration = ConfigurationInstance;
        ReportDesignerServiceConfiguration = DesignerConfigurationInstance;
    }
 
    static IReportSourceResolver CreateResolver(string reportsPath)
    {
        return new UriRep ortSourceResolver(reportsPath)
            .AddFallbackResolver(new TypeReportSourceResolver());
    }
}

That covers the specifics of setting up the Web Report Designer Client and the Web Report Designer Service in either an ASP.NET Core or ASP.NET MVC application. Additionally, it provides additional information for requirements and recommended steps. However, there are some additional complexities that should be addressed as well.

Complexities with the Web Report Designer

The Web Report Designer delivers powerful report design capabilities at near feature parity to our desktop designers. However, since this is delivered over the web some features will be more complex. These include handling databases and report file management.

Handling Databases

Connection strings for databases are made available through the SqlDataSource Wizard using the application configuration file through the ISettingsStorage interface. The end-user can save connection strings to the local Web Report Designer settings file using the default FileSettingsStorage implementation.

Report File Management

Out-of-the-box the Web Report Designer uses the FileDefinitionStorage implementation which enables managing files using the file system. A bonus is that all the Storage API methods are virtual and can be overridden and modified. These virtual methods enable implementing Custom Report Definition Storage.

Conclusion

This concludes part two of the Report Designer series. We reviewed some important design concepts for all of our designers, feature parity between the desktop designer and the web designer along with the Web Report Designer Architecture across both ASP.NET Core and MVC. Lastly, we reviewed important complexities of the Web Report designer.

I hope that you enjoyed a more detailed review of the Web Report Designer. I intended for this post to be more technical in nature. In the next post, I will include more technical information for the desktop designers and walk through building a report. I imagine there will be some overlap.

Want to Try Telerik Reporting?

Telerik Reporting is a complete, easy-to-use, and powerful .NET embedded reporting tool for web and desktop applications that support: ASP.NET Core, Blazor, ASP.NET MVC, ASP.NET AJAX, HTML5/JS, Angular, React,Vue, WPF, WinForms. Also available as a part of our Telerik DevCraft Complete bundleReporting allows you to create, style, view, and export rich, interactive, and reusable reports to attractively present analytical and any business data. Add reports to any business application through report viewer controls. Export the ready reports in more than 15 formats. Download a FREE trial today.