Open in app

Sign in

Write

Sign in

How to Add Report Viewer Component to an ASP.NET Web Forms Application | Reporting Tools

How to Add a Report Viewer Component to an ASP.NET Web Forms Application

ARUL RAJ
Bold Reports

--

This blog will explain how to create an ASP.NET Web Forms application to display an SSRS RDL report using the Bold Reports ASP.NET Web Forms Report Viewer.

The Report Viewer is a reporting control that empowers web and desktop applications with the ability to view SSRS RDL and RDLC reports and export them.

Prerequisites

  • Microsoft Visual Studio 2010 or later
  • Internet Information Services (IIS) 7.0+
  • .NET Framework 4.5 or higher

Steps

  1. Create an ASP.NET Web Forms application
  • Open Visual Studio 2022 and click Create New Project.
Create a new project. | ASP.NET Web Forms Reporting Tools
Create a New Project
  • Choose ASP.NET Web Application (.NET Framework) and click Next.
Create an ASP.NET web application | Reporting Tools
Create an ASP.NET Web Application
  • Change the project name and click Create.
  • Select Web Forms, check the Web API checkbox and click Create. The default ASP.NET Web Forms application is created.
Create a Web Forms app. | ASP.NET Web Forms Reporting Tools
Create a Web Forms App

2. Install the NuGet packages

  • In the solution explorer tab, right-click the project or solution and choose Manage NuGet packages.
  • In the browse tab, search for BoldReports.Web, BoldReports.WebForms and BoldReports.JavaScript NuGet packages and install them in your Web Forms application. The following provides details about the packages and their purposes.

BoldReports.Web: Contains interfaces and methods to create Web API service to process the reports.

BoldReports.WebForms: Contains HTML tag helpers to create client-side Report Viewer control.

BoldReports.JavaScript: Contains Report Viewer scripts and style sheets.

The dependent packages will be installed automatically when installing the BoldReports.Web package.

3. Add assembly reference

  • Open the Web.Config file from the root folder.
  • Add the BoldReports.WebForms assembly reference to the system.web pages control 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.
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bold Reports - Report Viewer</title><asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder><webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="Content/bold-reports/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><!--Render the gauge item. Add these scripts 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><!--Renders 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><!--Renders the chart item. Add this script only if your report contains the chart report item.-->
<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>

The purpose of each script and CSS file is explained in the following,

bold.reports.all.min.css: Includes the UI theme for the JavaScript reporting control.

Jquery 3.5.1: A common jQuery script used to render the Bold Reports JavaScript reporting widgets in the Report Viewer control.

ej.chart.min.js: Renders the report chart item. Add this script only if your report contains the chart report item.

ej2-base.min.js: Render the gauge report item. Add these scripts only if your report contains the gauge report item.

ej2-data.min.js, ej2-pdf-export.min.js, ej2-svg-base.min.js, ej2-lineargauge.min.js, ej2-circulargauge.min.js, ej2-maps.min.js: Renders the map report item. Add this script only if your report contains the map report item.

ej.chart.min.js: Renders the chart report item. Add this script only if your report contains the chart report item.

bold.reports.common.min.js: It is required to render the Bold Report Viewer component.

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 Report Viewer

  • Open the Default.aspx page and replace the following code in it.
  • Initialize the Report Viewer control in the asp tag, as shown in the following code sample.
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div style="height: 650px;width: 950px;min-height:404px;">
        <Bold:ReportViewer runat="server" ID="viewer">
        </Bold:ReportViewer>
    </div>
</asp:Content>

6. Add an already-created report

  • Create a folder named “Resources” in the root folder of your application. This is where you will keep the RDL reports.
  • Add an already created report. For example, sales-order-details.rdl.

7. Configure the Web API

  • The ASP.NET Web Forms Report Viewer requires a Web API service to process and render the report:
  • Right-click the controller folder, select Add, and then select New Item from the context menu.
  • In the Add New Item dialog, select Web API Controller class and name it ReportViewerController.cs. Then, click Add.
  • In the ReportViewerController.cs file, add the BoldReports.Web.ReportViewer namespace.
  • Inherit the IReportController interface, and then implement the methods. Replace the following code in the newly created Web API controller.
public class ReportViewerController : ApiController, IReportController
{
    // Post action for processing the RDL/RDLC report
    public object PostReportAction(Dictionary<string, object> jsonResult)
    {
        return ReportHelper.ProcessReport(jsonResult, this);
    }    // Get action for getting resources from the report.
    [System.Web.Http.ActionName("GetResource")]
    [AcceptVerbs("GET")]
    public object GetResource(string key, string resourcetype, bool isPrint)
    {
        return ReportHelper.GetResource(key, resourcetype, isPrint);
    }    // Method that will be called when initializing the report options before start processing the report.
    [NonAction]
    public void OnInitReportOptions(ReportViewerOptions reportOption)
    {
        // You can update report options here.
    }    // Method that will be called when report is loaded.
    [NonAction]
    public void OnReportLoaded(ReportViewerOptions reportOption)
    {
        // You can update report options here.
    }
}

IReportController has a declaration of action methods that are defined in the Web API Controller for processing RDL, RDLC, and SSRS reports and for handling requests from the Report Viewer control. The IReportController has the following action methods declaration.

PostReportAction: Action (HttpPost) method for posting the requests from client to server for processing the report.

OnInitReportOptions: This method invoked when the report is about to be processed.

OnReportLoaded: The report loaded method occurs when the report and subreport started to load.

GetResource: Action (HttpGet) method is used to get image resources for the report.

ReportHelper contains methods that help to process a Post or Get request from the Report Viewer control and return the response to the Report Viewer control. It has the following methods.

GetResource: Returns the report resource to the requested key.

ProcessReport: Processes the report request and returns the result.

8. Add 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. The action parameter names the action method on the controller, which is used to map the method in the controller:

  • Open the WebApi.Config.cs file from the App_Start folder of your application.
  • Modify the route template in the register method to include the action parameter in the URL, as shown in the following,
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 }
        );
    }
}

9. Set the report service URL and report path

The ReportPath property sets the path of the RDL report file while the ReportServerUrl property specifies the report Web API service URL:

  • Open the Default.aspx page and set the ReportServiceUrl and ReportPath properties. You can replace the following code on your Default.aspx page.
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <Bold:ReportViewer runat="server" ID="viewer" 
	ReportPath="~/Resources/sales-order-detail.rdl"
           	ReportServiceUrl="/api/ReportViewer">
        </Bold:ReportViewer>
    </div>
</asp:Content>
  • Build and run the application to view the report in the Report Viewer as displayed in the following image.
Report in an ASP.NET Web Forms Report Viewer. | ASP.NET Web Forms Reporting Tools
The Report in an ASP.NET Web Forms Report Viewer

Conclusion

Now that I have shown you how to add a Report Viewer component in an ASP.NET Web Forms application using Bold Reports, I hope you are comfortable with how to go about it.

Look at Bold Reports demo samples and the documentation site to learn more. 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 ask your support question.

Bold Reports offers a 15-day free trial that does not require a credit card. We invite you to sign up and experience Bold Reports for yourself. Give it a try and let us know what you think!

--

--

ARUL RAJ
Bold Reports

Written by ARUL RAJ

9 Followers
Writer for

Arulraj, Sr. Product Manager at Syncfusion, is passionate about technology and dedicated to helping individuals implement best coding practices.