Embedded
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

Display ssrs rdl report in ASP.NET Core 3.1 application using Report Viewer

Create your first ASP.NET Core reporting Web application to display already created SSRS RDL report in Bold Reports ASP.NET Core Report Viewer without using a Report Server using this step-by-step instructions.

To create your first application in other .NET Core frameworks, refer to the documentation ASP .NET Core 2.1,.NET 5.0 or .NET 6.0

Create ASP.NET Core application

  1. Start Visual Studio 2019 and click Create new project.
  2. Choose ASP.NET Core Web Application, and then click Next.
  3. Change the project name, and then click Create.
  4. In the dropdown with the ASP.NET Core version, choose ASP.NET Core 3.1.
  5. Select the Web Application (Model-View-Controller) template, then click Create.

Creating a new ASP.NET Core Application Project

If you need to use Bold Reports with ASP.NET Core on Linux or macOS, then refer to this 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, go to 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 Core application. The following table provides details about the packages and their usage.
Package Purpose
BoldReports.Net.Core Creates Web API service to process the reports.
BoldReports.AspNet.Core Contains tag helpers to create client-side reporting control.

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 its usage.

Package Purpose
Syncfusion.Compression.Net.Core Exports the report to PDF, Microsoft Word, and Microsoft Excel format. It is a base library for the Syncfusion.Pdf.Net.Core , Syncfusion.DocIO.Net.Core, and Syncfusion.XlsIO.Net.Core packages.
Syncfusion.Pdf.Net.Core Exports the report to a PDF.
Syncfusion.DocIO.Net.Core Exports the report to a Word.
Syncfusion.XlsIO.Net.Core Exports the report to an Excel.
Syncfusion.OfficeChart.Net.Core It is a base library of the Syncfusion.XlsIO.Net.Core package.
Newtonsoft.Json Serializes and deserialize data for the Report Viewer. It is a mandatory package for Report Viewer, and the package version should be 10.0.1 or higher.
Microsoft.Data.SqlClient This is an optional package. If the RDL report contains the SQL Server or SQL Azure data source, then this package should be installed.

Refer scripts and CSS

Directly refer all the required scripts and style sheets from 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 styles -->
<link href="https://cdn.boldreports.com/6.3.16/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
<!-- Report Viewer component dependent script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.16/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.16/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/6.3.16/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 into your application by installing the BoldReports.JavaScript online nuget package.

Tag helper

It is necessary to define the following tag helper within the _ViewImports.cshtml page to initialize the Report Viewer component with the tag helper support.

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

Configure Script Manager

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

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

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

Initialize Report Viewer

  1. Open the Index.cshtml page.
  2. Remove the existing codes and add the following code.
    <bold-report-viewer id="viewer"></bold-report-viewer>

Add already created reports

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

The Report Viewer is only for rendering the 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 Adding a new controller to the project

  3. Click Add.

    While adding API Controller class, name it with the suffix Controller that is mandatory.

  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.

    It is required for processing the reports and for handling request 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 stream in 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 application with path information in ASP.NET Core service.

  8. Set the Route attribute for ReportViewerController.

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

  9. You can 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);
    }
}

Enable cross-origin requests

Browser security prevents the Report Viewer from making requests to your Web API Service when both server-side and client-side requests run in different domains. To allow access to your Web API service from a different domain, enable the cross-origin requests.

  1. Open Startup.cs file.
  2. Call AddCors in Startup.ConfigureServices to add CORS services to the app’s service container as in below code.
public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    services.AddCors(o => o.AddPolicy("AllowAllOrigins", builder =>
    {
        builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader();
    }));
}

To specify the CORS policy for ReportViewerController add the [EnableCors] attribute.

    [Microsoft.AspNetCore.Cors.EnableCors("AllowAllOrigins")]
    public class ReportViewerController : Controller, IReportController
    {
        private Microsoft.Extensions.Caching.Memory.IMemoryCache _cache;
        ....
        ....
    }

If you are looking to load the report directly from SQL Server Reporting Services (SSRS), then you can skip the following steps and move to SSRS Report section.

Set report path and service URL

To render the reports available in the application, of the Report Viewer. You can replace the following code in your Report Viewer page.

  1. Open the Index.cshtml page.
  2. Set the report-path and report-service-url properties as in below.
    <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.

Preview the report

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

Sales Order Detail Report

See Also

Create your first app in ASP.Net Core 2.1 version

Create your first app in NET 5.0 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