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
- How to create an ASP.NET Core app
- Steps to install the NuGet packages
- Reference scripts and CSS
- Configure script manager
- Enable tag helper
- Initialize the Report Designer
- Configure the Web API
- Add routing information
- Action parameter
- Set the Report Designer service URL
- Run the application
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.
Choose the ASP.NET Core version and click Create. Do not select Enable Docker.
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
- 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.
- 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.
| Package | Purpose |
| BoldReports.Net.Core | Contains helper methods to create a Web API service to process the reports. |
| BoldReports.AspNet.Core | Contains tag helpers to create client-side reporting control. |
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.
| Assemblies | Purpose |
| Syncfusion.Compression.Net.Core | Support 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.Core | Support for exporting a report to a PDF. |
| Syncfusion.DocIO.Net.Core | Support for exporting a report to a Word. |
| Syncfusion.XlsIO.Net.Core | A base library of the Syncfusion.XlsIO.Net.Core package. |
| Newtonsoft.Json | Serialize 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.SqlClient | This 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.
| Methods | Description |
| GetResource | Returns the report resource for the requested key. |
| ProcessReport | Processes 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.
Create data
Click the data icon in the configuration panel to open the DATA configuration panel.
Click on the NEW DATA icon in the DATA panel.
The Data Fields dialog will open like in the following image.
Edit the name of the data set in the Name field, if required.
To create fields for the data set, click ADD.
Provide the Field Name in the first dropdown list.
In the second dropdown list, choose the data type for the field.
Similarly, you can create multiple fields for the data set.
Click OK . Now, the data set will be listed on the DATA pane like the following image.
Assign data
Drag a chart report item into the design area.
Switch to the DATA tab in the Properties panel.
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.
Now, the final design will look like the following image.
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 Twitter, Facebook, LinkedIn, Pinterest, and Instagram pages for announcements about upcoming releases.
