How to configure Asp.Net Core Report Viewer in MAC?
Overview
The ASP.NET Core ReportViewer is a visualization control to view the Microsoft RDL/RDLC format-based report on a web page, and it is powered by HTML5/JavaScript. This section explains how to add the ReportViewer component to the ASP.NET Core MVC application along with simple example of the territory sales report in MAC.
Note: The ReportViewer control depends on server-side processing for report rendering. So, you should build the WebAPI service that is compatible for ReportViewer. This getting started section explains how to create the ReportViewer compatible Web API service for your application.
Environment setup
Refer to the installation page to learn more about the basic steps to configure the Syncfusion components to use with ASP.NET Core application in MAC.
Configuring Syncfusion ReportViewer Components
Step 1: Open Visual Studio Code and create a new project application using the New Project option.
Step 2: Click the App option in .NET Core and select ASP.NET Core Web App and click Next.
Step 3: Select the target framework for your project and click Next.
Step 4: Enter the project name and Click Create.
References
You should add the following packages for the ReportViewer:
Package | Purpose |
Syncfusion.EJ.ASPNET.Core | Builds the ReportViewer control with the tag helper. |
Syncfusion.EJ.ReportViewer.ASPNET.Core | Builds the server-side implementations. |
Note: NuGet package reference will be mostly preferred with ASP.NET Core development to setup the environment without installation. If you missed to explore, then refer to the NuGet-package-manager-settings to configure the Syncfusion NuGet source.
.
Styles and scripts
Check whether all the necessary dependency scripts and CSS files in your _Layout.cshtml page are similar as mentioned here.
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>AspNetCore - ReportViewer</title> <link href="https://cdn.syncfusion.com/16.4.0.42/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script> <script src="https://cdn.syncfusion.com/16.4.0.42/js/web/ej.web.all.min.js" type="text/javascript"></script> <style> body, html, #reportviewer { overflow: hidden !important; height: 100%; width: 100%; } </style></head><body style="height:100%;width:100%;padding:0;"> <div class="container body-content" style="height:100%;width:100%;"> @RenderBody() </div> @RenderSection("scripts", required: false) <ej-script-manager></ej-script-manager></body></html>
Note: ej-script-manager should be defined at the bottom of the Layout.cshtml page.
Tag helper
You should define the following namespace within the _viewImports.cshtml page to initialize the ReportViewer component with the tag helper support.
@using Syncfusion.JavaScript@addTagHelper "*, Syncfusion.EJ"
Add control with page
You can use the <ej-report-viewer> tag to add the ReportViewer control. For example, the Index.cshtml page can be replaced with the following code by removing the existing codes to add the ReportViewer.
@{ ViewData["Title"] = "ReportViewer ASP.NET CORE Support";}<ej-report-viewer id="container" report-service-url="Home" processing-mode="Remote"></ej-report-viewer>
Note: The Web API service should be mapped with the report viewer report-service-url as shown in the previous example code.
Build WebAPI service
Step 1: Create a new WebAPI class and click the Add button, and then select the new file option.
Step 2: Enter the HomeController name and click New.
You should inherit the IReportController interface to build the ReportViewer compatible Web API, and the ReportHelper should be used with IReportController interface implemented methods. The ReportHelper will perform the server-side related process and will return the required data for the ReportViewer to process the rendering. Here, the sample code is provided with an MVC application to build the Web API service along with the existing controller.
using System;
using System.Collections.Generic;using System.IO;using Microsoft.AspNetCore.Hosting;using Microsoft.AspNetCore.Mvc;using Microsoft.Extensions.Caching.Memory;using Syncfusion.EJ.ReportViewer;namespace CoreReportViewer{ public class HomeController : Controller, IReportController { private IMemoryCache _cache; private IHostingEnvironment _hostingEnvironment; public HomeController(IMemoryCache memoryCache, IHostingEnvironment hostingEnvironment) { _cache = memoryCache; _hostingEnvironment = hostingEnvironment; } [HttpPost] public object PostReportAction([FromBody] Dictionary<string, object> jsonResult) { return ReportHelper.ProcessReport(jsonResult, this, this._cache); } [ActionName("GetResource")] [AcceptVerbs("GET")] public object GetResource(ReportResource resource) { return ReportHelper.GetResource(resource, this, _cache); } [HttpPost] public object PostFormReportAction() { return ReportHelper.ProcessReport(null, this, this._cache); } public void OnInitReportOptions(ReportViewerOptions reportOption) { string basePath = _hostingEnvironment.WebRootPath; FileStream inputStream = new FileStream(basePath + @"/Territory Sales.rdl", FileMode.Open, FileAccess.Read); reportOption.ReportModel.Stream = inputStream; } public void OnReportLoaded(ReportViewerOptions reportOption) { } }}
Note: You cannot load the application report with path information in ASP.NET Core. So, you should load the report as Stream like an example provided above in OnInitReportOptions. If you need to get the Territory Sales sample report, you can obtain it from the Syncfusion ASP.NET Core sample browser installed location (wwwroot\Territory Sales.rdl).
Run the application
Run the sample application, and you can see the ReportViewer with Territory Sales as shown in the following screenshot.
The ASP.NET Core ReportViewer sample can be downloaded from here.
Conclusion
I hope you enjoyed learning about how to configure Asp.Net Core Report Viewer in MAC.
You can refer to our ASP.NET Core ReportViewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core ReportViewer example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
