Migrate to Report Viewer v2.0 component

To migrate an existing Bold Reports® ASP.NET Core Report Viewer application to the v2.0 component, replace the older script and CSS references in the _Layout.cshtml page with the v2.0 scripts and styles. Follow these steps:

  1. Open the \Views\Shared\_Layout.cshtml page that contains Report Viewer and its scripts.

  2. Remove the following older scripts and CSS references in your _Layout.cshtml page.

    • bold.reports.all.min.css
    • jquery.min.js
    • ej2-base.min.js
    • ej2-data.min.js
    • ej2-pdf-export.min.js
    • ej2-svg-base.min.js
    • ej2-lineargauge.min.js
    • ej2-circulargauge.min.js
    • ej2-maps.min.js
    • ej.chart.min.js
    • bold.reports.common.min.js
    • bold.reports.widgets.min.js
    • bold.report-viewer.min.js

  3. Add the following v2.0 scripts and CSS references in your _Layout.cshtml page.

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

The final updated _Layout.cshtml page for the v2.0 Report Viewer looks as follows:

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
      <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>
      <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>
  ```

## See also

* [Render data visualization report items](../render-data-visualization-report-items/)
* [Migrate the Report Viewer](../../migrate-report-viewer/)
* [Display SSRS RDL reports in an ASP.NET Core application](../../display-ssrs-rdl-report-in-asp-net-core-application/)