Search results
PDF

Introducing the newly redesigned Report Viewer! We have given it a refreshing new look that embraces sleek and modern design, aligning perfectly with the latest web design trends. It allows seamless integration into your application. For detailed guidance on the migration process, we recommend you to refer our Report Viewer v2.0 migration document.

Add Web Report Viewer to a Blazor application

This section explains the steps required to add a web Report Viewer to a Blazor application.

To get start quickly with Report Viewer, you can check on this video:

Prerequisites

Before getting started with a 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 selected the Enable Docker checkbox and Chose the Docker OS dropdown.
  7. Click Create:

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

Creating a Blazor application 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 installed the NuGet packages in Blazor Project:
    • Right-click on the project dependencies in Solution Explorer
    • Click the Manage Nuget Packages..
    • Search the BoldReports.Net.Core and select the latest version nuget
    • Install the above Nuget in Blazor project

Refer the following NuGet packages is help for how to installed the Nuget Packages in created application. These are used for processing the RDL reports.

The below table explain the details on purpose of Nuget packages

Package Purpose
BoldReports.Net.Core Creates Web API service is used to process the reports.
System.Data.SqlClient Should be referenced in the project when the RDL report renders visual data from the SQL Server or SQL Azure data source based on the RDL design. The package version should be higher than 4.1.0.
Microsoft.AspNetCore.Mvc.NewtonsoftJson ASP.NET Core MVC features that use `Newtonsoft.Json`. Includes input and output formatter for JSON and JSON Patch. The package version should be higher than 6.0.0.
  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. 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);
             }
         }
     }
  2. 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?}")].

  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

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.

    <link href="https://cdn.boldreports.com/5.4.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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.4.20/scripts/common/ej2-base.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-data.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-pdf-export.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-svg-base.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-lineargauge.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/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.4.20/scripts/data-visualization/ej2-maps.min.js"></script>
    
    <!-- Report Viewer component script-->
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.common.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.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.4.20/scripts/data-visualization/ej.chart.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/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.

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