How to Use a JavaScript Reporting Tool Within an ASP.NET Core Application
Tags: webdev, javascript, tutorial, devops
Published: 2022-12-22 14:36:21

---
canonical_url: https://www.grapecity.com/blogs/how-to-use-javascript-reporting-tool-within-aspnetcore-application
description: Learn How to Use a JavaScript Reporting Tool within an ASP.NET Core application. See more from ActiveReportsJS today.
---

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](https://learn.microsoft.com/en-us/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-6.0). 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)
*   [Create an app route to retrieve the data from an SQLite database in JSON format](#add)
*   [Create an ActiveReportsJS report to visualize the retrieved JSON data](#report)
*   [Create a static HTML page to host the ActivReportsJS Report Viewer component and display the report](#html)

### 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](https://www.grapecity.com/activereportsjs/download). [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) is required to be installed as well.

### <a id="create"></a>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.

![](https://files.grapecity.com/gc-website-media/bwseymgy/01-js.png?width=500&height=333.16831683168317)

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.

![](https://files.grapecity.com/gc-website-media/owgdx5ci/02-js.png?width=500&height=333.16831683168317)

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

![](https://files.grapecity.com/gc-website-media/paibtasc/03-js.png?width=500&height=333.16831683168317)

### <a id="add"></a>Add Application Data

In this article, we will be using the [Chinook SQLite database](https://www.sqlitetutorial.net/sqlite-sample-database/). Create the “Data” folder in the application's root, and download and unpack the content of the [chinook.zip](https://www.sqlitetutorial.net/wp-content/uploads/2018/03/chinook.zip) file into that folder.

Next, add "Microsoft.EntityFrameworkCore.Sqlite" and "Microsoft.EntityFrameworkCore.Tools" packages into the project. Check the [MSDN page](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-visual-studio) for more information on how to install Nuget packages. 

Open the[ Package Manager Console ](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-powershell)and run the following command. 

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

The [Scaffold-DbContext](https://learn.microsoft.com/en-us/ef/core/cli/powershell#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](http://localhost:5255/Customers) URL to ensure that it returns the customer list in JSON format.

### <a id="report"></a>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](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App), click the **File** menu and select the **Continuous Page Layout** template for a newly created report.  

Open the [Data panel](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#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.

![](https://files.grapecity.com/gc-website-media/kh1hiwqo/04-js.png?width=500&height=381.0316139767055)

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.

![](https://files.grapecity.com/gc-website-media/jlkd0wet/05-js.png?width=475.5134281200633&height=500)

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](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table) consisting of the Column Headers Row and the Detail Row.

![](https://files.grapecity.com/gc-website-media/b0omuaps/06-creatingtable.gif?width=500&height=281.25)

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:

![](https://files.grapecity.com/gc-website-media/ym5b4exj/07-js.png?width=500&height=207.21271393643033)

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.

### <a id="html"></a>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.

![](https://files.grapecity.com/gc-website-media/pv3dcbnw/08-js.png?width=500&height=250.52029136316335)