Search results

Getting Started

This section explains the steps required to display RDL standard reports using Report Designer within your ASP.NET Core application. To create an ASP.NET Core application with Syncfusion Report Designer, follow these steps:

  1. Open Visual Studio 2017, click the File menu, go to New, and then select Project.
  2. Go to Installed > Visual C# > Web, and then select ASP.NET Core Web Application, change the application name, and then click OK. Project template
  3. Choose the ASP.NET Core version and select the Web Application Model-View-Controller template and then click OK. Do not select Enable Docker Support. Creating a new ASP.NET Core Application Project

List of dependency libraries

The Web API service configuration requires the following report server-side packages.

Right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Alternatively, select the Tools > NuGet Package Manager > Manage NuGet Packages for Solution menu command and then search the following Syncfusion.Reporting.AspNet.Core and Syncfusion.Reporting.Net.Core packages to install them in the application. The following table provides details about the packages and their usage.

Package Purpose
Syncfusion.Reporting.Net.Core Used to create Web API service for processing the reports.
Syncfusion.Reporting.AspNet.Core Contains tag helpers to create client-side Report Designer control.

Refer to the NuGet Packages to learn more details about installing and configuring Report Designer NuGet packages.

The following table provides details about the dependency packages and its usage.

Assemblies Purpose
Syncfusion.Reporting.Net.Core Builds the server-side implementations.

If we install the above NuGet packages, it automatically add the below ReportDesigner dependent NuGet file in your application.

Assemblies Purpose
Syncfusion.Compression.Net.Core Supports for exporting the report to PDF, Microsoft Word, and Microsoft Excel format. It is a base library for the packages Syncfusion.Pdf.Net.Core , Syncfusion.DocIO.Net.Core and Syncfusion.XlsIO.Net.Core.
Syncfusion.Pdf.Net.Core Supports for exporting the report to a PDF.
Syncfusion.DocIO.Net.Core Supports for exporting the report to a Word.
Syncfusion.XlsIO.Net.Core Supports for exporting the report to an Excel.
Syncfusion.OfficeChart.Net.Core It is a base library of the Syncfusion.XlsIO.Net.Core package.
Newtonsoft.Json Serialize and deserialize the data or report for report designer. It is a mandatory package for the report designer, and the package version should be higher of 10.0.1 for NET Core 2.0 and others should be higher of 9.0.1.
System.Data.SqlClient This is an optional package for the report viewer and designer. It should be referred in project when process the RDL report and which contains the SQL Server and SQL Azure data source. Also, the package version should be higher of 4.1.0 .

Refer Scripts and CSS

Directly refer the required scripts and style sheets that are mandatorily required to render the Report Designer, from CDN links. Open the \Views\Shared\_Layout.cshtml page and refer the following scripts and styles in the <head> tag.

<link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/flat-azure/ej.reports.all.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/flat-azure/ej.reportdesigner.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/vb/vb.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.reporting.common.min.js"></script>
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.reporting.widgets.min.js"></script>
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.report-designer-widgets.min.js"></script>
<!--Chart component script added before the Report Designer and viewer script to render report with chart report item-->
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.report-viewer.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.report-designer.min.js" type="text/javascript"></script>

Refer to the Dependencies to learn more details about Report Designer dependent scripts and style sheets links.

Configure Script Manager

Open the the ~/Views/Shared/_Layout.cshtml page and add the Script Manager at the end of <body> element as in the following code sample.

<body>
    ....
    ....
    <!-- Syncfusion Reporting ScriptManager -->
   <sf-script-manager></sf-script-manager>
</body>

Tag helper

It is necessary to define the following tag helper within the _ViewImports.cshtml page to initialize the Report Designer component with the tag helper support.

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @using Syncfusion.Reporting.TagHelpers
    @addTagHelper *, Syncfusion.Reporting.AspNet.Core

Initialize Report Designer

Initialize the Report Designer as shown in the following code sample in any web page (cshtml) of your application in the ~/Views folder. For an example, the Index.cshtml page can be replaced with the following code by removing the existing codes

<div style="height: 500px;width: 100%;">
    <sf-report-designer id="designer"></sf-report-designer>
</div>

Add API Controller

  1. Right-click the project and select Add > New Item from the context menu.
  2. In the Add New Item dialog, select API Controller class and name it as ReportingAPIController, and then click Add. Adding a new controller to the project

While adding API Controller class, name it with the suffix Controller that is mandatory.

Configure Web API

The IReportDesignerController interface contains the required actions and helper methods declaration to process the designer file and data actions. The ReportDesignerHelper and ReportHelper class contains methods that help to process Post or Get request from the control and return the response.

ReportDesignerHelper

The class ReportDesignerHelper contains helper methods that help to process Post or Get request from the Report Designer control and returns the response to the Report Designer control. It has the following methods.

Methods Description
GetResource Returns the report resource for the requested key.
ProcessReport Processes the report request and returns the result.

ReportHelper

The class ReportHelper contains helper methods that help process Post or Get request for report preview action and returns the response to the Report Designer. It has the following methods.

Methods Description
GetResource Returns the report resource for the requested key.
ProcessReport Processes the report request and returns the result.

Open ReportingAPIController.cs file and replace the following code example.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.Reporting.Web.ReportViewer;
using Syncfusion.Reporting.Web.ReportDesigner;

namespace ReportDesignerSample
{
    [Route("api/[controller]/[action]")]
    public class ReportingAPIController : Controller, Syncfusion.Reporting.Web.ReportDesigner.IReportDesignerController
    {
        private Microsoft.Extensions.Caching.Memory.IMemoryCache _cache;
        private Microsoft.AspNetCore.Hosting.IHostingEnvironment _hostingEnvironment;

        public ReportingAPIController(Microsoft.Extensions.Caching.Memory.IMemoryCache memoryCache, Microsoft.AspNetCore.Hosting.IHostingEnvironment hostingEnvironment)
        {
            _cache = memoryCache;
            _hostingEnvironment = hostingEnvironment;
        }

        public string GetFilePath(string fileName)
        {
            string targetFolder = this._hostingEnvironment.WebRootPath + "\\";
            targetFolder += "Cache";

            if (!System.IO.Directory.Exists(targetFolder))
            {
                System.IO.Directory.CreateDirectory(targetFolder);
            }

            if (!System.IO.Directory.Exists(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken))
            {
                System.IO.Directory.CreateDirectory(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken);
            }

            var folderPath = targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken + "\\";
            return folderPath + fileName;
        }

        public object GetImage(string key, string image)
        {
            return ReportDesignerHelper.GetImage(key, image, this);
        }

        public object GetResource(ReportResource resource)
        {
            return ReportHelper.GetResource(resource, this, _cache);
        }

        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            //You can update report options here
        }

        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            //You can update report options here
        }

        [HttpPost]
        public object PostDesignerAction([FromBody] Dictionary<string, object> jsonResult)
        {
            return ReportDesignerHelper.ProcessDesigner(jsonResult, this, null, this._cache);
        }

        public object PostFormDesignerAction()
        {
            return ReportDesignerHelper.ProcessDesigner(null, this, null, this._cache);
        }

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

        [HttpPost]
        public object PostReportAction([FromBody] Dictionary<string, object> jsonResult)
        {
            return ReportHelper.ProcessReport(jsonResult, this, this._cache);
        }

        public bool UploadFile(IFormFile httpPostedFile)
        {
            string targetFolder = this._hostingEnvironment.WebRootPath + "\\";
            string fileName = !string.IsNullOrEmpty(ReportDesignerHelper.SaveFileName) ? ReportDesignerHelper.SaveFileName : System.IO.Path.GetFileName(httpPostedFile.FileName);
            targetFolder += "Cache";

            if (!System.IO.Directory.Exists(targetFolder))
            {
                System.IO.Directory.CreateDirectory(targetFolder);
            }

            if (!System.IO.Directory.Exists(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken))
            {
                System.IO.Directory.CreateDirectory(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken);
            }
            using (var reader = new System.IO.StreamReader(httpPostedFile.OpenReadStream()))
            {
                string contentAsString = reader.ReadToEnd();
                byte[] bytes = System.Text.Encoding.ASCII.GetBytes(contentAsString);
                if (System.IO.File.Exists(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken + "\\" + fileName))
                {
                    System.IO.File.Delete(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken + "\\" + fileName);
                }
                System.IO.File.WriteAllBytes(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken + "\\" + fileName, bytes);
                reader.Close();
                reader.Dispose();
            }
            return true;
        }

        [HttpPost]
        public void UploadReportAction()
        {
            ReportDesignerHelper.ProcessDesigner(null, this, this.Request.Form.Files[0], this._cache);
        }

        public FileModel GetFile(string filename, bool isOverride)
        {
            throw new NotImplementedException();
        }

        public List<FileModel> GetFiles(FileType fileType)
        {
            throw new NotImplementedException();
        }
    }
}

Set the service URL

To browse, open and save the reports in the application, set the WebAPI controller name to the ServiceUrl property of the Report Designer. You can replace the following code in your Report Designer page.

<div style="height: 500px;width: 100%;">
  <sf-report-designer id="designer" service-url="/api/ReportingAPI" ></sf-report-designer>
</div>

Run the Application

Run the sample application and you can see the ReportDesigner on the page as displayed in the following screenshot.

Report Designer demo