How to Use ActiveReports 14 in ASP.NET Core 3.0

January 27 2020

This is a sequel to an earlier post on using ActiveReports with ASP.NET Core 2.0, where we talked about configuring ActiveReports and the HTML5 Viewer to be used in an ASP.NET Core 2.0 app.

The release of ActiveReports 14 offers .NET Core support, allowing customers to develop and distribute reporting applications to their end-users that work on multiple platforms. In this post, we'll talk about the need for reporting in ASP.NET Core applications. We'll create a simple ASP.NET Core application using ActiveReports 14 and render the reports in the JSViewer.

Create an ASP.NET Core Web Application

If you do not have an ASP.NET Core application, please refer to the Microsoft tutorial on how to create one in Visual Studio 2019.

Add ActiveReports to the App

The first step in adding ActiveReports is to install the ActiveReports Nuget package. For this, open the Nuget Package Manager and install the package:

‘GrapeCity.ActiveReports.Aspnetcore.Viewer.’

Once the packages have been installed, open Startup.cs and add the following inside the ConfigureServices and Configure blocks:

public static string EmbeddedReportsPrefix = "AR14_AspNetCore.Reports";
public void ConfigureServices(IServiceCollection services)
{
   services.AddReporting();
} 
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
   app.UseReporting(settings =>
   {
      settings.UseEmbeddedTemplates(EmbeddedReportsPrefix, Assembly.GetAssembly(GetType()));
      settings.UseCompression = true;
   });
}

Once you’ve made these changes, add a new folder and name it ‘Reports’ (you can name it whatever you like). This is where we will place all our report files. You can now add an existing ActiveReports report or create a new one.

Add the JSViewer to the Application

To display the report in the app, we need a viewer. With the new JSViewer (which replaces the older HTML5 Viewer, you can view your reports in any type of web application using JavaScript.

Open the Package Manager Console from the Tools menu > NuGet Package Manager and run the following command:

npm install @grapecity/ar-viewer

This will install the JSViewer packages under node_modules folder at the root location of your app.

Copy the jsViewer.min.js and jsViewer.min.css from ‘node_modules\@grapecity\ar-viewer\dist’ to the ‘wwwroot’ folder in your app.

Now add an HTML page under the same ‘wwwroot’ folder (for eg. index.html). Add the following css reference under <head>:

<link href="jsViewer.min.css" rel="stylesheet">

Now, and the following html markup and script reference to jsViewer.min.js:

 <body onload="loadViewer()">
    <div style="width: 100%; overflow-x: hidden">
        <div style="float:right;width:100%" id="viewerContainer">
        </div>
    </div>
    <script type="text/javascript" src="jsViewer.min.js"></script>

In the next step we initialize the JSViewer and load a report in it:

<script type="text/javascript">
    let viewer;
    function loadViewer() {
       viewer = GrapeCity.ActiveReports.JSViewer.create({
          element: '#viewerContainer'
       });
       viewer.openReport("Invoice.rdlx");
    }
</script>

Running the Application

Although running the application is a simple task, here we need to make a few changes before running the app.

Open HomeController.cs under the Controllers folder, remove all the Action methods and add the following:

public object Index() => Resource("index.html"); 
[HttpGet("{file}")]
public object Resource(string file)
{
    var stream = GetType().Assembly.GetManifestResourceStream("AR14_AspNetCore.wwwroot." + file);
    if (stream == null)
        return new NotFoundResult();

    if (Path.GetExtension(file) == ".html")
        return new ContentResult() { Content = new StreamReader(stream).ReadToEnd(), ContentType = "text/html" };

    if (Path.GetExtension(file) == ".ico")
        using (var memoryStream = new MemoryStream())
        {
            stream.CopyTo(memoryStream);

            return new FileContentResult(memoryStream.ToArray(), "image/x-icon") { FileDownloadName = file };

        }

    using (var streamReader = new StreamReader(stream))
        return new FileContentResult(System.Text.Encoding.UTF8.GetBytes(streamReader.ReadToEnd()), GetType(file)) { FileDownloadName = file };
}
private string GetType(string file)
{
    if (file.EndsWith(".css"))
        return "text/css";

    if (file.EndsWith(".js"))
        return "text/javascript";

    return "text/html";
}

We are almost ready to run the application. Change the Build Action property of index.html, jsViewer.min.js, jsViewer.min.css, your rdlx report file(s) and any datasources (the report is using) to Embedded Resource.

Doing this ensures that these files are embedded in the application assembly by the compiler and are accessible to the reports at runtime.

Now let’s run the application and see the JSViewer in action.