Step-by-Step Guide: Integrating the Report Viewer into Blazor WASM

In web application development, offering users dynamic and insightful reports is frequently demanded. Blazor WebAssembly (WASM), with its capacity to bring .NET to browsers, is a promising platform for constructing rich web applications. However, integrating robust reporting functionalities into a Blazor WASM project can present a challenge.

The Bold Reports Report Viewer is a visualization tool that showcases reports in popular formats such as RDL and RDLC. It provides the flexibility to view these reports directly within your web app, with or without depending on a separate server.

In this step-by-step guide, we’ll explore integrating a Bold Reports Report Viewer control into your Blazor WebAssembly application.

Let’s get started!

Prerequisites

Ensure your development environment includes the following:

• Visual Studio Code

• .NET 8.0 SDK or higher.

Steps to Create Blazor WebAssembly Application

Run the following command in the command prompt to create a Blazor WASM application named ‘ReportViewerApp.

dotnet new blazorwasm -n ReportViewerApp

A new Blazor WebAssembly application has been created.

Install the NuGet packages

In this section, we will install the necessary NuGet packages in the application to add the required dependencies:

1. Change the current working directory to the application’s root folder.

    cd ReportViewerApp
   

2. Add the BoldReports.Net.Core packages to the application by running the next command.

    dotnet add package BoldReports.Net.Core
   

The NuGet packages contain all the dependency packages needed to add the Report Viewer to the application.

Initialize the Report Viewer

To initialize the Report Viewer with basic parameters, you need to integrate the Bold Reports Report Viewer control by creating an interop file:

1. Create a new class file named cs inside the Data folder. This class will hold properties that are used to configure the Report Viewer.

    namespace ReportViewerApp.Data
    {
       public class BoldReportViewerOptions
       {
           public string ? ReportPath { get; set; }
           public string ? ServiceUrl { get; set; }
       }
    }
   

2. Next, create a scripts folder inside the wwwroot directory, and within it, create a boldreports-interop.js Insert this code to invoke the Bold Report Viewer control, by assigning the reportPath and reportServiceurl.

    // interop file for configuring the Bold Report Viewer component
    window.BoldReports = {
        RenderViewer: function (elementID, reportViewerOptions) {
            $("#" + elementID).boldReportViewer ({
                reportPath: reportViewerOptions.reportPath,
                reportServiceUrl: reportViewerOptions.ServiceUrl
            })
        }
    }
   

Integrating scripts and themes for Blazor Report Viewer

Reference the following CDN links along with the boldreports-interop.js file in the head section of wwwroot\index.html to integrate the JavaScript reporting controls into your Blazor application.

<link href="https://cdn.boldreports.com/5.2.26/content/material/bold.reports.all.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/5.2.26/content/material/bold.reportdesigner.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/external/jsrender.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/vb/vb.min.js" type="text/javascript"></script>
<!--Used to render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.boldreports.com/5.2.26/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.2.26/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/5.2.26/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/5.2.26/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.2.26/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/5.2.26/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<!--Used to render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.boldreports.com/5.2.26/scripts/data-visualization/ej2-maps.min.js"></script>
<script src="https://cdn.boldreports.com/5.2.26/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.2.26/scripts/common/bold.reports.widgets.min.js"></script>
<script src="https://cdn.boldreports.com/5.2.26/scripts/common/bold.report-designer-widgets.min.js"></script>
<!--Used to render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.boldreports.com/5.2.26/scripts/data-visualization/ej.chart.min.js"></script>
<!-- Report Designer component script-->
<script src="https://cdn.boldreports.com/5.2.26/scripts/bold.report-viewer.min.js"></script>
<script src="https://cdn.boldreports.com/5.2.26/scripts/bold.report-designer.min.js"></script>
<!--Blazor interop file-->
<script src="boldreports-interop.js"></script>

Integrate Blazor Report Viewer in Razor Page

Open the Pages/home.razor file and paste the following code snippet. This injects the IJSRuntime and invokes this JavaScript interop with the created Report Viewer URL in the Index.razor file. This is used to view reports.

page "/"

@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components
@inject IJSRuntime JSRuntime
@using ReportViewerApp;

<div id="report-viewer" style="width: 100%;height: 950px"></div>
@code {
    // ReportViewer options
    BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();
    // render the Bold Report Viewer component in Blazor page.
    public async void RenderReportViewer()
    {
        viewerOptions.ReportName = “";
        viewerOptions.ServiceURL = "";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }
    // Initial rendering of Bold Report Viewer
    protected override void OnAfterRender(bool firstRender)
    {
        RenderReportViewer();
    }
}

This code has the following methods to render the Blazor Report Viewer.

Create Web API for report processing

The Report Viewer needs a Web API service to handle report files. You can either skip this and use online Web API services to preview existing reports, or you can create one of these Web API services:

• ASP NET Web API Service

• ASP NET Core Web API Service

Set the ReportPath and service URL

Add the report path and report service URL to the pages/home.razor file, as shown.

public async void RenderReportViewer()
 {
    viewerOptions.ReportPath = "~/Resources/sales-order-detail.rdl";
    viewerOptions.ServiceURL = "http://localhost:{portno}/api/ReportViewer";
    await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
 }

Run the Blazor Web Assembly application

1. To run your Blazor application and view the report, open the Command Prompt and navigate to the root directory of your Blazor Server project.

2. Then, execute the following command.

    dotnet run
   

3. Once your application is running, open the localhost URL in your browser.

   

   Your Blazor WebAssembly application will load, and the report will be rendered and displayed within the Report Viewer.

Conclusion

I hope this blog has clarified how to integrate the Report Viewer into a Blazor WASM app. To delve deeper into Report Viewer’s features within Bold Reports, feel free to explore our documentation.

Bold Reports offers a 15-day free trial without requiring any credit card information. We encourage you to experience Bold Reports and share your feedback with us!