Integrate the component with Report Server

To embed the Bold Reports^® ASP.NET MVC Report Designer with Report Server, set the serviceUrl, serviceAuthorizationToken and reportServerUrl properties. You can then create, edit, browse and publish reports using the Report Server built-in API service.

Follow these steps to integrate Report Server with Bold Reports^® Designer version higher than v8.1.xx

Create ASP.NET MVC 5 web application

Open Visual Studio 2022, click the File menu, go to New, and then select Project.
Go to Installed > Visual C# > Web, and then select the required .NET Framework in the drop-down.
Select ASP.NET Web Application (.NET Framework), change the application name, and then click OK.
Then choose the MVC in the template and enable the Web API option in the Add folders and core references for: section.

Which NuGet packages does the Report Designer need for Report Server?

The Bold Reports^® ASP.NET MVC Report Designer needs the BoldReports.Web, BoldReports.Mvc5 and BoldReports.JavaScript NuGet packages. Add them to your application with the following steps:

Right-click the project/solution in the Solution Explorer tab, and choose Manage NuGet Packages…. Alternatively, select the Tools > NuGet Package Manager > Manage NuGet Packages for Solution menu command.

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

Search for BoldReports.Web, BoldReports.Mvc5, and BoldReports.JavaScript NuGet packages, and install them in your MVC application.

Package	Purpose
`BoldReports.Web`	Used to create Web API service for processing the reports.
`BoldReports.Mvc5`	Contains tag helpers to create client-side web Report Designer control.
`BoldReports.JavaScript`	Contains Report Designer scripts and style sheets.

Registering namespaces within Web.config

Open ~/Views/Web.config file and add the BoldReports.Mvc namespace under the namespaces tag.

<namespaces>
    <add namespace="BoldReports.Mvc"/>
</namespaces>

Disable unobtrusive mode

Set the UnobtrusiveJavaScriptEnabled to false in Web.config file of root directory as shown in the following image:

Disable unobtrusive mode

Refer Scripts and Styles

Add the following references in the same order. You can replace the following code in the \Views\Shared\_Layout.cshtml page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/bold-reports/v2.0/tailwind-light/bold.report-designer.min.css")
    @Styles.Render("~/Scripts/CodeMirror/lib/codemirror.css")
    @Styles.Render("~/Scripts/CodeMirror/addon/hint/show-hint.css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div style="height: 600px;width: 100%;">
        @RenderBody()
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/Scripts/CodeMirror/lib/codemirror.js")
    @Scripts.Render("~/Scripts/CodeMirror/addon/hint/show-hint.js")
    @Scripts.Render("~/Scripts/CodeMirror/addon/hint/sql-hint.js")
    @Scripts.Render("~/Scripts/CodeMirror/mode/sql/sql.js")
    @Scripts.Render("~/Scripts/CodeMirror/mode/vb/vb.js")

    <!-- Report Designer component dependent scripts -->
    @Scripts.Render("~/Scripts/bold-reports/v2.0/common/bold.reports.common.min.js")
    @Scripts.Render("~/Scripts/bold-reports/v2.0/common/bold.reports.widgets.min.js")

    <!-- Report Viewer and Designer component scripts -->
    @Scripts.Render("~/Scripts/bold-reports/v2.0/bold.report-viewer.min.js")
    @Scripts.Render("~/Scripts/bold-reports/v2.0/bold.report-designer.min.js")
    @RenderSection("scripts", required: false)
</body>
</html>

Refer to the Dependencies to learn more details about web Report Designer dependent scripts and style sheets links.

Configure Script Manager

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

<body>
    ....
    ....
    <!-- Bold Reporting ScriptManager -->
    @Html.Bold().ScriptManager()
</body>

The main reason for referring to the Script manager in _Layout file is that, it can be referred as common by all the View files present within your application.

Add Control in View page

Using Bold() tag, add the Bold Reports^® Report Designer component in any web page (cshtml) of your application in the ~/Views folder.

    @(Html.Bold().ReportDesigner("designer"))

How do I configure Report Server for the Report Designer?

To configure Bold Reports^® Report Server for the ASP.NET MVC Report Designer, set the serviceUrl, serviceAuthorizationToken and reportServerUrl values from your Report Server.

The Report Designer requires the serviceAuthorizationToken, serviceUrl and reportServerUrl to perform the API actions with Bold Reports^® Report Server. You can provide the information from Report Server as follows:
serviceUrl – Report Server Reporting Service information should be provided for this API.
serviceAuthorizationToken – Authorization token to communicate with reportServiceUrl.
reportServerUrl- Report Server Reporting Server information should be provided for this API.

Based on your Report Server type, you can follow one of the procedures listed as follows:

Enterprise Reporting Server

Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see Generate an authentication token using credentials.
```
@(Html.Bold().ReportDesigner("designer")
            .ServiceAuthorizationToken("bearer <server-token>")
        )
```
To generate the token within an application, see Generate an authentication token by using the embed secret key API.

Set the Bold Reports^® Report Server built-in service URL to the ServiceUrl property. The ServiceUrl property value should be in format of https://<<Report server name>>/reporting/reportservice/api/Designer.

@(Html.Bold().ReportDesigner("designer")
            .ServiceAuthorizationToken("bearer <server-token>")
            .ServiceUrl(@"https://<your-report-server-domain>/reporting/reportservice/api/Designer")
)

Set the Bold Reports^® Report Server built-in server URL to the ReportServerUrl property. The ReportServerUrl property value should be in format of https://<<Report server name>>/reporting/api/site/<<site name>>.

@(Html.Bold().ReportDesigner("designer")
            .ServiceAuthorizationToken("bearer <server-token>")
            .ServiceUrl(@"https://<your-report-server-domain>/reporting/reportservice/api/Designer")
            .ReportServerUrl(@"https://<your-report-server-domain>/reporting/api/site/<site-name>")
)

Cloud Reporting server

Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see Generate an authentication token using credentials.
```
    @(Html.Bold().ReportDesigner("designer")
    .ServiceAuthorizationToken("bearer <server-token>")
    )
```
To generate the token within an application, see Generate an authentication token by using the embed secret key API.

Set the Bold Reports^® Report Server built-in service URL to the ServiceUrl property. The ServiceUrl property value is a https://service.boldreports.com/api/Designer.

    @(Html.Bold().ReportDesigner("designer")
    .ServiceAuthorizationToken("bearer <server-token>")
    .ServiceUrl(@"https://service.boldreports.com/api/Designer")
    )

    @(Html.Bold().ReportDesigner("designer")
    .ServiceAuthorizationToken("bearer <server-token>")
    .ServiceUrl(@"https://service.boldreports.com/api/Designer")
    .ReportServerUrl(@"https://<your-report-server-domain>/reporting/api/")
    )