Telerik Reporting and ASP.NET Core

In this getting started tutorial, learn how to get started creating powerful reports with Telerik Reporting and ASP.NET Core.

Do you remember Getting Started with Telerik Reporting and ASP.NET 5? Times have changed, and now we all have ASP.NET Core, it’s supported in our products and we’ve even made new developer toolsjust for it. There is no more MVC6 and ASP.NET5.

Yes, names changed a lot and we have followed suit. Let’s talk about getting started with Telerik Reporting and ASP.NET Core.

To get started with ASP.NET Core we recommend reviewing the official Microsoft documentation available at Introduction to ASP.NET Core (docs.microsoft.com), and the mandatory downloads to prepare your development environment:

• Visual Studio 2015 Update 3
• NET Core 1.0.1 - VS 2015 Tooling Preview 2

Once the machine is ready, we can go on with the settings:

Creating a Sample ASP.NET Core Project

1. Open Visual Studio 2015 Update 3
2. From the File menu, select New > Project
3. In the New Project dialog, expand Installed > Templates > Visual C# > Web, and select ASP.NET Core Web Application (.NET Framework) project template. Choose a name for the project and click OK.
4. From the ASP.NET Core Templates select Web Application

Visual Basic templates for ASP.NET Core are not available. Please pay a special attention to the type of project we are initiating.

Getting Ready to Add Telerik Reporting
You will have to prepare the project for Telerik Reporting.
Open the project.json file. The "frameworks" property should look like this:

"frameworks": {    "net461": { }},

The above setting is required since the Telerik Reporting engine needs the full .NET framework. Note, that using multiple target frameworks will force Visual Studio to build your project as if it will run on all frameworks, and ultimately you will not be able to start it.

We are going to add the Reporting REST service in the same project, which means the Reporting engine will be there and it requires a Windows OS machine with .NET 4 Framework or greater.

Adding the NuGet Packages

ASP.NET Core does not support references to assemblies, but instead works with references to NuGet packages. To setup the Reporting REST service you have to reference the latest Telerik.Reporting.nupkg and Telerik.Reporting.Services.AspNetCore.nupkg NuGet packages from the private Telerik NuGet feed. You can learn how to add a NuGet feed here.

You will need your Telerik account credentials for this operation.

Setting up the REST Service

1. In your project, right-click References, choose Manage NuGet Packages and from the Package source drop-down menu, select Telerik private feed
2. Install Telerik.Reporting and Telerik.Reporting.Services.AspNetCore NuGet packages, which is necessary for the Telerik Reporting REST Service and the Reporting engine
3. Once the packages are referenced, you have to implement a Reports controller. Right-click on the Controllers folder and add a new item: Add > New item > Installed > ASP.NET > Web API Controller Class item. Name it ReportsController. This will be our Telerik Reporting REST service in the project.
4. It will have to inherit the ReportsControllerBase type from the NuGet package and provide proper settings for the service's ReportResolver and Storage. This is how a basic implementation of the controller should look:
   
   
   C#

   namespaceWebApplication1.Controllers

   {

       usingSystem.IO;

       usingMicrosoft.AspNetCore.Hosting;

       usingTelerik.Reporting.Cache.File;

       usingTelerik.Reporting.Services;

       usingTelerik.Reporting.Services.AspNetCore;

    

       publicclassReportsController : ReportsControllerBase

       {              

           publicReportsController(IHostingEnvironment environment)

           {

               var reportsPath =

                  Path.Combine(environment.WebRootPath, "Reports");

    

               this.ReportServiceConfiguration =

                  newReportServiceConfiguration

                   {

                       HostAppId = "Html5DemoApp",

                       Storage = newFileStorage(),

                       ReportResolver = newReportFileResolver(reportsPath),

                       // ReportSharingTimeout = 0,

                       // ClientSessionTimeout = 15,

                   };

            }

       }

   }
   
   
   
5. After the Reports controller is setup, you have to create an MVC page view with the HTML5 report viewer. To do so, open the HomeController, added by the VS ASP.NET Core project template, and add an action method named Report:
   
   
   C#

   publicIActionResult Report()

   {

       ViewBag.Message = "Your reports page.";

       returnView();

   }

Adding the HTML5 Report Viewer

1. To set up a folder for the reports, right-click on wwwroot and select Add > New Folder. Name the folder Reports and add sample reports in TRDP format for easiness. You can find sample reports in {Telerik Reporting installation path}\Report Designer\Examples if you have an existing installation of the Telerik Reporting product.
   
   Note that the name of the folder is considered with the folder path used by the ReportFileResolver in the ReportsController.
   
   This tutorial will use Barcodes Report.trdp in all examples.
2. Add a view that contains the HTML5 Report Viewer.
   
   Open the Views folder, right-click on the Home folder and select Add > New Item > Installed > ASP.NET. Then add a new MVC View Page named Report. We want the Report action in the HomeController to target this view.
   
   Add the HTML5 Report Viewer. For a detailed explanation, check the HTML5 Report Viewer Manual Setup help article in the online documentation.
   
   The required references to jQuery and Telerik Kendo UI CSS and JS files are listed in the example below. We use Telerik Kendo UI to build the viewer.
   You will have to manually copy C:\Program Files (x86)\Telerik\Reporting R3 2016\Html5\ReportViewer folder under wwwroot. This folder contains the HTML5 Viewer’s HTML, CSS and JS template files, without them the viewer will not work.
   
   
   Important:
   Whenever you need to route a relative path you will have to use Url.Content helper, like this:
   
   

   Html@Url.Content("~/api/reports/")

   
   instead of simply pasting the path.
   
   The complete Report view (Report.cshtml) should look like this:
   
   
   Html

   @{

       Layout = null;

   }

   <!DOCTYPE html>

   <html>

   <head>

       <title>APS.NET Core HTML5 Report Viewer Demo</title>

    

       <metacharset="utf-8"/>

       <metahttp-equiv="X-UA-Compatible"content="IE=edge"/>

       <metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"/>

    

       <scriptsrc="https://code.jquery.com/jquery-2.2.4.min.js"integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crossorigin="anonymous"></script>

    

       <linkhref="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"rel="stylesheet"/>

       <linkhref="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css"rel="stylesheet"/>

    

       <!--kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js-->

       <scriptsrc="http://cdn.kendostatic.com/2015.3.930/js/kendo.web.min.js"></script>

    

       <!--kendo.mobile.min.js - optional, if gestures/touch support is required-->

       <scriptsrc="http://cdn.kendostatic.com/2015.3.930/js/kendo.mobile.min.js"></script>

    

       <scriptsrc="/api/reports/resources/js/telerikReportViewer-10.2.16.1003.min.js"></script>

    

       <style>

           #reportViewer1 {

               position: absolute;

               left: 5px;

               right: 5px;

               top: 5px;

               bottom: 5px;

               overflow: hidden;

               font-family: Verdana, Arial;

           }

       </style>

   </head>

    

   <body>

       <divid="reportViewer1">

           loading...

       </div>

    

       <scripttype="text/javascript">

           $(document).ready(function () {

               $("#reportViewer1")

                   .telerik_ReportViewer({

                       // The URL of the service which will serve reports.

                       // The URL corresponds to the name of the controller class (ReportsController).

                       // For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.

                       serviceUrl: '@Url.Content("~/api/reports/")',

    

                       // The URL for the report viewer template. The template can be edited -

                       // new functionalities can be added and unneeded ones can be removed.

                       // For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.

                       @*templateUrl: '@Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-FA.html")',*@

    

                       //ReportSource - report description

                       reportSource: {

    

                           // The report can be set to a report file name

                           // or CLR type name (report class definition).

                           report: "Barcodes Report.trdp",

    

                           // Parameters name value dictionary

                           parameters: {}

                       },

    

                       // Specifies whether the viewer is in interactive or print preview mode.

                       // PRINT_PREVIEW - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.

                       // INTERACTIVE - Displays the report in its original width and height without paging. Additionally interactivity is enabled.

                       viewMode: telerikReportViewer.ViewModes.INTERACTIVE,

    

                       // Sets the scale mode of the viewer.

                       // Three modes exist currently:

                       // FIT_PAGE - The whole report will fit on the page (will zoom in or out), regardless of its width and height.

                       // FIT_PAGE_WIDTH - The report will be zoomed in or out so that the width of the screen and the width of the report match.

                       // SPECIFIC - Uses the scale to zoom in and out the report.

                       scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,

    

                       // Zoom in and out the report using the scale

                       // 1.0 is equal to 100%, i.e. the original size of the report

                       scale: 1.0,

                   });

           });

       </script>

   </body>

   </html>
   
   
   The reference to the report viewer's JavaScript file (telerikReportViewer-x.x.x.x.min.js) should be updated to the corresponding version of the Reporting NuGet package.
3. To add a link to the Report view in the Home page navigation open Views\Shared\_Layout.cshtml page and add:
   

   Html   

   <li><a asp-area="" asp-controller="Home" asp-action="Report">Report</a></li>

   list item to the navigation. It should become like this:

   Html

    

   <li><aasp-area=""asp-controller="Home"asp-action="Index">Home</a></li>

    

   <li><aasp-area=""asp-controller="Home"asp-action="About">About</a></li>

    

   <li><aasp-area=""asp-controller="Home"asp-action="Contact">Contact</a></li>

    

   <li><aasp-area=""asp-controller="Home"asp-action="Report">Report</a></li>

Connection Strings and Engine Configuration

Telerik Reporting relies on the ConfigurationManager to resolve named connection strings and to configure the reporting engine. Thus if you have any named connectionstrings in your reports or you need to configure Telerik Reporting you have to add app.config configuration file to the project's root. For more information see: Telerik Reporting Configuration Section.
For example:

Finally, run the project and navigate to the Report view to see the report.

What You Should Know about Telerik Reporting in ASP.NET Core Projects

What we did with Telerik Reporting is to allow previewing Telerik Reports. The processing and rendering mechanisms are bound to Windows OS and its GDI+ API. The good news is that for some years now we have been working on separating preview from document generation.

This means you can host the Reporting REST Service separately on a Windows server and let your HTML5 Viewer run freely in any other environment you have to support.

Try Reporting Out Today

Ready to give Telerik Reporting a try? You can learn more here or download a free trial at the link below. We always appreciate your feedback (the real world voice) to help us keep making things better.

Try Reporting Now