Display SSRS RDL report in Bold Reports^® ASP.NET Core Report Viewer

To display an existing SSRS RDL report in the Bold Reports^® ASP.NET Core Report Viewer without a Report Server, create an ASP.NET Core reporting web application in .NET 8.0 or .NET 9.0. Follow these step-by-step instructions.

To create your first application on the other .NET Core versions lower than .NET 8.0, refer to the documentation for ASP .NET Core 2.1, ASP.NET Core 3.1, .NET 5.0 or .NET 6.0

To get started quickly with the ASP.NET Core Report Viewer, watch the following video:

How do I create an ASP.NET Core application for the Report Viewer?

To create an ASP.NET Core application for the Bold Reports^® ASP.NET Core Report Viewer, start Visual Studio 2022, create an ASP.NET Core Web App (Model-View-Controller) project, and choose .NET 8.0 or .NET 9.0.

1. Start Visual Studio 2022 and click Create new project.
2. Choose ASP.NET Core Web App (Model-View-Controller), and then click Next.
3. Change the project name, and then click Next.
4. In the dropdown for the .NET version, choose .NET 8.0 or .NET 9.0, then click Create.

To use Bold Reports^® with ASP.NET Core on Linux or macOS, refer to the Can Bold Reports^® be used with ASP.NET Core on Linux and macOS section.

List of dependency libraries

1. In the Solution Explorer tab, right-click the project or solution, and choose Manage NuGet Packages. Alternatively, select the Tools > NuGet Package Manager > Manage NuGet Packages for Solution menu command.
2. Search for BoldReports.AspNet.Core, BoldReports.Net.Core packages, and install them in your ASP.NET Core application. The following table provides details about the packages and their usage.

Refer to the NuGet Packages section to learn more details about installing and configuring Report Viewer NuGet packages.

The following table provides details about the dependency packages and their usage.

Refer scripts and CSS

Refer all the scripts and style sheets that the ASP.NET Core Report Viewer requires directly from the CDN links.

1. The following scripts and style sheets are mandatorily required to use the Report Viewer.

   • bold.report-viewer.min.css
   • jquery.min.js
   • bold.reports.common.min.js
   • bold.reports.widgets.min.js
   • bold.report-viewer.min.js

2. Open the \Views\Shared\_Layout.cshtml page.

3. Replace the following code in your \Views\Shared\_Layout.cshtml page <head> tag.

   <!-- Report Viewer component style -->
   <link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
   
   <!-- Report Viewer component dependent scripts -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.common.min.js"></script>
   <script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
   
   <!-- Report Viewer component script -->
   <script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/bold.report-viewer.min.js"></script>

   To learn more about rendering a report with data visualization report items, refer to the how to render data visualization report items section. The Report Viewer scripts and styles can be added to your application by installing the BoldReports.JavaScript NuGet package.

Tag helper

Define the following tag helper within the _ViewImports.cshtml page to initialize the ASP.NET Core Report Viewer component with tag helper support.

    @using BoldReports.TagHelpers
    @addTagHelper *, BoldReports.AspNet.Core

Configure Script Manager

Open the ~/Views/Shared/_Layout.cshtml page and add the Bold Reports^® Script Manager at the end of the <body> element as in the following code sample.

<body>
    <div style="min-height: 600px;width: 100%;">
        @RenderBody()
    </div>

    @RenderSection("Scripts", required: false)
    <!-- Bold Reports<sup>®</sup> script manager -->
   <bold-script-manager></bold-script-manager>
</body>

Initialize Report Viewer

1. Open the Index.cshtml page.
2. Remove the existing code and add the following code:

    <bold-report-viewer id="viewer"></bold-report-viewer>

Add already created reports

1. Create a folder Resources in the wwwroot folder in your application to store the RDL reports.
2. Download the sales-order-detail.rdl sample report. For more sample reports, refer to the samples and demos section.
3. Extract the compressed file and paste the sales-order-detail.rdl to the Resources folder.

The Report Viewer is only for rendering reports. Refer to the create RDL report section to create a report.

Configure Web API

The ASP.NET Core Report Viewer requires a Web API service to process the RDL, RDLC, and SSRS report files.

Add Web API Controller

1. Right-click the project and select Add > New Item from the context menu.

2. In the Add New Item dialog, select API Controller Empty class and name it as ReportViewerController.cs.

3. Click Add.

   When you add the API Controller class, the suffix Controller is mandatory in its name.

4. Open the ReportViewerController and add the following using statement.

   using Microsoft.AspNetCore.Mvc;
   using System.IO;
   using BoldReports.Web.ReportViewer;

5. Inherit the IReportController interface, and then implement its methods.

   The interface is required for processing the reports and for handling requests from the Report Viewer.

6. Create local variables inside the ReportViewerController class.

       //Report Viewer requires a memory cache to store the information of consecutive client request and have the rendered report viewer information in server
       private Microsoft.Extensions.Caching.Memory.IMemoryCache _cache;
   
       // IWebHostEnvironment used to get the report stream from application `wwwroot\Resources` folder.
       private Microsoft.AspNetCore.Hosting.IWebHostEnvironment _hostingEnvironment;

7. Load the report as a stream in the OnInitReportOptions method.

       [NonAction]
       public void OnInitReportOptions(ReportViewerOptions reportOption)
       {
           string basePath = _hostingEnvironment.WebRootPath;
           // Here, we have loaded the sales-order-detail.rdl report from application the folder wwwroot\Resources. sales-order-detail.rdl should be there in wwwroot\Resources application folder.
           FileStream inputStream = new FileStream(basePath + @"\Resources\" + reportOption.ReportModel.ReportPath, FileMode.Open, FileAccess.Read);
           MemoryStream reportStream = new MemoryStream();
           inputStream.CopyTo(reportStream);
           reportStream.Position = 0;
           inputStream.Close();
           reportOption.ReportModel.Stream = reportStream;
       }

   You cannot load the report stored in the application with path information from an ASP.NET Core service.

8. Set the Route attribute for ReportViewerController.

   [Route("api/[controller]/[action]")]
   public class ReportViewerController : Controller, IReportController
   {
       ...
   }

9. Replace the template code with the following code:

   [Route("api/[controller]/[action]")]
   public class ReportViewerController : Controller, IReportController
   {
       // Report viewer requires a memory cache to store the information of consecutive client request and
       // have the rendered Report Viewer information in server.
       private Microsoft.Extensions.Caching.Memory.IMemoryCache _cache;
   
       // IWebHostEnvironment used with sample to get the application data from wwwroot.
       private Microsoft.AspNetCore.Hosting.IWebHostEnvironment _hostingEnvironment;
   
       // Post action to process the report from server based json parameters and send the result back to the client.
       public ReportViewerController(Microsoft.Extensions.Caching.Memory.IMemoryCache memoryCache,
           Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnvironment)
       {
           _cache = memoryCache;
           _hostingEnvironment = hostingEnvironment;
       }
   
       // Post action to process the report from server based json parameters and send the result back to the client.
       [HttpPost]
       public object PostReportAction([FromBody] Dictionary<string, object> jsonArray)
       {
           //Contains helper methods that help to process a Post or Get request from the Report Viewer control and return the response to the Report Viewer control
           return ReportHelper.ProcessReport(jsonArray, this, this._cache);
       }
   
       // Method will be called to initialize the report information to load the report with ReportHelper for processing.
       [NonAction]
       public void OnInitReportOptions(ReportViewerOptions reportOption)
       {
           string basePath = _hostingEnvironment.WebRootPath;
           // Here, we have loaded the sales-order-detail.rdl report from application the folder wwwroot\Resources. sales-order-detail.rdl should be there in wwwroot\Resources application folder.
           FileStream inputStream = new FileStream(basePath + @"\Resources\" + reportOption.ReportModel.ReportPath, FileMode.Open, FileAccess.Read);
           MemoryStream reportStream = new MemoryStream();
           inputStream.CopyTo(reportStream);
           reportStream.Position = 0;
           inputStream.Close();
           reportOption.ReportModel.Stream = reportStream;
       }
   
       // Method will be called when reported is loaded with internally to start to layout process with ReportHelper.
       [NonAction]
       public void OnReportLoaded(ReportViewerOptions reportOption)
       {
       }
   
       //Get action for getting resources from the report
       [ActionName("GetResource")]
       [AcceptVerbs("GET")]
       // Method will be called from Report Viewer client to get the image src for Image report item.
       public object GetResource(ReportResource resource)
       {
           return ReportHelper.GetResource(resource, this, _cache);
       }
   
       [HttpPost]
       public object PostFormReportAction()
       {
           return ReportHelper.ProcessReport(null, this, _cache);
       }
   }

How do I set the report path and service URL for the ASP.NET Core Report Viewer?

To render the reports available in the application, set the report path and service URL properties of the ASP.NET Core Report Viewer. Replace the following code on your Report Viewer page.

1. Open the Index.cshtml page.
2. Set the report-path and report-service-url properties.

    <bold-report-viewer id="viewer" report-path="sales-order-detail.rdl" report-service-url="/api/ReportViewer"></bold-report-viewer>

The report path property is set to the RDL report that is added to the project Resources folder.

How do I preview the report in the ASP.NET Core Report Viewer?

Build and run the application to view the report output in the ASP.NET Core Report Viewer as displayed in the following screenshot:

Note: To see the features of the Bold Reports^® ASP.NET Core Report Viewer, visit the ASP.NET Core Report Viewer feature tour page. You can also view the ASP.NET Core Report Viewer examples which demonstrate the rendering of SSRS RDLC and RDL reports.

See Also

Create your first application in .Net 6.0 version

Create your first application in .Net 5.0 version

Create your first application in ASP.Net Core 3.1 version

Create your first application in ASP.Net Core 2.1 version

Render report with data visualization report items

Create RDLC report

Render RDLC reports

Preview report in print mode

Set data source credential for shared data sources

Change data source connection string

Create your first application in visual studio 2017

SSRS server versions supported in Bold Reports^®