9 Steps to Integrate Report Designer in an ASP.NET Web Forms App

This blog is a step-by-step guide on integrating the Report Designer control into an ASP.NET Web Forms application. The Report Designer is a web-based WYSIWYG reporting tool for creating and editing RDL and RDLC reports. It has many report items to help you transform data into meaningful information and quickly build business reports.

Let’s get started!

Prerequisites

Ensure your development environment includes the following:

• Microsoft Visual Studio 2010 or later.

• Internet Information Services (IIS) 7.0+.

• .NET Framework 4.5 or newer.

Steps

1. Create an ASP.NET Web Forms application

• Open Visual Studio and click Create a new project.

  

  Create a new project

• Choose ASP.NET Web Application (.NET Framework) and then click Next.

Create ASP.NET Web Application

• Change the project name, click Create, select Web Forms, select the Web API checkbox, and then click Create. After clicking the Create button, the default ASP.NET Web Forms application is created.

2. Install the NuGet packages

To get the server-side helpers to build the ASP.NET Web Forms Report Designer, you need to install the BoldReports.Web package. You also need to install the BoldReports.WebForms package to use the HTML helpers for Report Designer, and the BoldReports.JavaScript package to get the Report Designer control. The following are the steps to configure these NuGet packages for the ASP.NET Web Forms application.

Follow these steps to install the NuGet packages:

• In the Solution Explorer, right-click the project or solution and choose Manage NuGet Packages.

• In the browser tab, search for BoldReports.Web package and install it in your Web Forms application.

Install ASP.NET reporting NuGeT packages

• Similarly, install the BoldReports.WebForms and BoldReports.JavaScript packages in your application.

3. Add assembly reference

• Open the Web.config file from the root folder.

• Add the BoldReports.WebForms assembly reference to the system.web – pages – controls section.

• Add Bold as the tagPrefix. The tagPrefix attribute associates a prefix with the user control. This prefix will be included in the opening tag of the user control element, as shown in the following code sample.

<configuration>
....
....
<system.web>
....
<pages>
....
<controls>
<add assembly="BoldReports.WebForms" namespace="BoldReports.WebForms" tagPrefix="Bold" />
....
</controls>
</pages>
</system.web>
....
....
</configuration>

4. Reference the scripts and CSS

Note: You can use CDN links or local links to reference scripts and CSS.

• Open the Site.Master page and add the following code in the head tag.

<link href="Content/bold-reports/material/bold.reports.all.min.css" rel="stylesheet" />
<link href="Content/bold-reports/material/bold.reportdesigner.min.css" rel="stylesheet" />
<link href="Scripts/CodeMirror/lib/codemirror.css" rel="stylesheet" />
<link href="Scripts/CodeMirror/addon/hint/show-hint.css" rel="stylesheet" />
<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="Scripts/CodeMirror/lib/codemirror.js"></script>
<script src="Scripts/CodeMirror/addon/hint/show-hint.js"></script>
<script src="Scripts/CodeMirror/addon/hint/sql-hint.js"></script>
<script src="Scripts/CodeMirror/mode/sql/sql.js"></script>
<script src="Scripts/CodeMirror/mode/vb/vb.js"></script>
<!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="Scripts/bold-reports/common/ej2-base.min.js"></script>
<script src="Scripts/bold-reports/common/ej2-data.min.js"></script>
<script src="Scripts/bold-reports/common/ej2-pdf-export.min.js"></script>
<script src="Scripts/bold-reports/common/ej2-svg-base.min.js"></script>
<script src="Scripts/bold-reports/data-visualization/ej2-circulargauge.min.js"></script>
<script src="Scripts/bold-reports/data-visualization/ej2-lineargauge.min.js"></script>
<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="Scripts/bold-reports/data-visualization/ej2-maps.min.js"></script>
<script src="Scripts/bold-reports/common/bold.reports.common.min.js"></script>
<script src="Scripts/bold-reports/common/bold.reports.widgets.min.js"></script>
<script src="Scripts/bold-reports/common/bold.report-designer-widgets.min.js"></script>
<!--Chart component script added before the web report designer script to render chart report item in reports-->
<script src="Scripts/bold-reports/data-visualization/ej.chart.min.js"></script>
<!-- Report Viewer component script-->
<script src="Scripts/bold-reports/bold.report-viewer.min.js"></script>
<!-- Report Designer component script-->
<script src="Scripts/bold-reports/bold.report-designer.min.js"></script>

Since the jQuery script reference has already been added in the head tag, remove the jQuery script reference from the asp:ScriptManager to avoid conflicts.

5. Add the ASP.NET Web Forms Report Designer to the application

Open the Default.aspx page and add. This initializes the Report Designer control.

<div style="position: absolute; height: 690px; width: 1350px">
<Bold:ReportDesigner runat="server" ID="designer"></Bold:ReportDesigner>
</div>

6. Configure the ASP.NET Web Forms Report Designer Web API

Next, you need to create a web API controller to process and render the report in Report Designer. To create it, follow these steps:

1. Right-click the Controller folder and select Add.

2. Select New item from the context menu.

3. In the Add New Item dialog, select Web API Controller Class.

4. Name it ReportDesignerController.cs and then click Add.

5. In the ReportDesignerController class, implement the IReportDesignerController interface from the namespace Web.ReportDesigner.

Paste the following code into the BoldReportsAPIController.cs file, which uses the IReportDesignerController interface and the ReportDesignerHelper and ReportHelper classes too. These classes are explained in the following.

using BoldReports.Web.ReportDesigner;
using BoldReports.Web.ReportViewer;
using System;
using System.Collections.Generic;
using System.IO;
using System.Web;
using System.Web.Http;

namespace ReportDesignerWebFormASPDemo.Controllers
{
public class ReportDesignerController : ApiController, IReportDesignerController
{
/// <summary>
/// Get the path of specific file
/// </summary>
/// <param name="itemName">Name of the file to get the full path</param>
/// <param name="key">The unique key for report designer</param>
/// <returns>Returns the full path of file</returns>
[NonAction]
private string GetFilePath(string itemName, string key)
{
string dirPath = Path.Combine(HttpContext.Current.Server.MapPath("~/") + "Cache", key);

if (!Directory.Exists(dirPath))
{
Directory.CreateDirectory(dirPath);
}

return Path.Combine(dirPath, itemName);
}

/// <summary>
/// Action (HttpGet) method for getting resource of images in the report.
/// </summary>
/// <param name="key">The unique key for request identification.</param>
/// <param name="image">The name of requested image.</param>
/// <returns>Returns the image as HttpResponseMessage content.</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">A collection of keys and values to process the designer request.</param>
/// <returns>Json result for the current request.</returns>
public object PostDesignerAction(Dictionary<string, object> jsonData)
{
//Processes the designer request and returns the result.
return ReportDesignerHelper.ProcessDesigner(jsonData, this, null);
}

/// <summary>
/// Sets the resource into storage location.
/// </summary>
/// <param name="key">The unique key for request identification.</param>
/// <param name="itemId">The unique key to get the required resource.</param>
/// <param name="itemData">Contains the resource data.</param>
/// <param name="errorMessage">Returns the error message, if the write action is failed.</param>
/// <returns>Returns true, if resource is successfully written into storage location.</returns>
[NonAction]
public bool SetData(string key, string itemId, ItemInfo itemData, out string errorMessage)
{
errorMessage = string.Empty;

if (itemData.Data != null)
{
File.WriteAllBytes(this.GetFilePath(itemId, key), itemData.Data);
}
else if (itemData.PostedFile != null)
{
var fileName = itemId;
if (string.IsNullOrEmpty(itemId))
{
fileName = Path.GetFileName(itemData.PostedFile.FileName);
}
itemData.PostedFile.SaveAs(this.GetFilePath(fileName, key));
}
return true;
}

/// <summary>
/// Gets the resource from storage location.
/// </summary>
/// <param name="key">The unique key for request identification.</param>
/// <param name="itemId">The unique key to get the required resource.</param>
/// <returns>Returns the resource data and error message.</returns>
[NonAction]
public ResourceInfo GetData(string key, string itemId)
{
var resource = new ResourceInfo();
try
{
var filePath = this.GetFilePath(itemId, key);
if (itemId.Equals(Path.GetFileName(filePath), StringComparison.InvariantCultureIgnoreCase) && File.Exists(filePath))
{
resource.Data = File.ReadAllBytes(filePath);
}
else
{
resource.ErrorMessage = "File not found from the specified path";
}
}
catch (Exception ex)
{
resource.ErrorMessage = ex.Message;
}

return resource;
}

/// <summary>
/// Action (HttpPost) method for posted or 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>
/// Send a GET request and returns the requested resource for a report.
/// </summary>
/// <param name="key">The unique key to get the desired resource.</param>
/// <param name="resourcetype">The type of the requested resource.</param>
/// <param name="isPrint">If set to <see langword="true"/>, then the resource is generated for printing.</param>
/// <returns> Resource object for the given key</returns>
[System.Web.Http.ActionName("GetResource")]
[AcceptVerbs("GET")]
public object GetResource(string key, string resourcetype, bool isPrint)
{
//Returns the report resource for the requested key.
return ReportHelper.GetResource(key, resourcetype, isPrint);
}

/// <summary>
/// Report Initialization method that is triggered when report begin processed.
/// </summary>
/// <param name="reportOptions">The ReportViewer options.</param>
[NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
//You can update report options here
}

/// <summary>
/// Report loaded method that is triggered when report and sub report begins to be loaded.
/// </summary>
/// <param name="reportOptions">The ReportViewer options.</param>
[NonAction]
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);
}
}
}

What is the IReportDesignerController interface?

The IReportDesignerController interface contains the required actions and helper method declarations for processing the designer file and data actions. The following tables explain the actions and helper methods.

Methods and actions	Description
GetResource	Gets the images used in the report from the server at the time of preview in the Designer.
OnlnitReportOptions	Invoked from a ReportHelper when the report is about to be processed at the time of preview. Before the report loads, you can customize CSV delimiters as follows:reportOption.ReportModel.CsvOptions.FieldDelimiter = “,”;
OnReportLoaded	Invoked from a ReportHelper when the report and subreport start loading for report rendering.You can use this method to customize the report settings if needed at the time of previewing it in the Designer. For example, you can change the UserID for the report as follows:reportOption.ReportModel.UserProfile.UserID = “NewUserID”;
PostReportAction	Processes the report request on the server side and returns the processed reporting result to the client side.
PostDesignerAction	Saves the report to the client.
UploadReportAction	Receives the upload data from the Report Designer for adding images and opening reports on the client side.
SetData	Invokes from a ReportDesignerHelper to write the resource file information to the server side that we are receiving with the UploadReportAction.
GetData	Invokes a ReportDesignerHelper to read the resource file information that has been saved using SetData for further report-building processes.

7. Add routing information

Routing is the process of directing an HTTP request to a controller. The action parameter names the action method on the controller, which is used to map the method in the controller.

• Open the App_Start folder of your application.

• Open the WebApiConfig.cs file and modify the routeTemplate property in the Register method to include the action parameter in the URL as shown in the following sample.

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 }
);
}
}

8. Set the ASP.NET Web Forms Report Designer service URL

To browse, open, and save reports in the application, set the web API controller name to the ServiceUrl property of the Report Designer. In the Default.aspx page, within the ReportDesigner tag, add the ServiceUrl as shown:

Bold:ReportDesigner runat="server" ID="designer" ServiceUrl="/api/ReportDesigner"></Bold:ReportDesigner>

9. Run the ASP.NET Web Forms Report Designer application

Everything is set up. To preview the Report Designer, build and run the application. You can now create stunning professional reports from here!

Click Run or press F5 to launch the application. When you run the application, the Report Designer will be rendered as shown in the following image.

Report Designer in ASP.NET Web Forms Application

Conclusion

I hope this blog provided sufficient guidance for integrating the Report Designer component into an ASP.NET Web Forms application. To learn more about the Report Designer for ASP.NET Web Forms and its report items, look through our documentation. To experience the features live, check out our demo samples and solutions.

If you have any questions, please post them in the comments section below. You can also contact us through our contact page, or if you already have an account, you can log in to ask your question.

Bold Reports offers a log in without any credit card information required. We welcome you to start a free trial and experience Bold Reports for yourself. Try it and let us know what you think!

Catch us on Twitter, Facebook, and LinkedIn for info about upcoming releases.