Boost Your Web Reporting with Blazor Server Report Viewer
Table of Contents:
- Introduction
- Requirements for Adding Bold Report Viewer Component
- Creating a Blazor Server Application
- Installing the NuGet Packages
- Configuring the Web API
- Adding Routing Information
- Enabling Newtonsoft.Json Features
- Initializing the Report Viewer
- Adding Already Created Reports
- Referencing Scripts and Themes
- Registering the Valid License Token
- Previewing the Report
- Conclusion
Introduction
Welcome to this tutorial on adding the Bold Report Viewer component in a Blazor server application. In this tutorial, we will learn how to Create a Blazor reporting web application to display SSRS RDL reports. We will cover the necessary requirements, installation of packages, configuration of the Web API, initialization of the report viewer, and much more. So, let's get started!
Requirements for Adding Bold Report Viewer Component
Before we begin, make sure your development environment includes Visual Studio 2019 with the ASP.NET and web development workload, as well as the .NET Core 3.1 framework. These are the primary requirements for adding the Bold Report Viewer component to your Blazor server application.
Creating a Blazor Server Application
To create a Blazor server application, open Visual Studio 2019 and click on "Create new project." Choose the Blazor App template and proceed with the project creation. If the template is not available, You can refer to the link provided in the video description for instructions on configuring the system environment. Change the project name as desired and click on "Create." Select the Blazor Server App option and click on "Create."
Installing the NuGet Packages
Once the Blazor server application is created, we need to install the necessary NuGet packages. In the Solution Explorer tab, right-click on the project and choose "Manage NuGet Packages." Switch to the Browse tab and search for the BoldReports.Net.Core package. Install it in your Blazor server application. Similarly, install the remaining packages such as System.Data.SqlClient and Microsoft.AspNetCore.Mvc.NewtonsoftJson. Each package has its specific purpose, as explained in the following table.
Package |
Purpose |
BoldReports.Net.Core |
Creates a Web API service to process the reports. |
System.Data.SqlClient |
Optional package for RDL reports with SQL Server or SQL Azure data source. |
Microsoft.AspNetCore.Mvc.NewtonsoftJson |
Includes input and output formatters for JSON and JSON Patch. |
Configuring the Web API
The Blazor report viewer requires a Web API service to process the RDL, RDLC, and SSRS report files. To configure the Web API, right-click on the Data folder in the Blazor server application and select "Add -> New Item" from the Context menu. In the Add New Item dialog, select "API Controller class" and name it "ReportViewerController.cs". In the ReportViewerController file, add the necessary using statements. We will then inherit the IReportController interface and implement the required methods. The IReportController interface defines the action methods for processing the reports and handling resource requests from the report viewer control. The following methods are implemented in the ReportViewerController:
- GetResource: Retrieves the requested resource from the report.
- OnInitReportOptions: Invoked when the report is about to be processed.
- OnReportLoaded: Invoked when the report and subreport start loading.
- PostReportAction: Used to post the request in the report process.
To support these methods, we have the ReportHelper class that contains helper methods for processing the requests from the report viewer control and returning the response.
Adding Routing Information
Routing is an essential part of directing HTTP requests to a controller. Add the necessary action parameter in the route template to handle the routing. In the Startup.cs file, include the MapControllers in endpoint routing, which invokes the Web API with the controller and action.
Enabling Newtonsoft.Json Features
Bold Reports processes data between the client and server using Newtonsoft.Json. To enable the Newtonsoft.Json features in the Blazor application, include services.AddControllers().AddNewtonsoftJson() in the ConfigureServices method of the Startup.cs file. Make sure to change the class name to ReportViewerController in the AddSingleton service.
Initializing the Report Viewer
To integrate Bold Reports JavaScript controls, we need to create an interop file that initializes the report viewer with basic parameters. Add the BoldReportViewerOptions.cs class file in the Data folder to hold the RDL report rendering properties. Create a scripts folder in the wwwroot folder and add the boldreports-interop.js JavaScript file. This file will invoke the Bold Report Viewer JavaScript control. In the JavaScript file, include the necessary code snippet to invoke the control.
Adding Already Created Reports
Create a "Resources" folder in the wwwroot folder of your Blazor application. This folder will store the RDL reports. For demonstration purposes, we will add the sales-order-Detail.rdl file to the Resources folder. You can find this file in the video description. Additionally, there is a link provided for more samples and demos.
Referencing Scripts and Themes
To use local scripts and themes, you need to reference them in your Blazor application. The video description includes an FAQ link about scripts and themes. Open the pages/_Host.cshtml page and reference the online CDN links along with the boldreports-interop.js interop file in the head section. The purpose of each script and CSS file is explained in the provided table.
Registering the Valid License Token
To utilize the full functionality of Bold Reports, you need to register a valid license token. This token can be generated from the download section of the Bold Report site. The video description includes a link to the user guide documentation. In the Startup.cs file, register the license token using the appropriate code snippet.
Previewing the Report
Build and run your Blazor application to preview the report. You will see that the sales-order-detail report is successfully loaded in the Bold Report Viewer component. Congratulations on integrating the Bold Report Viewer in your Blazor server application!
Conclusion
In this tutorial, we learned how to add the Bold Report Viewer component to a Blazor server application. We covered the requirements, installation of packages, configuration of the Web API, initialization of the report viewer, and previewing the report. Stay tuned to our Channel for more videos on Bold Reports. Don't forget to like this video and subscribe to our channel. Thank you for watching, and we'll see you next time!