How To Create Telerik Report

How to Use Telerik HTML5 Report Viewer in ASP.NET Core

This blog post demonstrates how to embed the Telerik HTML5 Report Viewer (or viewer for short) and host the Telerik Reporting REST Service (or service for short) in your ASP.NET Core 3+ web application.

What is the HTML5 Report Viewer?

The viewer's purpose is to display report documents on a web page. Under the hood, the viewer is a custom jQuery-based widget. Widgets are feature-rich, stateful plugins that have a full life cycle, along with methods and events. The layout of the viewer is stored in an HTML template that supports mobile and desktop browsers and is fully customizable.

What is the Reporting REST Service?

The viewer cannot do the processing and rendering work by itself and this is where the Reporting REST Service comes in. The service wraps the Report Engine and exposes its functionality over HTTP, so the viewer can access it. A common scenario for the viewer-service interaction described in a high-level of abstraction would be:

The viewer requests a report document by providing the report definition's unique identifier (for example, the file nameMyReport.trdx)
The service searches for the requested report definition and instructs the Report Engine to process and render it to an HTML5 report document
The service returns the produced result to the viewer
The viewer displays the report document to the user

For convenience, the service can also provide all the required HTML5 Report Viewer widget resources – JavaScript, CSS, and HTML template files.

How to Host the Reporting REST Service in Your ASP.NET Core Web Application?

As the viewer cannot function without the service, let's review the steps to host the service first. For this post, I'll assume that the project displaying reports is also the service project. That way I don't have to configure Cross-Origin Resource Sharing (CORS). However, if you need to use separate projects in your solution, here is a very good article that explains how to enable CORS in ASP.NET Core.

If you don't have an existing ASP.NET Core web application, follow these steps to create one:

Start Visual Studio 2019
OpenFile >New >Project…
SelectASP.NET Core Web Application and clickNext
Enter yourProject name and clickCreate
Select.NET Core andASP.NET Core 3.1 for the framework version
Select theWeb Application template and clickCreate

To host the Reporting REST Service in this project or another existing project, add the NuGet packageTelerik.Reporting.Services.AspNetCore from the Telerik NuGet feed at https://nuget.telerik.com/nuget.

The service package will add its own dependencies to the project, such asMicrosoft.AspNet.Core.Mvc.NewtonsoftJson. To activate theNewtonsoftJson package dependency, openStartup.cs and change theservices.AddRazorPages line in theConfigureServices method to:

                services.                  AddRazorPages                  (                  )                  .                  AddNewtonsoftJson                  (                  )                  ;

Right below this line add the configuration code for a minimal Reporting REST Service implementation (add appropriate usings as well):

                  services.                                          TryAddSingleton                      <                      IReportServiceConfiguration                      >                                        (                    sp                    =                    >                    new                    ReportServiceConfiguration                    {                    Storage                    =                    new                    FileStorage                    (                    )                    ,                    ReportSourceResolver                    =                    new                    UriReportSourceResolver                    (                    System.IO.Path.                    Combine                    (                    sp.                                          GetService                      <                      IWebHostEnvironment                      >                                        (                    )                    .ContentRootPath,                    "Reports"                    )                    )                    }                    )                    ;

TheStorage configuration above specifies that the service will save its internal state objects and temp files on the file system. Other storage options are also available.

TheReportSourceResolver option instructs the service to search for report definition files inside theReports application folder.

TheReports folder does not exist yet, but you'll create it in a moment since you'll need to add report definition files there. I grabbed my report definition (Report Catalog.trdp) from the Telerik Reporting installation folder –C:\Program Files (x86)\Progress\Telerik Reporting R2 2020\Report Designer\Examples, but you can create a new one using the Standalone Report Designer. Once you have a report definition, you need to add it to your project:

Create a folder in the root of your project calledReports
Copy your report definition file into it

Also inside theConfigureServices method, make sure the application is configured for API controllers by adding:

                  services.                    AddControllers                    (                    )                    ;

And map those controller endpoints by adding the following line (endpoints.MapControllers();) to theConfigure method:

Andriy Kravets is writer and experience .NET developer and like .NET for regular development. He likes to build cross-platform libraries/software with .NET.