Display SSRS RDL report in Bold Reports^® ASP.NET Web Forms Report Viewer Classic

This section explains you the steps required to create your first ASP.NET Web Forms reporting application to display an already created SSRS RDL report in Bold Reports^® ASP.NET Web Forms Report Viewer Classic without using a Report Server.

To get start quickly with Report Viewer Classic, you can check on this video:

Create an ASP.NET Web Forms 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 dropdown.

3. Select ASP.NET Web Application (.NET Framework), change the application name, and then click OK.

4. Choose Web Forms, Web API and then click OK.

Configure Report Viewer Classic in an application

1. Right-click the project or solution on the Solution Explorer tab and choose Manage NuGet Packages. Alternatively, select Tools > NuGet Package Manager > Manage NuGet Packages for Solution menu command.

2. Search for BoldReports.Web and BoldReports.WebForms NuGet packages and install them in your Web Forms application. The following table provides details about the packages and their usage.

   Package	Purpose
   BoldReports.Web	Creates Web API service to process the reports.
   BoldReports.WebForms	Contains tag helpers to create client-side Report Viewer control.
   BoldReports.JavaScript	Contains Report Viewer scripts and style sheets.

3. Open the Web.config file, and add the BoldReports.WebForms assembly reference to the <system.web.pages.controls> element with the Bold tag prefix as in the following code.

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

Refer scripts and CSS

Install the BoldReports.JavaScript and BoldReports.Mvc5 nuget packages into your application.

• BoldReports.JavaScript - contains Report Viewer scripts and style sheets.
• BoldReports.Mvc5 - contains HTML Helpers for Report Viewer Classic.

Successful installation adds the scripts and styles to the Scripts and Content folders in your application.

1. The following scripts and style sheets are mandatorily required to use the Report Viewer Classic.

   • bold.reports.all.min.css
   • jquery.min.js
   • ej2-base.min.js, ej2-data.min.js, ej2-pdf-export.min.js, ej2-svg-base.min.js, ej2-lineargauge.min.js, and ej2-circulargauge.min.js - Renders the gauge item. Add these scripts only if your report contains the gauge report item.
   • ej2-maps.min.js - Renders the map item. Add this script only if your report contains the map report item.
   • bold.reports.common.min.js
   • bold.reports.widgets.min.js
   • ej.chart.min.js - Renders the chart item. Add this script only if your report contains the chart report item.
   • bold.report-viewer.min.js

2. Open the Default.aspx page.

3. Add the listed references in the same order given in the above list. You can replace the following code on the Default.aspx page.

   <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
       <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 Classic component script-->
       <script src="Scripts/bold-reports/bold.report-viewer.min.js"></script>
   </asp:Content>

Initialize Report Viewer Classic

Initialize the Report Viewer as shown in the following code sample on the Default.aspx page.

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

Configure Web API

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

ReportHelper

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

Add Web API Controller

1. Right-click the Controller folder in your project and select Add > New Item from the context menu.

2. Select Web API Controller Class from the listed templates and name it as ReportViewerController.cs.

3. Click Add.

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

4. Open the ReportViewerController and add the following using statement.

   using BoldReports.Web.ReportViewer;

5. Inherit the IReportController interface, and implement its 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 initialize 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 reported is loaded
       [NonAction]
       public void OnReportLoaded(ReportViewerOptions reportOption)
       {
           // You can update report options here
       }
   }

Add routing information

To configure routing to include an action name in the URI, open the WebApiConfig.cs file and change the routeTemplate in the Register method as follows,

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 report path and service URL

To render the reports available in the application, set the ReportPath and ReportServiceUrl properties of the Report Viewer Classic. You can replace the following code on your Report Viewer Classic page.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <link href="Content/bold-reports/material/bold.reports.all.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></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/bold.report-viewer.min.js"></script>
    <div style="height: 650px;width: 950px;min-height:404px;">
        <Bold:ReportViewer runat="server" ID="viewer" ReportPath="~/Resources/sales-order-detail.rdl"
            ReportServiceUrl="/api/ReportViewer">
        </Bold:ReportViewer>
    </div>
</asp:Content>

The report path property is set for the RDL report that is added to the project Resources folder.