How to Use Bold Report Viewer Control with Essential JS2 Controls

Howdy! As you know, in a real-time scenario, a web application not only contains information but also various business analytics reports and modern UI controls. In this blog, we are going to create a real-time sales tracker application in ASP.NET Core with all of these elements.

With our Bold Reports Embedded platform, you can easily embed reporting components in your project to create, bind data to, view, and export pixel-perfect, paginated reports.

Essential JS 2 is our JavaScript-based, modern UI control library built from the ground up to be lightweight, responsive, modular, and touch-friendly. These controls can be easily included in your web applications.

The web application we’re making in this blog includes the Report Viewer from Bold Reports and a couple of Essential JS 2 controls.

Prerequisites

• Visual Studio 2019 with ASP.NET and Web development workloads.
• .NET Core 2.2+ Framework.
• Bold Reports Embedded or Viewer SDK subscription.

Create an ASP.NET Core application

1. Open Visual Studio 2019 and click Create a new project.
2. Select ASP.NET Core Web Application and then click Next.
3. Change the project name and select the Web Application (Model-View-Controller) template.
4. Then click Create to initialize the project.

Initialize the Essential JS2 controls

In this section, we are going to initialize the Essential JS 2 controls in the previously created ASP.NET Core web application.

NuGet package

Install the following NuGet packages to render Essential JS 2 controls.

Initialize Essential JS2 Controls

For this blog, I have integrated the SideBar and Accordion controls from the Essential JS 2 ASP.NET Core controls. You can use any of the controls from the ASP.NET Core Essential JS 2 suite in your application. We recommend you refer to the documentation to learn more.

Integration of Report Viewer control

The reports processing and rendering in the browser will be handled by the server-side ASP.NET Core WEB API service and the client-side will be handled by Razor view pages.

Let’s initialize Report Viewer in the previously created ASP.NET Core application, which already has the two Essential JS 2 controls.

NuGet packages

Install the following NuGet packages in the created ASP.NET Core application. These are used for processing the RDL reports.

Compatibility

We are using both the Essential JS 2 and Bold Reporting controls in a single application, so we need to use compatibility themes to avoid UI conflicts. For more information, kindly refer to the documentation.

CSS

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" />
<link href="https://cdn.boldreports.com/2.3.39/content/bold.widgets.core.compatibility.min.css"   rel="stylesheet" />
<link href="https://cdn.boldreports.com/2.3.39/content/material/bold.theme.compatibility.min.css"   rel="stylesheet" />

Create reporting controller

This is where the reports are processed for rendering.

1. Create an empty API controller by right-clicking the Controller folder, selecting Add –> Controller, and then naming it ReportViewerController.cs.

   

2. Include your already created .rdl or .rdlc reports in the path wwwroot\Resources\. Here we have used sales-order-detail.rdl report, which can be downloaded from Direct-Trac.You can also add reports from the Bold Reports installation location (C:\Users\Public\Documents\Bold Reports\Embedded Reporting Tools\Samples\ASP.NET Core\wwwroot\resources\Report). For more information, refer to the samples and demos section of the Bold Reports documentation.
3. Replace the following code into ReportViewerController.cs. To learn more about the controller actions, please refer to the documentation ReportViewer ASP.NET Core Service.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using BoldReports.Web.ReportViewer;

// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace webservice
{
    [Route("api/[controller]/[action]")]
    public class ReportViewerController : Controller, IReportController
    {
        // Report Viewer requires a memory cache to store the information of consecutive client requests and
        // have the rendered report viewer information in server.
        private Microsoft.Extensions.Caching.Memory.IMemoryCache _cache;

        // IHostingEnvironment used with sample to get the application data from wwwroot.
        private Microsoft.AspNetCore.Hosting.IHostingEnvironment _hostingEnvironment;

        // Post action to process the report from server-based json parameters and send the result back to the client.
        public ReportViewerController(Microsoft.Extensions.Caching.Memory.IMemoryCache memoryCache,
            Microsoft.AspNetCore.Hosting.IHostingEnvironment hostingEnvironment)
        {
            _cache = memoryCache;
            _hostingEnvironment = hostingEnvironment;
        }

        // Post action to process the report from server based json parameters and send the result back to the client.
        [HttpPost]
        public object PostReportAction([FromBody] Dictionary<string, object> jsonArray)
        {
            return ReportHelper.ProcessReport(jsonArray, this, this._cache);
        }

        // Method will be called to initialize the report information to load the report with ReportHelper for processing.
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            string basePath = _hostingEnvironment.WebRootPath;
            // Here, we have loaded the sales-order-detail.rdl report from application folder wwwroot\Resources. sales-order-detail.rdl should be there in wwwroot\Resources application folder.
            System.IO.FileStream reportStream = new System.IO.FileStream(basePath + @"\Resources\sales-order-detail.rdl", System.IO.FileMode.Open, System.IO.FileAccess.Read);
            reportOption.ReportModel.Stream = reportStream;
        }

        // Method will be called when report is loaded internally to start to layout process with ReportHelper.
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
        }

        //Get action for getting resources from the report.
        [ActionName("GetResource")]
        [AcceptVerbs("GET")]
        // Method will be called from Report Viewer client to get the image src for Image report item.
        public object GetResource(ReportResource resource)
        {
            return ReportHelper.GetResource(resource, this, _cache);
        }

        [HttpPost]
        public object PostFormReportAction()
        {
            return ReportHelper.ProcessReport(null, this, _cache);
        }
    }
}

Scripts order

As we discussed in the compatibility section, we are using both the Bold Reports and Essential JS 2 controls, so we need to follow a certain scripts and stylesheet order reference for proper rendering of the controls in  ./Views/Shared/_Layout.cshtml. Kindly refer to the documentation for the scripts and stylesheet Order reference.

@* Syncfusion Essential JS 2 Styles *@
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" />
@* BoldReports Styles *@
<link href="https://cdn.boldreports.com/2.3.39/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/2.3.39/content/material/bold.theme.compatibility.min.css" rel="stylesheet" />

<link rel="stylesheet" href="~/css/styles.css" />
<!-- Syncfusion Essential JS 2 Scripts -->
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<script src="https://cdn.boldreports.com/2.3.39/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/2.3.39/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/2.3.39/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/2.3.39/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/2.3.39/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/2.3.39/scripts/data-visualization/ej2-circulargauge.min.js"></script>

<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.boldreports.com/2.3.39/scripts/data-visualization/ej2-maps.min.js"></script>

<script src="https://cdn.boldreports.com/2.3.39/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/2.3.39/scripts/common/bold.reports.widgets.min.js"></script>

<!--Render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.boldreports.com/2.3.39/scripts/data-visualization/ej.chart.min.js"></script>

<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/2.3.39/scripts/bold.report-viewer.min.js"></script>

Note:
If your application is already using any of the Essential JS 2 (ej2) scripts used by BoldReports
EJ2: <script src=”https://cdn.syncfusion.com/…/…/ej2-maps.min.js”></script>
BoldReports: <script src=”https://cdn.boldreports.com/…/…/ej2-maps.min.js”></script>
Referring to the equivalent BoldReports scripts is enough to render components.

Tag Helpers

It is necessary to define the following namespace for the component references and Tag Helper support within the _ViewImports.cshtml page.

@using WebApplication
@using WebApplication.Models
@using BoldReports.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Syncfusion.EJ2
@addTagHelper *, BoldReports.AspNet.Core

Script Manager

The ScriptManager is used to place our control initialization script in the page. Open the ~/Views/Shared/_Layout.cshtml page and add the Reporting and Essential JS2 Script Manager at the end of <body> the element.

<body>
...
...
    @RenderBody()
...
...
    @RenderSection("Scripts", required: false)
    <!-- EJ2 script manager -->
   <ejs-scripts></ejs-scripts>
    <!-- Bold Reports script manager -->
   <bold-script-manager></bold-script-manager>
</body>

Initialize Empty View

Create an empty view file ./Views/Home/report.cshtml  and initialize the Report Viewer using Tag Helper syntax.

<div style="min-height:800px; width:100%;">
<bold-report-viewer id="viewer" report-path="sales-order-detail.rdl" report-service-url="/api/ReportViewer"></bold-report-viewer>
</div>

Finally, include the navigation to the ‘report viewer’ view page(./Views/Home/report.cshtml) in the sidebar(./Views/Shared/_Layout.cshtml).

<!DOCTYPE html>
<html>
<head>
...
...
</head>
<body>
<ejs-sidebar id="sidebar-menu" width="290px">
<e-content-template>
...
...
<div class="control-section">
<div class="control_wrapper accordion-control-section">
<ejs-accordion id="accordion">
<e-accordion-accordionitems>
...
...
<e-accordion-accordionitem header="Report Viewer" content="#inputs"></e-accordion-accordionitem>
</e-accordion-accordionitems>
</ejs-accordion>
</div>
...
...
<ul id="inputs" style="display:none">
<li><a href="/Home/report">Sales Report</a></li>
</ul>
</div>
</e-content-template>
</ejs-sidebar>
<div id="body_content" class="maincontent">
...
...
@RenderBody()
...
...
</div>

@RenderSection("Scripts", required: false)
<ejs-scripts></ejs-scripts>
<bold-script-manager></bold-script-manager>
</body>
</html>

Run the application

Build and run the project using F5 or by clicking the Start button. The application will be launched in the default system browser and the output will look like the following.

You can also export the report in PDF, Excel, Word, HTML, PowerPoint, XML, and CSV. For more options please refer to the documentation on the Report Viewer.

Conclusion

In this blog, we have learned how to use the Bold Reports Report Viewer component with a web application containing Essential JS 2 controls. To explore further, I recommend you go through our sample reports and documentation. You can also download the created ASP.NET Core web application from the GitHub.

If you have any questions, please post them in the comments section below. You can also contact us through our contact page or, if you already have an account, you can log in to submit your support question. Feel free to check out the Bold Reports Embedded edition demos and documentation to explore the available tools and their various customization features.

Bold Reports now comes with a 15-day free trial with no credit card information required. We welcome you to start a free trial and experience Bold Reports for yourself. Give it a try and let us know what you think!

Stay tuned to our official Twitter, Facebook, LinkedIn, Pinterest, and Instagram pages for announcements about new releases.