Post
Ask Question

How To Display SSRS Report In ASP.NET MVC Web Application

Background

You might be aware that it’s easy to incorporate SSRS reports with ASP.NET web applications because there’s a server control “ReportViewer” available in ASP.NET. However, integrating the SSRS reports with the ASP.NET MVC web application is slightly more complicated. In this article, I will show how to integrate it easily in a few steps. This article is for developers having experience of working on ASP.NET MVC web applications and some knowledge of SSRS.

Introduction

In this article, I will show how to display an SSRS report in the ASP.NET MVC application. For this demo, I am using Visual Studio 2012, ASP.NET MVC 4 - Empty Template, an existing SSRS report deployed on the SSRS Server, and a NuGet package. I will be using a NuGet package called ReportViewer for MVC.

ReportViewer for MVC is a .NET project that makes it possible to use an ASP.NET ReportViewer control in an MVC web application. It provides a set of HTML Helpers and a simple ASP.NET Web Form for displaying the ReportViewer within an auto-resized iframe tag.

Getting Started

For integrating the SSRS report in the ASP.NET MVC web application, you need some information related to the SSRS server handy. You need the following details:

  • SSRS Server URL
  • SSRS folder path
  • Report name: In the demo the Report name is Performance. dl

I have created a demo ASP.NET MVC web application having 2 Views.

  • Home/Index View: displays the list of reports. By clicking on the report link, it will be directed to the report template for displaying the report.
  • Report/ReportTemplate View: displays the requested report.

Below is the structure of the ASPNETMVC_SSRS_Demo project. As you can see in the Solution Explorer, under the Controller folder, I have HomeController and ReportController, and under the View folder, I have the Home folder with Index View and Report folder with ReportTemplate View.

ReportController

The next step is Installing the reporting package - ReportViewer for MVC from nuGet. This is the most important step. You can install any NuGet package using any one of the following ways.

  • Using the Package Manager console
  • By right-clicking on the project in Solution Explorer and selecting the option Manage NuGet package for solution.

I am showing you the steps for installing the ReportViewerForMvc using the Package Manager console.

Using the Package Manager console

Click on Tools -> Nuget Package Manager.

Tools

The Package Manager console will open.

Package manager

Next, type the below command at the prompt PM> Install-package ReportViewerForMvc and press enter. After a few minutes, the package will be installed.

Install-package

This installation will add to the project: 2 assemblies (Microsoft.ReportViewer.WebForms & ReportViewerForMvc) to reference an ASPX page (ReportViewerWebForm.aspx) and HTTP handlers settings in the web. config file.

Note. The ASPX page added does not have a .cs file.

CS file

File

Nuget Package

You can now use this ASPX page and code everywhere in the controller (but I am using a slightly different path for code reusability and consistency).

Add a new folder ‘Reports” to the project, and then, add a new webform .aspx page ReportTemplate.aspx to the Reports folder.

Reports

Copy the contents (as shown in fig) from ReportViewerWebForm.aspx and replace the content of ReportTemplate.aspx with this.

Note. Please do not copy the @page directive, copy only the highlighted section.

Page Directive

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91"  
    Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>  
   
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>  
<!doctype html>  
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">  
   
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
            <asp:ScriptManager ID="scriptManagerReport" runat="server">  
            </asp:ScriptManager>  
   
            <rsweb:ReportViewer runat="server" ShowPrintButton="false" Width="99.9%" Height="100%" AsyncRendering="true" ZoomMode="Percent" KeepSessionAlive="true" id="rvSiteMapping" SizeToReportContent="false">  
            </rsweb:ReportViewer>                    
        </div>  
    </form>  
</body>  
</html>

The ReportTemplate.aspx will change to this.

ReportTemplate

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ReportTemplate.aspx.cs" Inherits="ASPNETMVC_SSRS_Demo.Reports.ReportTemplate" %>

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" 
    Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="scriptManagerReport" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="ReportViewerForMvc" Name="ReportViewerForMvc.Scripts.PostMessage.js" />
                </Scripts>
            </asp:ScriptManager>

            <rsweb:ReportViewer runat="server" ShowPrintButton="false" Width="99.9%" Height="100%" AsyncRendering="true" 
                ZoomMode="Percent" KeepSessionAlive="true" id="rvSiteMapping" SizeToReportContent="false">
            </rsweb:ReportViewer>
        </div>
    </form>
</body>
</html>

Next, delete the below script tag from the ReportTemplate.aspx page.

<Scripts>  
   <asp:ScriptReference Assembly="ReportViewerForMvc" Name="ReportViewerForMvc.Scripts.PostMessage.js" />  
</Scripts>

Add additional attributes to the ReportViewercontrol, as shown below.

<rsweb:ReportViewer
    id="rvSiteMapping"
    runat="server"
    ShowPrintButton="false"
    Width="99.9%"
    Height="100%"
    AsyncRendering="true"
    ZoomMode="Percent"
    KeepSessionAlive="true"
    SizeToReportContent="false">
</rsweb:ReportViewer>

Now, open ReportTemplate.aspx.cs file and add the following code to the Page_load event. You need the SSRS Server URL and SSRS report folder path.

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ASPNETMVC_SSRS_Demo.Reports
{
    public partial class ReportTemplate : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                try
                {
                    String reportFolder = System.Configuration.ConfigurationManager.AppSettings["SSRSReportsFolder"].ToString();

                    rvSiteMapping.Height = Unit.Pixel(Convert.ToInt32(Request["Height"]) - 58);
                    rvSiteMapping.ProcessingMode = Microsoft.Reporting.WebForms.ProcessingMode.Remote;

                    rvSiteMapping.ServerReport.ReportServerUrl = new Uri("SSRS URL"); // Add the Reporting Server URL
                    rvSiteMapping.ServerReport.ReportPath = String.Format("/{0}/{1}", reportFolder, Request["ReportName"].ToString());

                    rvSiteMapping.ServerReport.Refresh();
                }
                catch (Exception ex)
                {
                    // Handle exception
                }
            }
        }
    }
}

Code

Add the SSRSReportFolder path to the app settings on the web. config file.

<add key="SSRSReportsFolder" value="BIC_Reports"/>

Settings

Next, create an entity class ReportInfo.cs under the Models folder.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ASPNETMVC_SSRS_Demo.Models
{
    public class ReportInfo
    {
        public int ReportId { get; set; }
        public string ReportName { get; set; }
        public string ReportDescription { get; set; }
        public string ReportURL { get; set; }
        public int Width { get; set; }
        public int Height { get; set; }
        public string ReportSummary { get; set; }
    }
}

Models

Next, we will add code to the Controller and the View pages. There is no change to the HomeController.cs. Add the following code to the Home/Index View page.

@{
    ViewBag.Title = "Index";
}
<h2>Reports List</h2>
<a id="ReportUrl_Performance" href="@Url.Action("ReportTemplate", "Report", new { ReportName = "Performance", ReportDescription = "Performance Report", Width = 100, Height = 650 })">
    Performance Report
</a>

Index

Next, add ActionResult ReportTemplate to the Report Controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ASPNETMVC_SSRS_Demo.Models;
namespace ASPNETMVC_SSRS_Demo.Controllers
{
    public class ReportController : Controller
    {
        // GET: /Report/

        public ActionResult ReportTemplate(string ReportName, string ReportDescription, int Width, int Height)
        {
            var rptInfo = new ReportInfo
            {
                ReportName = ReportName,
                ReportDescription = ReportDescription,
                ReportURL = String.Format("../../Reports/ReportTemplate.aspx?ReportName={0}&Height={1}", ReportName, Height),
                Width = Width,
                Height = Height
            };
            return View(rptInfo);
        }
    }
}

ReportController

The final step is to open the ReportTemplate View page under Report and add the following code.

@model ASPNETMVC_SSRS_Demo.Models.ReportInfo
<H1>
    @Model.ReportDescription
</H1>
<iframe id="frmReport" src="@Model.ReportURL" frameborder="0" style="@String.Format("width:{0}%; height: {1}px;", Model.Width, Model.Height)" scrolling="no">
</iframe>

HTML

Press F6 to build the application and then press F5 to run the application. It will display the Home/index page.

Application

Click on the Performance Report link and there you go. The SSRS report is displayed.

Performance Report


Similar Articles