Search results
PDF

Load Bold Report Server reports

You can embed the Bold Report Server reports in the Report Viewer easily without creating a Web API service. Bold Report Server provides the built-in Web API service that helps you to display the server reports.

To create your first application in other .NET Core frameworks, refer to the documentation ASP .NET Core 2.1 or ASP.NET Core 3.1.

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

Create ASP.NET Core application

  1. Start Visual Studio 2019 and click Create new project.
  2. Choose ASP.NET Core Web Application, and then click Next.
  3. Change the project name, and then click Create.
  4. In the dropdown with the ASP.NET Core version, choose ASP.NET Core 5.0.
  5. Select the Web Application (Model-View-Controller) template, then click Create. Creating a new ASP.NET Core Application Project

If you need to use Bold Reports with ASP.NET Core on Linux or macOS, then refer to this Can Bold Reports be used with ASP.NET Core on Linux and macOS section.

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.AspNet.Core and System.Data.SqlClient packages, and install them in your Core application. The following table provides details about the packages and their usage.
Package Purpose
BoldReports.AspNet.Core Contains tag helpers to create client-side reporting control.
System.Data.SqlClient This is an optional package. If the RDL report contains SQL Server or SQL Azure data source, then this package should be installed. The package version should be 4.1.0 or higher.

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.reports.all.min.css
    • jquery-1.10.2.min.js
    • ej2-maps.min.js - Renders the map item. Add this script only if your report contains the map report item.
    • ej2-base.min.js, ej2-data.min.js, ej2-pdf-export.min.js, ej2-svg-base.min.js, ej2-lineargauge.min.js and ej2-circulargauge.min.js - Render the gauge item. Add these scripts only if your report contains the gauge report item.
    • bold.reports.common.min.js
    • bold.reports.widgets.min.js
    • ej.chart.min.js - Renders the chart item. Add this script, only if your report contains the chart report item.
    • bold.report-viewer.min.js
  2. Open the \Views\Shared\_Layout.cshtml page.

  3. Replace the following code in your \Views\Shared\_Layout.cshtml page <head> tag.

    <link href="https://cdn.boldreports.com/3.2.22/content/material/bold.reports.all.min.css" rel="stylesheet" />
    <script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
    
    <!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
    <script src="https://cdn.boldreports.com/3.2.22/scripts/common/ej2-base.min.js"></script>
    <script src="https://cdn.boldreports.com/3.2.22/scripts/common/ej2-data.min.js"></script>
    <script src="https://cdn.boldreports.com/3.2.22/scripts/common/ej2-pdf-export.min.js"></script>
    <script src="https://cdn.boldreports.com/3.2.22/scripts/common/ej2-svg-base.min.js"></script>
    <script src="https://cdn.boldreports.com/3.2.22/scripts/data-visualization/ej2-lineargauge.min.js"></script>
    <script src="https://cdn.boldreports.com/3.2.22/scripts/data-visualization/ej2-circulargauge.min.js"></script>
    
    <!--Render the map item. Add this script only if your report contains the map report item.-->
    <script src="https://cdn.boldreports.com/3.2.22/scripts/data-visualization/ej2-maps.min.js"></script>
    
    <script src="https://cdn.boldreports.com/3.2.22/scripts/common/bold.reports.common.min.js"></script>
    <script src="https://cdn.boldreports.com/3.2.22/scripts/common/bold.reports.widgets.min.js"></script>
    
    <!--Render the chart item. Add this script only if your report contains the chart report item.-->
    <script src="https://cdn.boldreports.com/3.2.22/scripts/data-visualization/ej.chart.min.js"></script>
    
    <!-- Report Viewer component script-->
    <script src="https://cdn.boldreports.com/3.2.22/scripts/bold.report-viewer.min.js"></script>

    To learn more about rendering a report with data visualization report items, refer to the how to render data visualization report items section. The Report Viewer scripts and styles can be added into your application by installing the BoldReports.JavaScript online nuget package.

Tag helper

It is necessary to define the following tag helper within the _ViewImports.cshtml page to initialize the Report Viewer component with the tag helper support.

    @using BoldReports.TagHelpers
    @addTagHelper *, BoldReports.AspNet.Core

Configure Script Manager

Open the ~/Views/Shared/_Layout.cshtml page and add the reporting Script Manager at the end of <body> element as in the following code sample.

<body>
    <div style="min-height: 600px;width: 100%;">
        @RenderBody()
    </div>

    @RenderSection("Scripts", required: false)
    <!-- Bold Reports script manager -->
   <bold-script-manager></bold-script-manager>
</body>

Initialize Report Viewer

  1. Open the Index.cshtml page.
  2. Remove the existing codes and add the following code.
    <bold-report-viewer id="viewer"></bold-report-viewer>

Report Server Configuration to render the report

Report Viewer requires the serviceAuthorizationToken, reportPath and reportServiceUrl to embed the reports. You can provide the information from report server as like explained below,

  • 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 report need to formed with information for category and report name as like /{category name}/{report name}

You can follow one of the procedure from below based on your Report Server type,

Enterprise Reporting Server

  • Generate token with your user credentials and assign it to serviceAuthorizationToken. You can refer to the documentation here, to generate the token by using credentials.

        <bold-report-viewer
        id="viewer"
        service-authorization-token="bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw">
        </bold-report-viewer>

    You can refer to the documentation here on how to generate the token within an application.

  • Set the Bold 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.

        <bold-report-viewer id="viewer"
        report-service-url="https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer"
        service-authorization-token="bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw">
        </bold-report-viewer>
  • Set the Bold 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>>.

        <bold-report-viewer id="viewer"
        report-service-url="https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer"
        report-server-url="https://on-premise-demo.boldreports.com/reporting/api/site/site1"
        service-authorization-token="bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw">
        </bold-report-viewer>
  • Set the path of report in report-path property. You can use the following complete code in your index.cshtml page.

        <bold-report-viewer id="viewer"
        report-service-url="https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer"
        report-server-url="https://on-premise-demo.boldreports.com/reporting/api/site/site1"
        report-path="/Sample Reports/Company Sales"
        service-authorization-token="bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw">
        </bold-report-viewer>

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

  • Generate token with your user credentials and assign it to serviceAuthorizationToken. You can refer the documentation here, to generate the token by using credentials.

        <bold-report-viewer
        id="viewer"
        service-authorization-token="bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw">
        </bold-report-viewer>

    You can refer to the documentation here on how to generate the token within an application.

  • Set the Bold 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.

        <bold-report-viewer
        id="viewer"
        report-service-url="https://service.boldreports.com/api/Viewer"
        service-authorization-token="bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw">
        </bold-report-viewer>
  • Set the Bold 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/.

        <bold-report-viewer
        id="viewer"
        report-service-url="https://service.boldreports.com/api/Viewer"
        report-server-url="https://acmecorp.boldreports.com/reporting/api"
        service-authorization-token="bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw">
        </bold-report-viewer>
  • Set the path of report in report-path property. You can use the following complete code in your index.cshtml page.

        <bold-report-viewer
        id="viewer"
        report-service-url="https://service.boldreports.com/api/Viewer"
        report-server-url="https://acmecorp.boldreports.com/reporting/api"
        report-path="/Sample Reports/Company Sales"
        service-authorization-token="bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw">
        </bold-report-viewer>

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’.