Display SSRS RDL Report in Bold Reports® Blazor Report Viewer

To display an already created SSRS RDL report in the Bold Reports® Blazor Report Viewer without a Bold Reports® Report Server, create a Blazor Web application in the .NET 6.0 framework, add a Web API controller, and initialize the viewer through a JavaScript interop file. Follow these step-by-step instructions.

To create your first application on other .NET Core frameworks, refer to the documentation for .NET 8.0

To get started quickly with the Report Viewer, watch the following video:

What do I need before adding the Report Viewer to a Blazor app?

To add the Bold Reports® Blazor Report Viewer to a .NET 6.0 app, your development environment needs Visual Studio 2022 and the .NET 6.0 SDK.

Before you get started with the Bold Reports® Blazor Report Viewer, make sure your development environment includes the following requirements.

  1. Install Visual Studio 2022:
    • Make sure you have Visual Studio 2022 installed on your machine. You can download it from the official Visual Studio website at Visual Studio 2022.
  2. Install .NET 6.0 SDK:
    • Ensure that you have .NET 6.0 SDK installed. You can download it from the .NET download page at .NET Core 6.0.

Create a Blazor application

  1. Open Visual Studio 2022:

    • Launch Visual Studio 2022 on your machine.

  2. Create a New Project:

    • Click on “Create a new project” on the start screen or go to File > New > Project.

  3. Select Blazor App Template:

    • In the “Create a new project” dialog, search for “Blazor” in the search box.
    • Choose “Blazor Server App” from the list of templates.

  4. Configure the Project:

    • Set a name for your project.
    • Choose a location to save your project.
    • Select the solution and project names.
    • Choose the target framework (.NET 6.0).
    • Choose the type of Blazor application you want to create. For example, you can choose “Blazor Server App” or “Blazor Assembly App”.

  5. Configure Authentication (Optional):

    • If you want to add authentication to your Blazor application, you can configure it on this screen.

  6. Configure Docker OS (Optional):

    • If you want to add Docker OS to your Blazor application, you can select the Enable Docker checkbox and choose the Docker OS dropdown.

  7. Click Create:

    • Click the “Create” button to create your Blazor project.

Creating a Blazor application Project

Starting with Bold Reports® version 8.1.1, support for version .NET 6.0 (including .NET Core 3.1, .NET 5.0 and .NET 7.0) has officially ended, with only limited support available for these versions. To continue receiving new features, improvements, and full support, upgrade to .NET 8.0 or later. If you need to stay on an .NET 6.0, use Bold Reports® version 7.1.10 or earlier.

Create a Web API for Report Processing

Create a Web API controller that the Bold Reports® Blazor Report Viewer uses to process the provided RDL reports.

  1. Steps to install NuGet packages in Blazor Project:
    • Right-click on the project dependencies in Solution Explorer.
    • Click Manage Nuget Packages...
    • Search for “BoldReports.Net.Core” and select the latest version Nuget.
    • Install the above Nuget in the Blazor project.

For guidance on installing NuGet packages in your application, refer to the following NuGet packages documentation. The packages process the RDL reports.

The following table explains the details and purposes of the NuGet packages:

Package Purpose
BoldReports.Net.Core Creates a Web API service used to process the reports.

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

Package Purpose
Microsoft.AspNetCore.Mvc.NewtonsoftJson ASP.NET Core MVC features that use Newtonsoft.Json. Includes input and output formatters for JSON and JSON Patch. The package version should be higher than 6.0.0.
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.
  1. Create an empty API controller by right-clicking the Data folder, choosing Add > Controller > API-Controller Empty, and then naming it BoldReportsAPIController.cs.

controller creation

  1. Implement the IReportController interface from the namespace BoldReports.Web.ReportViewer, which is used to process the reports in the wwwroot/resources folder. Refer to the following code sample for RDL report processing.

    using BoldReports.Web.ReportViewer;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Caching.Memory;

namespace BlazorReportingTools.Data
 {
     [Route("api/{controller}/{action}/{id?}")]
     public class BoldReportsAPIController : ControllerBase, IReportController
     {
         // Report viewer requires a memory cache to store the information of consecutive client requests and
         // the rendered report viewer in the server.
         private IMemoryCache _cache;

         // IWebHostEnvironment used with sample to get the application data from wwwroot.
         private IWebHostEnvironment _hostingEnvironment;

         public BoldReportsAPIController(IMemoryCache memoryCache, IWebHostEnvironment hostingEnvironment)
         {
             _cache = memoryCache;
             _hostingEnvironment = hostingEnvironment;
         }
         //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);
         }

         // 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 the application folder wwwroot\Resources. sales-order-detail.rdl should be in the wwwroot\Resources application folder.
             System.IO.FileStream inputStream = new System.IO.FileStream(basePath + @"\resources\" + reportOption.ReportModel.ReportPath + ".rdl", System.IO.FileMode.Open, System.IO.FileAccess.Read);
             MemoryStream reportStream = new MemoryStream();
             inputStream.CopyTo(reportStream);
             reportStream.Position = 0;
             inputStream.Close();
             reportOption.ReportModel.Stream = reportStream;
         }

         // Method will be called when report is loaded internally to start the layout process with ReportHelper.
         [NonAction]
         public void OnReportLoaded(ReportViewerOptions reportOption)
         {
         }

         [HttpPost]
         public object PostFormReportAction()
         {
             return ReportHelper.ProcessReport(null, this, _cache);
         }

         // Post action to process the report from the server based on json parameters and send the result back to the client.
         [HttpPost]
         public object PostReportAction([FromBody] Dictionary<string, object> jsonArray)
         {
             return ReportHelper.ProcessReport(jsonArray, this, this._cache);
         }
     }
 }

  2. To request the report processing unit properly, the router API attribute includes the controller and action names using [Route("api/{controller}/{action}/{id?}")].

  3. To invoke this Web API with the controller and action, include that information in the endPoint routing in the Program.cs file.

    app.UseEndpoints(endpoints =>
{
  endpoints.MapControllers();
  endpoints.MapBlazorHub();
  endpoints.MapFallbackToPage("/_Host");
});

Initialize the Report Viewer

Integrate the Bold Reports® JavaScript controls by creating an interop file that initializes the Report Viewer with basic parameters.

  1. Create a BoldReportOptions.cs class inside the Data folder with the following code to hold the RDL report rendering properties.

    [Data/BoldReportOptions.cs]

     ```csharp
 namespace BlazorReportingTools.Data
 {
     public class BoldReportViewerOptions
     {
         public string ReportName { get; set; }
         public string ServiceURL { get; set; }
     }
 }
 ```

  2. Create a boldreports-interop.js file inside the wwwroot/scripts folder and use the following code snippet to invoke the Bold Reports® Report Viewer JavaScript control.

    // Interop file to render the Bold Report Viewer component with properties.
window.BoldReports = {
        RenderViewer: function (elementID, reportViewerOptions) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL
            });
        }
    }
    ```

  3. Create a folder named resources inside the wwwroot folder in your application to store the RDL reports. Now, add any RDL reports that have already been created to the newly created folder.

    In this tutorial, the sales-order-detail.rdl report is used, and you can download the sales order detail report. You can add the reports from the Bold Reports® installation location. For more information, refer to the samples and demos section of the Bold Reports® documentation.

  4. Reference the following online CDN links along with the boldreports-interop.js interop file in the head section of Pages/_Layout.cshtml file to use the Bold Reports® JavaScript reporting controls in the Blazor application.

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

<!-- Blazor interop file -->
<script src="scripts/boldreports-interop.js"></script>
  • Inject IJSRuntime and invoke this JavaScript interop with the sales-order-detail.rdl report and the created BoldReportsAPI URL in the Pages/Index.razor file to visualize the report in the Report Viewer.

[Pages/Index.razor]

```csharp
@page "/"

@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components
@inject IJSRuntime JSRuntime
@using BlazorReportingTools.Data;

<div id="report-viewer" style="width: 100%;height: 950px"></div>

@code {
    // ReportViewer options
    BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();

    // Used to render the Bold Report Viewer component in Blazor page.
    public async void RenderReportViewer()
    {
        viewerOptions.ReportName = "sales-order-detail";
        viewerOptions.ServiceURL = "/api/BoldReportsAPI";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }
    // Initial rendering of Bold Report Viewer
    protected override void OnAfterRender(bool firstRender)
    {
        RenderReportViewer();
        }
}
```

The BoldReportViewerOptions class passes the parameters for report rendering. To pass additional parameters, include them in the BoldReportsOptions.cs file and use it to render the reports.

Run the Application

  1. Build the project: Once the project is created, build it by clicking the “Build” menu and selecting “Build Solution.”

  2. Run the project: Click the Run or F5 button to launch the application. The Report Viewer renders the report and displays it as in the following screenshot:

Report Viewer Output

Note: You can refer to our feature tour page for the Blazor Report Viewer to see its innovative features. Additionally, you can view our Blazor Report Viewer examples which demonstrate the rendering of SSRS RDLC and RDL reports.

See Also

Bold Reports® Licensing