New to Telerik Reporting? Download free 30-day trial

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


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


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.


  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;
        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)
  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.Configure<IISServerOptions>(options =>
                options.AllowSynchronousIO = true;
            // 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.UseEndpoints(endpoints =>
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
  6. The initialization of the designer has to look as follows:

    <!DOCTYPE html>
    <html xmlns="">
            <script src=""></script>
            <link href=",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" />
            <div id="webReportDesigner">
    @section scripts
        <script src=""></script>
        <script src=""></script>
        <script src="/api/reports/resources/js/telerikReportViewer"></script>
        <script src="api/reportdesigner/designerresources/js/webReportDesigner-"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                    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"
  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.

In this article