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
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.
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. |
Directly refer all the required scripts and style sheets from CDN links.
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
Open the \Views\Shared\_Layout.cshtml
page.
Replace the following code in your \Views\Shared\_Layout.cshtml
page <head>
tag.
<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/6.2.32/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.2.32/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.2.32/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/6.2.32/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.
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
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>
Index.cshtml
page. <bold-report-viewer id="viewer"></bold-report-viewer>
Resources
into the wwwroot
folder in your application to store the RDL reports.sales-order-detail.rdl
from here. For more sample reports, refer to samples and demos section.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.
The ASP.NET Core Report Viewer requires a Web API service to process the RDL, RDLC, and SSRS report files.
Right-click the project and select Add > New Item from the context menu.
In the Add New Item dialog, select API Controller Empty class and name it as ReportViewerController.cs
Click Add.
While adding API Controller class, name it with the suffix
Controller
that is mandatory.
Open the ReportViewerController
and add the following using statement.
using Microsoft.AspNetCore.Mvc;
using System.IO;
using BoldReports.Web.ReportViewer;
Inherit the IReportController
interface, and then implement its methods.
It is required for processing the reports and for handling request from the Report Viewer.
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;
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.
Set the Route
attribute for ReportViewerController
.
[Route("api/[controller]/[action]")]
public class ReportViewerController : Controller, IReportController
{
...
}
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);
}
}
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.
Startup.cs
file.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.
To render the reports available in the application, of the Report Viewer. You can replace the following code in your Report Viewer page.
Index.cshtml
page.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.
Build and run the application to view the report output in the Report Viewer as displayed in the following screenshot.
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