Getting started for Mac system

To display an already created SSRS RDL report in the Bold Reports^® ASP.NET Core Report Viewer on a Mac, create an ASP.NET Core reporting web application using Visual Studio for Mac and follow these steps.

What do I need to run the ASP.NET Core Report Viewer on a Mac?

To run the Bold Reports^® ASP.NET Core Report Viewer on a Mac, you need the official prerequisites for creating and running an ASP.NET Core 3.x application in a Mac environment, which the .NET Core documentation describes.

The official prerequisites to create and run an ASP.NET Core 3.x application on Mac environment are described in the .NET Core documentation website.

How do I create an ASP.NET Core web application for the Report Viewer on a Mac?

To create an ASP.NET Core web application for the Bold Reports^® ASP.NET Core Report Viewer on a Mac, choose New from the Visual Studio for Mac dashboard, select the Web Application template, and choose .NET Core 3.1 as the target framework.

1. Choose New from Visual Studio for Mac dashboard.

2. Select Web Application from the template in App under Web and Console section and click the Next button.

3. Select .NET Core 3.1 in Target Framework and then click Next button.

4. In the project configuration window, enter the Project Name and click the Create button.

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 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 styles -->
   <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 script -->
   <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 into 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 into 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 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 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 in 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);
       }
   }

Enable cross-origin requests

Browser security prevents the ASP.NET Core 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 application’s service container, as in the following 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;
        ....
        ....
    }

To load the report directly from SQL Server Reporting Services (SSRS), skip the following steps and go to the SSRS Report section.

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 in your Report Viewer page.

1. Open the Index.cshtml page.
2. Set the report-path and report-service-url properties, as in the following code:

    <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:

See Also

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

SSRS server versions supported in Bold Reports^®