Using the HTML5 Report Viewer in an ASP.NET Core application in .NET 6, .NET 8 and .NET 9

This article guides you on how to add an HTML5 Report Viewer in an ASP.NET Core in .NET 6 web application.

Prerequisites

The report viewer requires a reference to a running Reports Web Service. The report viewer can consume reports generated and served by any of the following Reports Web Service implementations:

A service that runs in another application.
A service that runs in a Telerik Report Server instance.
A service that is hosted locally in the same application.

In case you need to host it locally, follow the article How to Host Reports Service in ASP.NET Core in .NET.

Integrating the HTML5 Report Viewer component using the VS Item Templates

The HTML5 Report Viewer can be integrated into ASP.NET Core applications with one the following two item templates:

Telerik Razor Report Viewer Page 2025 Q1
Telerik HTML5 Report Viewer Page 2025 Q1

The first template should be used when the project uses Razor Pages while the second can be used in all other scenario. The item templates allow you to quickly and easily add the HTML5 Report Viewer to the application. The wizards are the same for both item templates.

If you wish to connect the Report Viewer to a REST service, you can follow the steps outlined in the How to Use HTML5 Report Viewer with REST Service documentation article.

If you wish to connect the Report Viewer to a Report Server instance, refer to the article section Configuring the HTML5 Report Viewer to work with Report Server using Item Templates.

Manual Configuration of the HTML5 Report Viewer

This tutorial uses the Barcodes Report.trdp report definitions file that must be located in a Reports folder inside the project.
Make sure that the app configuration inside the Configure method of the Startup.cs can serve static files:
- C#
```
app.UseStaticFiles();
```

Add an HTML Page for the HTML5 Report Viewer by right-clicking on wwwroot and Add > New Item... > HTML Page. Name the file index.html and add the HTML5 Report Viewer's initialization. For a detailed explanation, check the HTML5 Report Viewer Manual Setup help article. The required references to jQuery and Telerik Kendo UI CSS and JS files are listed in the example below. By default, the necessary Report Viewer scripts and styles are served by the REST Service. The complete report viewer page should look like this:

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Telerik HTML5 Report Viewer Demo in ASP.NET Core in .NET 6</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
  <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" rel="stylesheet" />
  <script src="/api/reports/resources/js/telerikReportViewer"> </script>
  <style>
      #reportViewer1 {
          position: absolute;
          left: 5px;
          right: 5px;
          top: 50px;
          bottom: 5px;
          overflow: hidden;
          font-family: Verdana, Arial;
      }
  </style>
</head>
<body>
  <div id="reportViewer1">
      loading...
  </div>
  <script>
      $(document).ready(function () {
          $("#reportViewer1")
           .telerik_ReportViewer({
                  serviceUrl: "api/reports/",
                  reportSource: {
                      report: "Barcodes Report.trdp",
                      parameters: {}
                  },
                  viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
                  scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                  scale: 1.0,
                  enableAccessibility: false,
                  sendEmail: { enabled: true }
              });
      });
  </script>
</body>
</html>

Set the launchSettings.json launchUrl to the new HTML page.
Finally, run the project to see the report.

Demo project

A full example can be found in the installation folder of Telerik Reporting, by default: C:\Program Files (x86)\Progress\Telerik Reporting 2025 Q1\Examples\CSharp\.NET 6\Html5IntegrationDemo. Examples are available also for .NET 8 and .NET 9 in the corresponding subfolders.

Using the HTML5 Report Viewer in an ASP.NET Core application in .NET 6, .NET 8 and .NET 9

Prerequisites

Integrating the HTML5 Report Viewer component using the VS Item Templates

Manual Configuration of the HTML5 Report Viewer

Demo project

Getting Started

Support Resources

Community