Load Bold Reports^® Report Server reports

To load Bold Reports^® Report Server reports in the ASP.NET Core 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 create your first application on the other .NET Core frameworks, refer to the documentation for ASP .NET Core 2.1, ASP.NET Core 3.1 or .NET 5.0

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

Create ASP.NET Core application

Start Visual Studio 2022 and click Create new project.
Choose ASP.NET Core Web App (Model-View-Controller), and then click Next.
Change the project name, and then click Next.
In the dropdown for the ASP.NET Core version, choose ASP.NET Core 6.0, 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 the Can Bold Reports^® be used with ASP.NET Core on Linux and macOS section.

List of dependency libraries

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.
Search for BoldReports.AspNet.Core package and install it in your Core application. The following table provides details about the package and its usage.

Package	Purpose
`BoldReports.AspNet.Core`	Contains tag helpers to create client-side reporting control.

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.

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
Open the \Views\Shared\_Layout.cshtml page.

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

<!-- 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>

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

Define the following tag helper within the _ViewImports.cshtml page to initialize the Report Viewer component with 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<sup>®</sup> script manager -->
   <bold-script-manager></bold-script-manager>
</body>

Initialize Report Viewer

Open the Index.cshtml page.
Remove the existing codes and add the following code:

    <bold-report-viewer id="viewer"></bold-report-viewer>

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

To render a Bold Reports^® Report Server report, the 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}.

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

Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see how to generate an access token for Bold Reports^® Report Server.
```
    <bold-report-viewer
    id="viewer"
    service-authorization-token="bearer <server token>">
    </bold-report-viewer>
```
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.

    <bold-report-viewer id="viewer"
    report-service-url="https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer"
    service-authorization-token="bearer <server token>">
    </bold-report-viewer>

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

    <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 <server token>">
    </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 <server token>">
    </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. To generate the token by using credentials, see how to generate an access token in Bold Reports^® Cloud.
```
    <bold-report-viewer
    id="viewer"
    service-authorization-token="bearer <server token>">
    </bold-report-viewer>
```
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.

    <bold-report-viewer
    id="viewer"
    report-service-url="https://service.boldreports.com/api/Viewer"
    service-authorization-token="bearer <server token>">
    </bold-report-viewer>

    <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 <server token>">
    </bold-report-viewer>