Migrate Report Viewer application

To migrate an ASP.NET MVC 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 MVC Report Viewer application:

How do I migrate the Report Viewer client side?

To migrate the client side of the ASP.NET MVC Report Viewer, replace the Syncfusion® assembly references, scripts, CSS references, and component tags with the Bold Reports® equivalents.

  1. In the Solution Explorer, right-click the References and remove the following assembly references:

    • Syncfusion.EJ
    • Syncfusion.EJ.MVC

  2. Add the assembly from the Syncfusion® NuGet package BoldReports.Mvc5. To add from NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search for BoldReports.Mvc5 NuGet package, and install 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
    • ej.unobtrusive.min.js

  2. The Report Viewer scripts and style sheets are added to the Scripts and Content folders in your application when installing the BoldReports.Mvc5 NuGet package. Add scripts as in the following code sample.

    @Styles.Render("~/content/bold-reports/v2.0/tailwind-light/bold.report-viewer.min.css")
<!-- Report Viewer component dependent script -->
@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 component script-->
@Scripts.Render("~/Scripts/bold-reports/v2.0/bold.report-viewer.min.js")

  3. Open the ~/Views/Shared/_Layout.cshtml page and replace the script manager tag at the end of <body> element from @(Html.EJ().ScriptManager()) to @(Html.Bold().ScriptManager()) as in the following code sample.

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

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

@Styles.Render("~/content/bold-reports/v2.0/tailwind-light/bold.report-viewer.min.css")

<!-- Report Viewer component dependent script -->
@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 component script-->
@Scripts.Render("~/Scripts/bold-reports/v2.0/bold.report-viewer.min.js")

Control initialization

  1. The component prefix has been changed from EJ() to SF().

  2. Open the ~/Views/Web.config file and add the BoldReports.Mvc assembly reference to the <system.web.webPages.razor> element.

    <configuration>
    ....
    ....
    <system.web.webPages.razor>
        ....
        ....
        <pages pageBaseType="System.Web.Mvc.WebViewPage">
            <namespaces>
                ....
                ....
                <add namespace="BoldReports.Mvc"/>
            </namespaces>
        </pages>
    </system.web.webPages.razor>
    ....
    ....
</configuration>

  3. Set the value of UnobtrusiveJavaScriptEnabled to false in Root directory web.config file as demonstrated in the following code example:

    <configuration>
<appSettings>
    ......
    ......
    <add key="UnobtrusiveJavaScriptEnabled" value="false" />
</appSettings>
......
......
</configuration>

  4. Open the Report Viewer page in Index.cshtml page.

  5. Replace the component tag Html.EJ().ReportViewer("viewer") with Html.Bold().ReportViewer("viewer").

    <div style="min-height:600px">
    @(Html.Bold().ReportViewer("viewer"))
</div>

How do I migrate the Report Viewer server side?

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

  1. In the Solution Explorer, right-click the References and remove the Syncfusion.EJ.ReportViewer assembly reference.
  2. Add the assembly from the Bold Reports® NuGet package BoldReports.Web. To add from NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search for BoldReports.Web NuGet package, and then install 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;

Your application now uses the Bold Reports® ASP.NET MVC Report Viewer, and you can run the application with the new assemblies.

How do I configure report export after migration?

The BoldReports.Web package can export reports with data visualization components only by using web components. You must configure the web scripts in Report Viewer Web API controller for exporting data visualization components such as chart, gauge, and map that are used in report definition. To configure the scripts in Web API, refer to the following steps:

  1. Open the Report Viewer Web API controller.

  2. Configure the following scripts and styles in OnInitReportOptions on Web API controller:

    • bold.report-viewer.min.css
    • jquery.min.js
    • bold.reports.common.min.js
    • bold.reports.widgets.min.js
    • bold.report-viewer.min.js

  3. Replace the following codes in Report Viewer Web API controller.

    [NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
    var resourcesPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Scripts");

    reportOption.ReportModel.ExportResources.Scripts = new List<string>
    {
       resourcesPath + @"\bold-reports\v2.0\common\bold.reports.common.min.js",
        resourcesPath + @"\bold-reports\v2.0\common\bold.reports.widgets.min.js",
        //Report Viewer Component Script
        resourcesPath + @"\bold-reports\v2.0\bold.report-viewer.min.js"
    };

    reportOption.ReportModel.ExportResources.DependentScripts = new List<string>
    {
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    };
}

    The data visualization components will not export without the preceding script configurations.