Barbra Weke's Blog
How to Add the Report Viewer to an ASP.NET MVC Application

How to Add the Report Viewer to an ASP.NET MVC Application

Barbra Weke's photo
Barbra Weke
·

7 min read

This blog explains how you can create an ASP.NET MVC reporting web application to display an SSRS RDL report using the Bold Reports ASP.NET MVC 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.

  • .NET Framework 4.5 or higher.

Steps

  1. Create an ASP.NET MVC app.

  2. Open Visual Studio 2022 and click Create a New Project.

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

  4. Provide a project name and then click Create.

  5. Select the MVC project template, select the Web API checkbox,and click Create. It creates a default ASP.NET MVC application.

    Create an ASP.NET MVC application | Reporting Tools

    Create an ASP.NET MVC application

  6. Install the NuGet packages.

  7. In the solution explorer tab, right-click the project or solution, and choose Manage NuGet Packages from the context menu.

  8. In the browse tab, search for the BoldReports.Web, BoldReports.Mvc, and BoldReports.JavaScript packages and install them in your MVC application. The purpose of each package is as follows.

Package

Purpose

BoldReports.Web

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

BoldReports.Mvc5

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

BoldReports.JavaScript

Contains reporting component scripts and style sheets.

Note: The dependent packages will be installed automatically on installing the BoldReports.Web package.

  1. Register the namespace.

Open the web.config file from the Views folder and register the BoldReports.Mvc namespace under the namespace tag as shown in the following code sample.

<configuration>
....
....
<system.web.webPages.razor>
....
....
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
....
....
<add namespace="BoldReports.Mvc"/>
</namespaces>
</pages>
</system.web.webPages.razor>
....
....
</configuration>
  1. Disable Unobtrusive mode

Open the web.config file from the root directory and set the UnobtrusiveJavaScriptEnabled to false as shown in the following code sample.

<configuration>
<appSettings>    
......    
......    
<add key="UnobtrusiveJavaScriptEnabled" value="false" />
</appSettings>
......
......
</configuration>

Note: You can skip this by referencing the ej.unobtrusive.min.js in the _Layout.cshtml file, as shown in the following image.

Layout.cshtml file | ASP.NET MVC Reporting Tools

Layout.cshtml file

  1. Reference scripts and CSS.

  2. While installing the BoldReports.JavaScript NuGet package, the scripts required to render the Report Viewer control will be added in the Scripts folder. The CSS files are added to the Content folder.

  3. Open the _Layout.cshtml page from the shared folder under Views and replace the following code in the head tag.

<!DOCTYPE html>
<html>
<head>    
<meta charset="utf-8" />    
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>    
@Styles.Render("~/Content/css")    
@Styles.Render("~/Content/bold-reports/material/bold.reports.all.min.css")    
@Scripts.Render("~/bundles/modernizr")
</head>
<body> 
<div style="min-height: 600px;width: 100%;">        
@RenderBody()    
</div>    
@Scripts.Render("~/bundles/jquery")   
@Scripts.Render("~/bundles/bootstrap")    
<!--Render the gauge item. Add these scripts only if your report contains the gauge report item.-->    
@Scripts.Render("~/Scripts/bold-reports/common/ej2-base.min.js")
@Scripts.Render("~/Scripts/bold-reports/common/ej2-data.min.js")    
@Scripts.Render("~/Scripts/bold-reports/common/ej2-pdf-export.min.js")    
@Scripts.Render("~/Scripts/bold-reports/common/ej2-svg-base.min.js")    
@Scripts.Render("~/Scripts/bold-reports/data-visualization/ej2-circulargauge.min.js")    
@Scripts.Render("~/Scripts/bold-reports/data-visualization/ej2-lineargauge.min.js")    
<!--Renders the map item. Add this script only if your report contains the map report item.-->
@Scripts.Render("~/Scripts/bold-reports/data-visualization/ej2-maps.min.js")    
@Scripts.Render("~/Scripts/bold-reports/common/bold.reports.common.min.js")    
@Scripts.Render("~/Scripts/bold-reports/common/bold.reports.widgets.min.js")   
<!--Renders the chart item. Add this script only if your report contains the chart report item.-->    
@Scripts.Render("~/Scripts/bold-reports/data-visualization/ej.chart.min.js")    
<!-- Report Viewer component script-->    
@Scripts.Render("~/Scripts/bold-reports/bold.report-viewer.min.js")    
@RenderSection("scripts", required: false)
</body>
</html>

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

Name

Details

 bold.reports.all.min.css 

 Includes the UI theme for the JavaScript reporting control.

 jquery.min.js 

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

 ej.chart.min.js

 Renders the chart item. Add this script only if your report contains the chart report item. 

ej2-base.min.js

Render gauge items. Add these scripts only if your report contains a 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 item. Add this script only if your report contains the map report item.

bold.reports.common.min.js

  Required to render the Bold Report Viewer component.   

bold.reports.widgets.min.js

bold.report-viewer.min.js

  1. Configure the script manager.

In the _Layout.cshtml page, use the reporting script manager in the body element that places the Report Viewer control initialization script on the webpage.

Note: To initialize the script properly, the script manager should be included at the end of the body element, as shown in the following code sample.

<body>
....
....
<!-- Bold Reports script manager -->
@Html.Bold().ScriptManager()
</body>
  1. Initialize the Report Viewer component.

Open the index.cshtml page from the home folder under views and replace it with the following code to initialize the Report Viewer control.

@(Html.Bold().ReportViewer("viewer"))

  1. Add a sample report.

  2. Create a folder named Resources in the root folder of your application. This is where you will keep the RDL reports.

  3. Add an already created report. For example, sales-order-details.rdl.

  4. Configure the Web API.

The ASP.NET MVC Report Viewer requires a Web API service to render the Report Viewer control.

  1. Right-click the controller folder, select Add, and then select New Item from the context menu.

  2. In the Add New Item dialog, select Web API Controller class, name it ReportViewerController.cs, then click Add.

  3. In the ReportViewerController.cs file, add the BoldReports.Web.ReportViewer namespace.

  4. You need to inherit the IReportController interface and then 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 initializing the report options before 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.
    }
}

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.

Methods

Description

PostReportAction

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

OnInitReportOptions

This method is 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 helper 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.

Methods

Description

ProcessReport

Processes the report request and returns the result.

GetResource

Returns the report resource to the requested key.

  1. 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 used to map the method in the controller.

  1. From the App_Start folder, open the WebApi.Config.cs file of your application.

  2. Modify the route template in the register method to include the “action” parameter in the URL as shown in the following code 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 }
        );
    }
}
  1. 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.

  1. Open the index.cshtml page and set the ReportServiceUrl and ReportPath properties. Replace the following code on your Report Viewer page.
@(Html.Bold().ReportViewer("viewer")
    .ReportServiceUrl("/api/ReportViewer")
    .ReportPath("~/Resources/sales-order-detail.rdl")
)

  1. Build and run the application to view the report in the Report Viewer as displayed in the following image.

    View the report in the Report Viewer | ASP.NET MVC Reporting Tools

    View the report in the Report Viewer

Conclusion

I hope this blog has provided knowledge on how you can add the Report Viewer to an ASP.NET MVC application. Look at Bold Reports demo samples and 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!

Bold Reportspreview report rdlssrs report viewerreport viewer#reporting