ASP.NET MVC Core Integration

Introduction

The JavaScript (JS) Report Viewer is an HTML/JS component that you can integrate into web applications of any architecture, including frameworks like React, Angular, Svelte, and others. This page details the integration steps.

Configuring Middleware

The JS Report Viewer communicates with server-side middleware to request report rendering, monitor progress, retrieve rendered pages, and more. The first step in integrating the JS Report Viewer into your application is Configuring Report Viewer Middleware.

Installing required NPM Packages

The JS Report Viewer is distributed via the @mescius/activereportsnet-viewer npm package. Depending on your application type, you can install it directly using npm or yarn, use the LibMan tool, or download and copy the package contents into your project. Here is an example of installing the package using npm:

npm i @mescius/activereportsnet-viewer

Including Report Viewer Styles

The JS Report Viewer requires CSS styles that need to be included in your application. You can find these CSS files in the dist folder of the @mescius/activereportsnet-viewer package:

jsViewer.min.css - must always be included in your application.
jsViewer.chart.min.css - should be included if your reports contain charts.

Using Report Viewer Modules

The JS Report Viewer distribution includes both AMD and ESM modules. If you’re integrating the viewer into an application that uses AMD modules, include a script reference to the jsViewer.min.js file from the dist folder of the @mescius/activereportsnet-viewer package and invoke the GrapeCity.ActiveReports.JSViewer.create API. Pass in the CSS selector of the viewer host and the configuration options as shown below:

@page
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ActiveReports JS Report Viewer</title>
    <link rel="stylesheet" href="~/lib/mescius/activereportsnet-viewer/dist/jsViewer.min.css" />
</head>
<body onload="loadViewer()">
    <div style="height:100vh;width:100%" id="viewerContainer"></div>
    <script type="text/javascript" src="~/lib/mescius/activereportsnet-viewer/dist/jsViewer.min.js"></script>
    <script type="text/javascript">
        let viewer;
        function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer'
            });
			viewer.openReport('Products.rdlx');
        }
    </script>
</body>
</html>

Alternatively, you can use ESM modules and invoke the createViewer method provided by the @mescius/activereportsnet-viewer package, for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ActiveReports JS Report Viewer</title>
    <link rel="stylesheet" href="~/lib/mescius/activereportsnet-viewer/dist/jsViewer.min.css" />
</head>
<body>
    <div style="height:100vh;width:100%" id="viewerContainer"></div>
     <script type="module">
        import { createViewer} from "/lib/mescius/activereportsnet-viewer/esm/jsviewer.min.js";
        createViewer('#viewerContainer');
    </script> 
</body>
</html>