How to Build an ASP.NET Core MVC 6.0 Report Viewer Application

In the ComponentOne 2021v3 release, we added the support for creating a C1WebApi Report Services in .Net Core 6. In previous versions, the report services were only compatible with .NET Framework. Due to this update, users can create FlexReport APIs using .NET 6.

ComponentOne Web API Edition provides Report Services that enable users to build HTTP services, which a variety of clients can consume for viewing, loading, and caching FlexReports and SSRS reports. These are REST-based API services, which communicate with HTML 5 ReportViewer control to display the report content on the web.

This article will demonstrate how to create report services in .NET Core 6 and display reports using ComponentOne FlexViewer in .NET MVC Core.

Key features of FlexReport

Powerful Reporting Engine

FlexReport is a lightweight and fast reporting component. Further, major exports features such as exporting to PDF and HTML using FlexReport are executed much quicker than legacy C1Report.

Advance Data Operations

FlexReport provides support to the grouping of data by defining several sort expressions. In addition, sorting and grouping of data are independent of each other, so you can apply grouping on a set of records and manipulate the order of records through sorting.

Display Grouped and Aggregated Data

In FlexReport, each section contains at least one subsection. The subsections, just like sections, contain report fields. The advantage of adding sub-sections is that they help enhance the data present in their parent section.

Subsections create visual breaks in the report, allowing the user to scan and find information quickly. Moreover, it allows you to hide confidential information from specific users, will enable users to expand or collapse a table, and format summarized data differently than other data.

Single Viewer for all Document Types

FlexReport supports FlexViewer, an HTML 5 control that can be used to view multiple document types such as C1Report, C1FlexReport, SSRS, and C1Document. It also gives you capabilities for using/resetting parameters, options to refresh and cancel report rendering, bookmarks to jump to report locations, etc.

Broad Spectrum of Chart Types

FlexReport provides more than 70 chart types to choose from. Tasks such as binding data to charts, setting properties, and adding visual effects can be performed easily through the design-time editors available in the FlexReportDesigner application.

Support for Internet-based Data Sources

FlexReport also has the support of internet-based data sources like OData, Kintone, Microsoft Dynamics 365, Quick Books, and Salesforce. In the FlexReportDesigner, you can select one of these data sources and enter the appropriate information to connect and fetch data from these sources.

SQLite DataBase Support

The SQLite connection can be specified in the FlexReportDesigner to fetch data, just like any other database. It would be best if you had SQLite ADO.NET provider installed on your system; see SQLite for more details.

Adding C1WebApi

For developing a Web API for FlexReport using .NET 6, we require the following packages:

C1.AspNetCore.Api
C1.AspNetCore.Api.Report

In Visual Studio, create a new project and use ASP.NET Core Web API as the template:

web

In the following dialog box, select the desired location and the name of the project:

location

In the next dialog box, select .NET 6 as the Framework for the project. This will create the WebApi project targeting .NET Core 6:

version

After the project is created, go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution and install the above packages.

The C1.AspNetCore.Api package provides the core functionality of C1WebApi, like sending or receiving data from the client and the C1.AspNetCore.Api.Report package contains API for fetching and parsing FlexReports. Now, we will add the C1WebApi functionality and add a report provider. Add the following lines to Program.cs file:

using C1.AspNetCore.Api;  
...  
app.UseC1Api();  
var root = app.Environment.ContentRootPath;  
app.UseReportProviders().AddFlexReportDiskStorage("Root", Path.Combine(root, "Reports"));

The UseC1Api method will create an API for all the services provided by the C1WebApi, and the AddFlexReportDiskStorage method will bind the API to the Reports folder inside the root of the project. Here, the Root is the key that can be used for referencing this folder while fetching the reports.

Now we will add the Reports folder to the project. Right-click on the project name, select Add → New Folder, and name the folder as Reports:

new

We can put the FlexReports file in this folder. For this article, I am using the sample reports already provided with ComponentOne. Go to Documents\ComponentOne Samples\Web Api\v4.5.2\CS\WebApi\WebApi\ReportsRoot\FinancialReports and copy the BalanceSheet.flxr report into the Reports folder created previously.

Once copied, run the application by pressing F5 and going to the following URL:

https://localhost:/api/report/Root

This will return all the reports containing the Reports folder in JSON format. Here the Root key has been used to fetch the reports. The result may vary depending upon your machine:

json

Note: It is unnecessary to have the Reports folder inside the project, and it could be anywhere on the machine. But make sure that the project has permission to read/write this folder and the files inside it.

Displaying the report in FlexViewer

The primary purpose of this article is to display the reports. The FlexReports are saved in XML format, which is difficult for users to understand. So, we need a way to parse this XML and display it in a user-friendly format.

The C1WebApi Report service is used to parse this report from XML, and the FlexViewer control is used to display this parsed report. In this article, we will use ComponentOne MVC Core FlexViewer control. In your MVC Core project, add the following NuGet packages:

C1.AspNetCore.Mvc
C1.AspNetCore.Mvc.FlexViewer

While creating a new project in Visual Studio, select the ASP.NET Core Web App (Model-View-Controller) template and click on Next:

mvc

In the next dialog box, enter the name of your project and the desired location where the project should be created:

location

In the Additional Information dialog box, select .NET 6 as the Framework same as the Web API project, and create the project:

version

After the project is created, install the above packages. Once these packages are installed, we need to add the reference of these packages to cshtml files. In Views\Shared_Layout.cshtml file, add the following lines just before the head tag:

<c1-styles />  
<c1-scripts>  
   <c1-basic-scripts />  
   <c1-flex-viewer-scripts />  
</c1-scripts>

And in the Views_ViewImports.cshtml file, add the following tag helpers:

@addTagHelper *, C1.AspNetCore.Mvc  
@addTagHelper *, C1.AspNetCore.Mvc.FlexViewer

Now we have added the reference of MVC Controls, we can easily add the FlexViewer control and bind it to the WebApi service. In the Views\Home\Index.cshtml file, add the following code snippet:

<c1-report-viewer service-url="http://localhost:<port>/api/report" file-path="Root/BalanceSheet.flxr" report-name="BalanceSheet"></c1-report-viewer>

Here, service-url is the URL of C1WebApi. The file-path is the path to the FlexReport file where the root folder is the key that we added while creating the API, and report-name is the name of the report to display. After adding the required code, run the application, and the result will be similar to this:

viewer

Searching in FlexReports

The search feature is built into the FlexViewer. Whenever the user enters a search key, the C1WebApi is called, and it returns the search results in JSON format. The results are then parsed by the FlexViewer and displayed on the FlexReport. Click on the search button on the left toolbar and enter the search string:

searching