Display SSRS RDL Report in Bold Reports Blazor Report Viewer

Create your first Blazor Web application in the .NET 6.0 framework to display an already created SSRS RDL report in the Bold Reports Blazor Report Viewer without using a Report Server using 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 start quickly with Report Viewer, you can check on this video:

Prerequisites

Before getting started with the bold Web 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 app 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 app, you can configure it on this screen.

6. Configure Docker OS (Optional):

   • If you want to add Docker OS to your Blazor app, 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.

Create a Web API for Report Processing

In this section, we are going to create a Web API controller that will be used 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. These are used to process the RDL reports.

The table below explains the details and purposes of Nuget packages:

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

1. Create an empty API controller by right-clicking the Data folder, choosing Add > Controller > API-Controller Empty, and then naming it BoldReportsAPIController.cs.

2. We are going to 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);
            }
        }
    }

3. To request the report processing unit properly, we have changed the router API attribute to include the controller and action names using [Route("api/{controller}/{action}/{id?}")].

4. 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

In this section, we are going to integrate the Bold Reports JavaScript controls by creating an interop file to initialize 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 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 it can be downloaded here. 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 our JavaScript reporting controls in the Blazor application.

   <!-- Report Viewer component style -->
   <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 scripts -->
   <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>
   
   <!-- 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 using our 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();
        }
}
```

Here, we have created and used BoldReportViewerOptions to pass the parameters for report rendering. In the future, if we need any additional parameters, we can just 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 will be rendered and displayed as shown in the following screenshot.

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