How to Use a JavaScript Reporting Tool Within an ASP.NET Core Application

ActiveReportsJS is a 100% client-side reporting tool with zero server dependencies. It means that you can use ActiveReportsJS together with any web framework, including ASP.NET Core. This article contains a simple yet thorough tutorial on integrating ActiveReportsJS with an ASP.NET Core application. By the end, you will be able to do the following:

• Create a new ASP.NET Core application
• Create an app route to retrieve the data from an SQLite database in JSON format
• Create an ActiveReportsJS report to visualize the retrieved JSON data
• Create a static HTML page to host the ActivReportsJS Report Viewer component and display the report

Prerequisites 

The following content assumes that you have ActiveReportsJS installed on your machine. If you don't have it, you can obtain it from the ActiveReportsJS website. Visual Studio 2022 is required to be installed as well.

Ready to get started with ActiveReportsJS? Download a free trial today!

Create an ASP.NET Core Application

Run Visual Studio 2022 and select the "Create a new project" option. Select the "ASP.NET Core Empty with C#" template and click the “Next” button.

In the “Configure your project” dialog, set the project name to "ReportingOnDotNet" or any other valid name of your choice, choose the directory where the project files will be saved, and click the “Next” button.

In the “Additional information” dialog, ensure that the “Configure for HTTPS” checkbox is unchecked.

Add Application Data

In this article, we will be using the Chinook SQLite database. Create the “Data” folder in the application's root, and download and unpack the content of the chinook.zip file into that folder.

Next, add "Microsoft.EntityFrameworkCore.Sqlite" and "Microsoft.EntityFrameworkCore.Tools" packages into the project. Check the MSDN page for more information on how to install Nuget packages. 

Open the Package Manager Console and run the following command. 

Scaffold-DbContext "DataSource=Data\chinook.db" Microsoft.EntityFrameworkCore.Sqlite -Tables Customers -Context ChinookContext

The Scaffold-DbContext command generates the required types to retrieve the information from the SQLite database.

Open the Program.cs file and add replace its content with the following:

using ReportingOnDotNet;
using System.Text.Json;
 
var db = new ChinookContext();
 
var builder = WebApplication.CreateBuilder(args);
 
var app = builder.Build();
 
app.UseDefaultFiles();
app.UseStaticFiles(new StaticFileOptions{
    ServeUnknownFileTypes = true,
});
 
app.MapGet("/Customers", () =>
    JsonSerializer.Serialize(db.Customers));
 
app.Run();

Start the application with or without Debug, and in the browser, visit the http://localhost:5255/Customers URL to ensure that it returns the customer list in JSON format.

Create an ActiveReportsJS Report

Let's create a report that visualizes these data from the API that returns the customer list in JSON format.

In the Standalone Report Designer Application, click the File menu and select the Continuous Page Layout template for a newly created report.

Open the Data panel of the property inspector and click the Add button.

In the Data Source editor dialog, type "Chinook" for the NAME field, http://localhost:5255/Customers for the ENDPOINT field, and click the Save Changes button.

Click the + icon near DataSource in the Data panel.

In the Data Set Editor dialog, type Customers in the NAME field and $.* in the JSON Path field.

Click the Validate button, ensure that the DataBase Fields section displays [13 items] text, and click the Save Changes button.

In the Data Panel, expand the "Customers" dataset, click the "Select Fields..." button, select the "CustomerId", "FirstName", "LastName", and the "Country" fields and drag and drop them into the report body. It will automatically create a Table data region consisting of the Column Headers Row and the Detail Row.

Select each column header and set the Font Weight to Bold using the corresponding button on the toolbar.

Set the Text Alignment of the textbox that displays the CustomerId to Left.

Optionally resize each column, so the table fits the entire report body width. 

The table design could look like this in the following picture:

Click the File menu and save the newly created report in the "wwwroot" folder(it needs to be created) of the application under the name Customers.rdlx-json.

Create an HTML page to display the report

Add the "customers.html" file into the newly created "wwwroot" folder with the following content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customers Report</title>
    <link
    rel="stylesheet"
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
    type="text/css"
  />
  <link
    rel="stylesheet"
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
    type="text/css"
  />
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
  <style>
    #viewer-host {
      width: 100%;
      height: 100vh;
    }
  </style>      
</head>
  
<body>
    <div id="viewer-host"></div>
    <script>
        var viewer = new ActiveReports.Viewer("#viewer-host");
        viewer.open('Customers.rdlx-json');
      </script>  
</body>
</html>

Restart the application and visit the http://localhost:5255/customers.html  URL in the browser, and the page will display the Customers report.

Ready to get started with ActiveReportsJS? Download a free trial today!