Adding Telerik Web Report Designer in ASP.NET Core 3.1 MVC Project

Environment

Product Version	14.0.20.115+
Product	Progress® Telerik® Reporting
.Net Framework	.NET Core 3.1

Description

This KB article lists all necessary steps for integrating our Web Report Designer in .NET Core MVC 3.1 project. It is based on How To Host Reports Service In ASP.NET Core 3+ and How to Set Up the WebReportDesigner in .NET Core Applications. The same approach can be applied for .NET Core MVC 3.0 project.

Solution

1. Add the following NuGet packages:

   • Telerik.Reporting.Services.AspNetCore
   • Telerik.WebReportDesigner.Services
   • Microsoft.AspNetCore.Mvc.NewtonsoftJson

2. Add a folder with the TRDP / TRDX reports.

3. Add the ReportDesignerController:

   namespace WebApplication1.Controllers
   {
       using Microsoft.AspNetCore.Mvc;
       using Telerik.Reporting.Services;
       using Telerik.WebReportDesigner.Services;
       using Telerik.WebReportDesigner.Services.Controllers;
   
       [Route("api/reportdesigner")]
       public class ReportDesignerController : ReportDesignerControllerBase
       {
           public ReportDesignerController(IReportDesignerServiceConfiguration reportDesignerServiceConfiguration, IReportServiceConfiguration reportServiceConfiguration)
               : base(reportDesignerServiceConfiguration, reportServiceConfiguration)
           {
           }
       }
   }
   

4. Add a new class named ConfigurationHelper:

   using Microsoft.AspNetCore.Hosting;
   using Microsoft.Extensions.Configuration;
   
   namespace WebApplication1
   {
       static class ConfigurationHelper
       {
           public static IConfiguration ResolveConfiguration(IWebHostEnvironment environment)
           {
               var reportingConfigFileName = System.IO.Path.Combine(environment.ContentRootPath, "appsettings.json");
               return new ConfigurationBuilder()
                   .AddJsonFile(reportingConfigFileName, true)
                   .Build();
           }
       }
   }
   

5. Add the required configurations in the Startup.cs from Set Up the Startup.cs File for the Reports Service:

   public class Startup
   {
       public Startup(IConfiguration configuration)
       {
           Configuration = configuration;
       }
   
       public IConfiguration Configuration { get; }
   
       // This method gets called by the runtime. Use this method to add services to the container.
       public void ConfigureServices(IServiceCollection services)
       {
           services.AddControllersWithViews();
           services.AddControllers();
           services.Configure<IISServerOptions>(options =>
           {
               options.AllowSynchronousIO = true;
           });
           services.AddRazorPages()
           .AddNewtonsoftJson();
           // Configure dependencies for ReportsController.
           services.TryAddSingleton<IReportServiceConfiguration>(sp =>
               new ReportServiceConfiguration
               {
                   ReportingEngineConfiguration = ConfigurationHelper.ResolveConfiguration(sp.GetService<IWebHostEnvironment>()),
                   HostAppId = "ReportingCore3App",
                   Storage = new FileStorage(),
                   ReportResolver = new ReportFileResolver(
                       System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "Reports"))
               });
   
           services.TryAddSingleton<IReportDesignerServiceConfiguration>(sp => new ReportDesignerServiceConfiguration
           {
               DefinitionStorage = new FileDefinitionStorage(
                   Path.Combine(sp.GetService<Microsoft.AspNetCore.Hosting.IHostingEnvironment>().ContentRootPath, "Reports")),
               SettingsStorage = new FileSettingsStorage(
                   Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting"))
           });
       }
   
       // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
       public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
       {
           if (env.IsDevelopment())
           {
               app.UseDeveloperExceptionPage();
           }
           else
           {
               app.UseExceptionHandler("/Home/Error");
           }
   
           app.UseStaticFiles();
           app.UseRouting();
           app.UseAuthorization();
           app.UseEndpoints(endpoints =>
           {
               endpoints.MapControllers();
               endpoints.MapControllerRoute(
                   name: "default",
                   pattern: "{controller=Home}/{action=Index}/{id?}");
           });
       }
   }
   

6. The initialization of the designer has to look as follows:

   <!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
           <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
           <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
   
           <title>Telerik HTML5 Report Viewer Demo</title>
   
           <meta http-equiv="X-UA-Compatible" content="IE=edge" />
           <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
       </head>
       <body>
           <div id="webReportDesigner">
               loading...
           </div>
       </body>
   </html>
   
   @section scripts
   {
       <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
       <script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
   
       <script src="/api/reports/resources/js/telerikReportViewer"></script>
       <script src="api/reportdesigner/designerresources/js/webReportDesigner-14.1.20.618.min.js/"></script>
   
       <script type="text/javascript">
           $(document).ready(function () {
               $("#webReportDesigner").telerik_WebReportDesigner({
                   toolboxArea: {
                       layout: "list" //Change to "grid" to display the contents of the Components area in a flow grid layout.
                   },
                   serviceUrl: "api/reportdesigner/",
                   report: "Barcodes Report.trdp"
               }).data("telerik_WebDesigner");
           });
       </script>
   }
   

7. If you are using SQL DataSource with Named/Shared connection string, add the connection string in the appsettings.json file. Here is a sample for the MSSQL database:

   "ConnectionStrings": [
       {
           "name": "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString",
           "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
           "providerName": "System.Data.SqlClient"
       }
   ]
   

Demo Application

For the demo, refer to the Reporting Samples GitHub repository.