Search results

Getting Started

This section explains the steps required to render a ReportDesigner in your ASP.NET MVC application.

Prerequisites

To get started with ASP.NET MVC 5 application, ensure the following software to be installed on the machine.

  • .Net Framework 4.5 and above.
  • ASP.NET MVC 5

Create ASP.NET MVC 5 web application

  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 the required .NET Framework in the drop-down.
  3. Select ASP.NET Web Application (.NET Framework), change the application name, and then click OK. Project Creation Wizard
  4. Then choose the MVC in the template and enable the Web API option in the Add folders and core references for: section. Asp.Net MVC5 web application template

Add Assembly References

  1. Right-click the project/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.

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

  2. Search for Syncfusion.Reporting.Web, Syncfusion.Reporting.Mvc5 NuGet packages, and install them in your MVC application.

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

Registering namespaces within Web.config

Open ~/Views/Web.config file and add the Syncfusion.Reporting.Mvc namespace under the namespaces tag.

<namespaces>
    <add namespace="Syncfusion.Reporting.Mvc"/>
</namespaces>

Disable unobtrusive mode

Set the UnobtrusiveJavaScriptEnabled to false in Web.config file of root directory as shown in the below image.

Disable unobtrusive mode

Refer Scripts and Styles

Add the listed references in the same order as given below. You can replace the following code in the \Views\Shared\_Layout.cshtml page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/reports/material/ej.reports.all.min.css")
    @Styles.Render("~/Content/reports/default-theme/ej.reportdesigner.min.css")
    @Styles.Render("~/Scripts/CodeMirror/lib/codemirror.css")
    @Styles.Render("~/Scripts/CodeMirror/addon/hint/show-hint.css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div style="height: 600px;width: 100%;">
        @RenderBody()
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/Scripts/CodeMirror/lib/codemirror.js")
    @Scripts.Render("~/Scripts/CodeMirror/addon/hint/show-hint.js")
    @Scripts.Render("~/Scripts/CodeMirror/addon/hint/sql-hint.js")
    @Scripts.Render("~/Scripts/CodeMirror/mode/sql/sql.js")
    @Scripts.Render("~/Scripts/CodeMirror/mode/vb/vb.js")
    @Scripts.Render("~/Scripts/reports/common/ej.reporting.common.min.js")
    @Scripts.Render("~/Scripts/reports/common/ej.reporting.widgets.min.js")
    @Scripts.Render("~/Scripts/reports/common/ej.report-designer-widgets.min.js")
    <!--Renders the chart item. Add this script, only if your report contains the chart report item.-->
    @Scripts.Render("~/Scripts/reports/data-visualization/ej.chart.min.js")
    <!--Render the gauge item. Add these scripts only if your report contains the gauge report item.-->
    @Scripts.Render("~/Scripts/reports/data-visualization/ej.circulargauge.min.js")
    @Scripts.Render("~/Scripts/reports/data-visualization/ej.lineargauge.min.js")
    <!--Renders the map item. Add this script only if your report contains the map report item.-->
    @Scripts.Render("~/Scripts/reports/data-visualization/ej.map.min.js")
    <!-- Report Viewer component script-->
    @Scripts.Render("~/Scripts/reports/ej.report-viewer.min.js")
    @Scripts.Render("~/Scripts/reports/ej.report-designer.min.js")
    @RenderSection("scripts", required: false)
    @Html.SF().ScriptManager()
</body>
</html>

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

Configure Script Manager

Open 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 -->
    @Html.SF().ScriptManager()
</body>

The main reason for referring the Script manager in _Layout file is that, it can be referred as common by all the View files present within your application.

Add Control in View page

Using SF() tag add the Syncfusion Report Designer component in any web page (cshtml) of your application in the ~/Views folder.

    @(Html.SF().ReportDesigner("designer"))

Add API controller

The MVC ReportDesigner uses WebApi services to process the report file and process the request from control.

  1. Right-Click on the project and select Add then click New Folder and provide the folder name.
  2. Right-Click on the newly created folder and select Add then click New Item.
  3. Select Web API Controller Class from the listed templates and name the controller as ReportingAPIController.cs. Provide controller name
  4. Click Add. Click Add

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

Configure Web API

The interface IReportDesignerController has the declaration of action methods that are defined in Web API Controller to retrieve data, save, edit and browse reports from the server. The IReportDesignerController has the following action methods declaration.

Methods Description
PostDesignerAction Action (HttpPost) method for posting the request for designer actions.
UploadReportAction Action (HttpPost) method for posted file actions.
UploadFile File upload method that is call while upload a file.
GetImage Action (HttpGet) method for getting resource for report images.
GetFilePath Get the path of specific file
GetFile Get the Specific file information
GetFiles Get the file list based on file type
PostReportAction Action (HttpPost) method for posting the request for report process.
GetResource Action (HttpGet) method for getting resource for report.
OnInitReportOptions Report initialization method that occurs when the report is about to be processed.
OnReportLoaded Report loaded method that occurs when the report and sub report start loading.

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.Net;
using System.Net.Http;
using System.Web.Http;
using Syncfusion.Reporting.Web;
using Syncfusion.Reporting.Web.ReportViewer;
using Syncfusion.Reporting.Web.ReportDesigner;

namespace ReportDesignerSample.Api
{
    public class ReportingAPIController : ApiController, IReportDesignerController
    {
        /// <summary>Get the Specific file information</summary>
        /// <param name="filename">Name of the file to download</param>
        /// <param name="isOverride">Boolean state to override the file</param>
        /// <returns>Returns the information about the file</returns>
        public FileModel GetFile(string filename, bool isOverride)
        {
            throw new NotImplementedException();
        }

        /// <summary>
        /// Get the path of specific file
        /// </summary>
        /// <param name="FileType">Name of the file to get the full path</param>
        /// <returns>Returns the full path of file</returns>
        public string GetFilePath(string fileName)
        {
            string targetFolder = System.Web.HttpContext.Current.Server.MapPath("~/");
            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 = System.Web.HttpContext.Current.Server.MapPath("~/") + "Cache\\" + ReportDesignerHelper.EJReportDesignerToken + "\\";
            return folderPath + fileName;
        }

        /// <summary>
        /// Get the file list based on file type
        /// </summary>
        /// <param name="FileType">Supported file extensions</param>
        /// <returns>Returns the list of information about the files</returns>
        public List<FileModel> GetFiles(FileType fileType)
        {
            throw new NotImplementedException();
        }

        /// <summary>
        /// Action (HttpGet) method for getting resource for report images.
        /// </summary>
        /// <param name="key">The unique key for request identification.</param>
        /// <param name="image">The name of requested image.</param>
        /// <returns>The object data.</returns>
        [System.Web.Http.ActionName("GetImage")]
        [AcceptVerbs("GET")]
        public object GetImage(string key, string image)
        {
            return ReportDesignerHelper.GetImage(key, image, this);
        }

        /// <summary>
        /// Action (HttpPost) method for posting the request for designer actions.
        /// </summary>
        /// <param name="jsonData">The JSON data posted for processing designer request.</param>
        /// <returns>The object data.</returns>
        public object PostDesignerAction(Dictionary<string, object> jsonData)
        {
            //Processes the designer request and returns the result.
            return ReportDesignerHelper.ProcessDesigner(jsonData, this, null);
        }

        /// <summary>
        /// File upload method that is call while upload a file.
        /// </summary>
        /// <param name="httpPostedFile">Details about uploaded files</param>
        public bool UploadFile(System.Web.HttpPostedFile httpPostedFile)
        {
            string targetFolder = System.Web.HttpContext.Current.Server.MapPath("~/");
            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);
            }

            httpPostedFile.SaveAs(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken + "\\" + fileName);
            return true;
        }


        /// <summary>
        /// Action (HttpPost) method for uploaded file actions.
        /// </summary>
        public void UploadReportAction()
        {
            //Processes the designer file upload request's.
            ReportDesignerHelper.ProcessDesigner(null, this, System.Web.HttpContext.Current.Request.Files[0]);
        }

        /// <summary>
        /// Action (HttpGet) method for getting resource to report.
        /// </summary>
        /// <param name="key">The unique key to get the required resource.</param>
        /// <param name="resourceType">The type of the requested resource.</param>
        /// <param name="isPrinting">If set to <see langword="true"/>, then the resource is generated for printing.</param>
        /// <returns>The object data.</returns>
        [System.Web.Http.ActionName("GetResource")]
        [AcceptVerbs("GET")]
        public object GetResource(string key, string resourceType, bool isPrinting)
        {
            //Returns the report resource for the requested key.
            return ReportHelper.GetResource(key, resourceType, isPrinting);
        }

        /// <summary>
        /// Report Initialization method that is triggered when report begin processed.
        /// </summary>
        /// <param name="reportOptions">The ReportViewer options.</param>
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            var resourcesPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Scripts");

            reportOption.ReportModel.ExportResources.Scripts = new List<string>
            {
                resourcesPath + @"\reports\common\ej.reporting.common.min.js",
                resourcesPath + @"\reports\common\ej.reporting.widgets.min.js",
                //Chart component script
                resourcesPath + @"\reports\data-visualization\ej.chart.min.js",
                //Gauge component scripts
                resourcesPath + @"\reports\data-visualization\ej.lineargauge.min.js",
                resourcesPath + @"\reports\data-visualization\ej.circulargauge.min.js",
                //Map component script
                resourcesPath + @"\reports\data-visualization\ej.map.min.js",
                //Report viewer Script
                resourcesPath + @"\reports\data-visualization\ej.chart.min.js",
                resourcesPath + @"\reports\ej.report-viewer.min.js"
            };

            reportOption.ReportModel.ExportResources.DependentScripts = new List<string>
            {
                resourcesPath + @"\jquery-1.7.1.min.js"
            };
        }

        /// <summary>
        /// Report loaded method that is triggered when report and sub report begins to be loaded.
        /// </summary>
        /// <param name="reportOptions">The ReportViewer options.</param>
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            //You can update report options here
        }

        /// <summary>
        /// Action (HttpPost) method for posting the request for report process.
        /// </summary>
        /// <param name="jsonData">The JSON data posted for processing report.</param>
        /// <returns>The object data.</returns>
        public object PostReportAction(Dictionary<string, object> jsonData)
        {
            //Processes the report request and returns the result.
            return ReportHelper.ProcessReport(jsonData, this as IReportController);
        }
    }
}

Add routing information

  1. Open the WebApiConfig.cs file from App_Start folder of your application.

  2. Modify the routeTemplate in Register event to include the {action} parameter in the URI as follows.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Http;
    
    namespace ReportDesignerSample
    {
        public static class WebApiConfig
        {
            public static void Register(HttpConfiguration config)
            {
                // Web API configuration and services
    
                // Web API routes
                config.MapHttpAttributeRoutes();
    
                config.Routes.MapHttpRoute(
                    name: "DefaultApi",
                    routeTemplate: "api/{controller}/{action}/{id}",
                    defaults: new { id = RouteParameter.Optional }
                );
            }
        }
    }

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 the cshtml page.

@(Html.SF().ReportDesigner("designer").ServiceUrl(Url.Content("~/api/ReportingAPI")))

Run the Application

On running the application, Report Designer will be rendered like below.

Report Designer