Load Bold Reports® Report Server reports

To load Bold Reports® Report Server reports in the Blazor Report Viewer, set the service URL, server URL, report path, and authorization token of your Report Server, without creating a Web API service. Bold Reports® Report Server provides the built-in Web API service that helps you to display the server reports.

To get started, create a Blazor Server App template application and name it BlazorReportingTools using Visual Studio 2022. If this template is not available, see the ASP.NET Core Blazor documentation to configure the system environment.

The source code for this Blazor reporting components application is available on GitHub.

To get started quickly with the Blazor Report Viewer, watch the following video:

Create Blazor Server application

  1. Start Visual Studio 2022 and click Create new project.

  2. Choose Blazor Server App, and then click Next.

    Blazor Server

  3. Change the project name, and then click Next.

  4. Select Blazor server application, and then click Create.

    Blazor Server Info

List of dependency libraries

  1. In the Solution Explorer tab, right-click the project or solution , and choose Manage NuGet Packages. Alternatively, go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution menu command.
  2. Search for BoldReports.Net.Core, System.Data.SqlClient and Microsoft.AspNetCore.Mvc.NewtonsoftJson packages, and install them in your Blazor application. The following table provides details about the packages and their usage.
Package Purpose
BoldReports.AspNet.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 3.1.2.

Refer to the NuGet Packages section to learn more details about installing and configuring Report Viewer NuGet packages.

Refer scripts and CSS

Directly refer all the required scripts and style sheets from CDN links.

  1. The following scripts and style sheets are mandatorily required to use the Report Viewer.

    • bold.report-viewer.min.css
    • jquery.min.js
    • bold.reports.common.min.js
    • bold.reports.widgets.min.js
    • bold.report-viewer.min.js

  2. Reference the following online CDN links along with the boldreports-interop.js interop file in the head section of Pages/_Host.cshtml to use our JavaScript reporting controls in the Blazor application.

<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
<!-- Report Viewer component dependent script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/bold.report-viewer.min.js"></script>
<!-- Blazor interop file -->
<script src="~/scripts/boldreports-interop.js"></script>

How do I configure the Report Server to render a report?

To render a Bold Reports® Report Server report, the Blazor Report Viewer requires the serviceAuthorizationToken, reportPath and reportServiceUrl to embed the reports. Provide the following information from your Report Server:

  • reportServiceUrl – Report Server Reporting Service information should be provided for this API.
  • reportServerUrl- Report Server Reporting Server information should be provided for this API.
  • serviceAuthorizationToken – Authorization token to communicate with reportServiceUrl.
  • reportPath - Path of the report, formed from the category and report name, as in /{category name}/{report name}.

Initialize Report Viewer

  • Create a Data/BoldReportOptions.cs class with the following code to hold the RDL report rendering properties.

[Data/BoldReportOptions.cs]

namespace BlazorReportingTools.Data
{
    public class BoldReportViewerOptions
    {
        public string ReportPath { get; set; }
        public string ServiceURL { get; set; }
        public string ServerURL { get; set; }
        public string AuthorizationToken { get; set; }
    }
}
  • 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.reportPath,
            reportServiceUrl: reportViewerOptions.serviceURL,
            reportServerUrl: reportViewerOptions.serverURL,
            serviceAuthorizationToken: reportViewerOptions.authorizationToken
        });
    }
}
  • Open the index.razor page. Remove the existing code and add the following code:
@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()
    {  
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }
    // Initial rendering of Bold Report Viewer
    protected override void OnAfterRender(bool firstRender)
    {
        RenderReportViewer();
    }
}

If you need to know the difference between reportServiceUrl and reportServerUrl, refer to the Difference between Report Service URL and Report Server URL.

Follow one of these procedures based on your Report Server type:

Enterprise Reporting Server

public async void RenderReportViewer()
    {
        viewerOptions.AuthorizationToken = "bearer <server token>";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }

To generate the token within an application, see how to generate an access token for a Bold Reports® Report Server user.

  • Set the Bold Reports® Report Server built-in service URL to the report-service-url property. The report-service-url property value should be in format of https://<<Report server name>>/reporting/reportservice/api/Viewer.
public async void RenderReportViewer()
    {
        viewerOptions.ServiceURL = "https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer";
        viewerOptions.AuthorizationToken = "bearer <server token>";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }
  • Set the Bold Reports® Report Server built-in server URL to the report-server-url property. The report-server-url property value should be in format of https://<<Report server name>>/reporting/api/site/<<site name>>.
public async void RenderReportViewer()
    {
        viewerOptions.ServiceURL = "https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer";
        viewerOptions.ServerURL = "https://on-premise-demo.boldreports.com/reporting/api/site/site1";
        viewerOptions.AuthorizationToken = "bearer <server token>";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }
  • Set the path of report in report-path property. You can use the following complete code in your index.cshtml page.
public async void RenderReportViewer()
    {
        viewerOptions.ReportPath = "/Sample Reports/Sales Order Detail";
        viewerOptions.ServiceURL = "https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer";
        viewerOptions.ServerURL = "https://on-premise-demo.boldreports.com/reporting/api/site/site1";
        viewerOptions.AuthorizationToken = "bearer <server token>";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }

You can also load the report using GUID instead of report location. Set the GUID of the report in the report-path property as report-path: ‘91f24bf1-e537-4488-b19f-b37f77481d00’.

Cloud Reporting server

public async void RenderReportViewer()
    {
        viewerOptions.AuthorizationToken = "bearer <server token>";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }

To generate the token within an application, see how to generate an access token for a Bold Reports® Cloud user.

  • Set the Bold Reports® Report Server built-in service URL to the report-service-url property. The report-service-url property value is a https://service.boldreports.com/api/Viewer.
public async void RenderReportViewer()
    {
        viewerOptions.ServiceURL = "https://service.boldreports.com/api/Viewer";
        viewerOptions.AuthorizationToken = "bearer <server token>";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }
  • Set the Bold Reports® Report Server built-in server URL to the report-server-url property. The report-server-url property value should be in format of https://<<Report server name>>/reporting/api/.
public async void RenderReportViewer()
    {
        viewerOptions.ServiceURL = "https://service.boldreports.com/api/Viewer";
        viewerOptions.ServerURL = "https://acmecorp.boldreports.com/reporting/api";
        viewerOptions.AuthorizationToken = "bearer <server token>";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }
  • Set the path of report in report-path property. You can use the following complete code in your index.cshtml page.
public async void RenderReportViewer()
    {
        viewerOptions.ReportPath = "/Sample Reports/Sales Order Detail";
        viewerOptions.ServiceURL = "https://service.boldreports.com/api/Viewer";
        viewerOptions.ServerURL = "https://acmecorp.boldreports.com/reporting/api";
        viewerOptions.AuthorizationToken = "bearer <server token>";
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
    }

You can also load the report using GUID instead of report location. Set the GUID of the report in the report-path property as report-path: ‘91f24bf1-e537-4488-b19f-b37f77481d00’.