Migrate Report Viewer application

To migrate an ASP.NET Core Report Viewer application from a Syncfusion® Essential Studio release to Bold Reports®, update both the client-side scripts and the Web API service. Bold Reports® introduces new assemblies for both the client and server side to resolve the compatibility problem between Essential Studio Report Viewer versions.

Follow these step-by-step instructions to migrate the Bold Reports® ASP.NET Core Report Viewer application:

How do I migrate the Report Viewer client side?

To migrate the client side of the ASP.NET Core Report Viewer, replace the Syncfusion® NuGet package, scripts, CSS references, tag helpers, and component tags with the Bold Reports® equivalents.

  1. To uninstall NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search for the Syncfusion.EJ.ASPNET.Core NuGet package and uninstall it from your application.

  2. Search for the BoldReports.AspNet.Core NuGet package, and install it in your application.

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

Scripts and CSS references

  1. Remove the following scripts and CSS references from the Report Viewer \Views\Shared\_Layout.cshtml page:

    • ej.web.all.min.css
    • ej.web.all.min.js

  2. Add the Bold Reports® references in the order shown in the following code. Replace the following code in your \Views\Shared\_Layout.cshtml page <head> tag.

    <!-- Report Viewer component style -->
<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 scripts -->
<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>

  3. The component prefix has been changed from ej to sf.

  4. Open the \Views\Shared\_Layout.cshtml page.

  5. Remove the following code <ej-script-manager></ej-script-manager> in your _Layout.cshtml page.

  6. Replace the following code in your _Layout.cshtml page.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ReportViewerDemo</title>
    <!-- Report Viewer component style -->
    <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 scripts -->
    <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>
</head>
<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>
</html>

Adding data visualization scripts

To render the report with data visualization components such as chart, gauge, and map items, add the scripts for the visualization elements. The following table shows the script reference that you need to add in the ASP.NET Core Report Viewer page for data visualization elements.

Visualization item Script file
Gauge, Map, Chart bold.reports.common.min.js

Use the following code to render the chart, gauge, and map report items in the Report Viewer.

<!-- Report Viewer component style -->
<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 scripts -->
<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>

Tag helper

  1. Remove the following tag helper within the _ViewImports.cshtml page.

        @using Syncfusion.JavaScript
    @addTagHelper *, Syncfusion.EJ

  2. Add the following tag helper within the _ViewImports.cshtml page.

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

Control initialization

  1. The component prefix has been changed from ej-report-viewer to bold-report-viewer.

  2. Open the Report Viewer CSHTML page.

  3. Replace the component tag ej-report-viewer with bold-report-viewer.

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

    If your application initializes the Report Viewer in multiple pages, replace the tag in all the pages.

How do I migrate the Report Viewer server side?

To migrate the server side of the ASP.NET Core Report Viewer, replace the Syncfusion® Report Viewer NuGet package with the Bold Reports® package and update the using statements in the Web API controller.

  1. To uninstall NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search for the Syncfusion.EJ.ReportViewer.ASPNET.Core NuGet package and uninstall it from your application.

  2. Search for the BoldReports.Net.Core NuGet package, and install it in your application.

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

Web API Controller

  1. The IReportController interface is moved to BoldReports.Web.ReportViewer. Open the Report Viewer Web API Controller file and remove the following using statement.

    using Syncfusion.EJ.ReportViewer;

  2. Add the following using statement.

    using BoldReports.Web.ReportViewer;

  3. Your application is now upgraded to the Bold Reports® Report Viewer, and you can run the application with the new assemblies.