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
-
Add the following NuGet packages:
Telerik.Reporting.Services.AspNetCore
Telerik.WebReportDesigner.Services
Microsoft.AspNetCore.Mvc.NewtonsoftJson
Add a folder with the
TRDP
/TRDX
reports.-
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) { } } }
-
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(); } } }
-
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?}"); }); } }
-
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> }
-
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.