Live Chat Icon For mobile
Live Chat Icon

How to add the Report Designer Component to an ASP.NET Core Application

How to add the Report Designer Component to an ASP.NET Core Application

How to add the Report Designer Component to an ASP.NET Core Application

Report Designer is a web-based WYSIWYG reporting tool for creating and editing RDLC and RDL reports. Report Designer has a wide range of report items to transform data into meaningful information and quickly build business reports.

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

In this blog post, I am going to discuss:

 

Prerequisites

To get started with an ASP.NET Core application, ensure the following software is installed on your machine:

  • .NET Core SDK 3.1+
  • Visual Studio 2019+

How to create an ASP.NET Core app

Open Visual Studio and choose ASP.NET Core Web App. Provide the application name and then click Next.

Create ASP.NET Core Project
Create ASP.NET Core Project

 

Choose the ASP.NET Core version and click Create. Do not select Enable Docker.

Choose .NET Core Version
Choose .NET Core Version

 

You can refer to this FAQ if you need to use Bold Reports with ASP.NET Core on Linux or macOS.

Steps to install NuGet packages

  1. In the Tools menu, click NuGet Package Manager | Manage NuGet Packages for Solution. Alternatively, right-click the project/solution in the Solution Explorer tab and choose Manage NuGet Packages.
  2. By default, the NuGet.org package is selected in the package source dropdown. Select the package source, search for the package “BoldReports.AspNet.Core,” and then click Install. The following table provides details about the packages and their usage.

 

PackagePurpose
BoldReports.Net.CoreContains helper methods to create a Web API service to process the reports.
BoldReports.AspNet.CoreContains tag helpers to create client-side reporting control.

 

Choose the NuGet package
Choose the NuGet package

 

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

The following table provides details about the dependent packages and their purposes.

AssembliesPurpose
Syncfusion.Compression.Net.CoreSupport for exporting a report to PDF, Microsoft Word, and Microsoft Excel formats. It is a base library for the packages Syncfusion.Pdf.Net.Core, Syncfusion.DocIO.Net.Core, and Syncfusion.XlsIO.Net.Core.
Syncfusion.Pdf.Net.CoreSupport for exporting a report to a PDF.
Syncfusion.DocIO.Net.CoreSupport for exporting a report to a Word.
Syncfusion.XlsIO.Net.CoreA base library of the Syncfusion.XlsIO.Net.Core package.
Newtonsoft.JsonSerialize and deserialize the data or report for web Report Designer. It is a mandatory package for the web Report Designer, and the package version should be higher than 10.0.1 for .NET Core 2.0 and others should be higher than 9.0.1.
System.Data.SqlClientThis is an optional package for the Report Viewer and Designer. It should be referenced in the project when processing an RDL report and contains the SQL Server and SQL Azure data source. Also, the package version should be higher than 4.1.0.

Reference scripts and CSS

Directly reference the scripts and style sheets required to render the Report Designer from CDN links. Open the \Views\Shared\_Layout.cshtml page and reference the scripts and styles as shown in the following example code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ReportDesignerSample</title>
    <environment include="Development">
        <link href="https://cdn.boldreports.com/3.3.23/content/material/bold.reports.all.min.css" rel="stylesheet" />
        <link href="https://cdn.boldreports.com/3.3.23/content/material/bold.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" />
        
<!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
        <script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-base.min.js"></script>
        <script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-data.min.js"></script>
        <script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-pdf-export.min.js"></script>
        <script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-svg-base.min.js"></script>
        <script src="https://cdn.boldreports.com/3.3.23/scripts/data-visualization/ej2-lineargauge.min.js"></script>
        <script src="https://cdn.boldreports.com/3.3.23/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/3.3.23/scripts/data-visualization/ej2-maps.min.js"></script>
    </environment>
</head>

<body>
    <environment include="Development">
        <script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="https://cdn.boldreports.com/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.boldreports.com/3.3.23/scripts/common/bold.reports.common.min.js"></script>
        <script src="https://cdn.boldreports.com/3.3.23/scripts/common/bold.reports.widgets.min.js"></script>
        <script src="https://cdn.boldreports.com/3.3.23/scripts/common/bold.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.boldreports.com/3.3.23/scripts/data-visualization/ej.chart.min.js"></script>
        <script src="https://cdn.boldreports.com/3.3.23/scripts/bold.report-viewer.min.js" type="text/javascript"></script>
        <script src="https://cdn.boldreports.com/3.3.23/scripts/bold.report-designer.min.js" type="text/javascript"></script>
    </environment>

    <div style="height: 600px;width: 100%;">
        @RenderBody()
    </div>
    @RenderSection("Scripts", required: false)
</body>
</html>

Refer to the dependencies documentation to learn more about the Report Designer’s dependent scripts and style sheets links. To learn more about rendering a report with data visualization report items, refer to the how to render data visualization report items section.

Configure the script manager

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

<body> 
.... 
.... 
<! -- Bold Reporting ScriptManager --> 
<bold-script-manager></bold-script-manager> 
</body>

Enable 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 BoldReports.TagHelpers 
@addTagHelper *, BoldReports.AspNet.Core

Initialize the Report Designer

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

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

Configure the Web API

IReportDesignerController interface

The IReportDesignerController interface contains the required actions and helper methods declaration to process the designer file and data actions.

ReportDesignerHelper class

The class ReportDesignerHelper contains helper methods that process Post or Get requests from the Report Designer control and return the responses to the control. It has the following methods.

MethodsDescription
GetResourceReturns the report resource for the requested key.
ProcessReportProcesses the report request and returns the result.

ReportHelper class

The ReportHelper class contains helper methods that process Post or Get requests for report preview actions and return the response to the Report Designer.

Adding routing information

Routing is the process of directing an HTTP request to a controller. The functionality of this processing is implemented in System.Web.Routing.

Action parameter

An action parameter names the action method on the controller. It is used to map the method in the controller.

Set the Report Designer 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 web Report Designer page.

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

Run the application

To preview the Report Designer, build and run the application. You can create stunning professional reports from here.

When you run the application, the Report Designer will render like the following.

Report Designer
Report Designer

 

Create data

Click the data icon in the configuration panel to open the DATA configuration panel.

Create Data
Create Data

 

Click on the NEW DATA icon in the DATA panel.

Add new dataset
Add new dataset

 

The Data Fields dialog will open like in the following image.

 

Data Field dialog
Data Field dialog

Edit the name of the data set in the Name field, if required.

To create fields for the data set, click ADD.

Add a Data Field
Add a Data Field

 

Provide the Field Name in the first dropdown list.

In the second dropdown list, choose the data type for the field.

Add a Data Field Row
Add a Data Field Row

 

Similarly, you can create multiple fields for the data set.

Add Data Field Rows
Add Data Field Rows

 

Click OK . Now, the data set will be listed on the DATA pane like the following image.

Dataset list
Dataset list

 

Assign data

Drag a chart report item into the design area.

Assign data
Assign data

Switch to the DATA tab in the Properties panel.

Data tab
Data tab

Select and drag the numeric column (measure element) or the numeric expression column from the Measures section and drop it in the Y Value(s) section.

Select and drag the dimension element from the Dimensions section to measure against any of the selected numeric columns in the Y Value(s) section and drop it into the Column(s) section.

Add data to the Chart
Add data to the Chart

 

Now, the final design will look like the following image.

Chart in a Report
Chart in a Report

 

Conclusion

I hope this blog provided a basic knowledge about how to create a report using the Bold Reports Designer in an ASP.NET Core application. To explore further, go through our sample reports and Bold Reports documentation.

If you have any questions, please post them in the comments section. 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.

Bold Reports now offers 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 TwitterFacebookLinkedInPinterest, and Instagram pages for announcements about upcoming releases.

Leave a Reply

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.