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:
.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.
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:
Change the current working directory to the application’s root folder.
Add the BoldReports.Net.Core packages to the application by running the next command.
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:
Create a new class file named BoldReportViewerOptions.cs inside the Data folder. This class will hold properties that are used to configure the Report Viewer.
{
public class BoldReportViewerOptions
{
public string ? ReportPath { get; set; }
public string ? ServiceUrl { get; set; }
}
}
Next, create a scripts folder inside the wwwroot directory, and within it, create a boldreports-interop.js file. Insert this code to invoke the Bold Report Viewer control, by assigning the reportPath and reportServiceurl.
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 wwwrootindex.html to integrate the JavaScript reporting controls into your Blazor application.
<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.
@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.
RenderReportViewer: Renders the Report Viewer components in a Blazor page.
OnAfterRender: Initializes the Report Viewer by calling the method RenderReportViewer that we created.
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
{
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
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.
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!
