Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

How to Display SSRS Report in ASP.NET MVC Web Application

0.00/5 (No votes)
30 Aug 2016 1  
In this article I will show how to display an SSRS report in 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 SSRS Server and a nuGet package.

Introduction

In this article I will show how to display an SSRS report in 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 SSRS Server and a nuGet package. This article is developers having experience working on ASP.NET MVC web application and some knowledge on SSRS.

Background

As most of you might be aware that it’s easy to incorporate SSRS reports with ASP.NET web application, as there’s a server control “ReportViewer” available in ASP.NET, but integrating SSRS reports with ASP.NET MVC web application it’s slightly complicated. In this article I will show how to integrate it easily in few steps. I will be using a nuGet package called ReportViewer for MVC. ReportViewerForMVc

ReportViewer for MVC is a .NET project that makes possible to use an ASP.NET ReportViewer control into 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. References: For more information on the “ReportViewer for MVC” project and the actual source code, please visit wiki page on Codeplex

Getting Started

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

  • SSRS Server URL
  • SSRS folder path
  • Report name – In demo the Report name is Performance.rdl

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 Reports 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 Controller folder I have HomeComtroller and ReportController, and under the View folder I have the Home folder with Index view and Report folder with ReportTemplate view.

<img height="290px" src="1121443/Capture1.PNG" width="640px" />

Next steps 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 way.

  1. Using the package manager console

    OR

  2. By right clicking on the project in Solution explorer and selecting the option Manage NuGet package for solution I am showing you steps for installing the ReportViewerForMvc using the package manager console.

Using package manager console:

Click on Tools -> Nuget Package Manager.

<img height="270px" src="1121443/Capture2.PNG" width="640px" />

The package manager console will open

<img height="348px" src="1121443/Capture3.PNG" width="640px" />

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

<img height="321px" src="1121443/Capture4.PNG" width="640px" />

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

Note: the aspx page added does not have a .cs file,

<img height="209px" src="1121443/Capture5.PNG" width="640px" />

<img height="209px" src="1121443/Capture6.PNG" width="640px" />

<img height="275px" src="1121443/Capture7.PNG" width="640px" />

You can now use this .aspx page and code everything in 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

<img height="209px" src="1121443/Capture8.PNG" width="640px" />

Copy the contents (as shown in fig) from ReportViewerWebForm.aspx and replace the content of ReportTemplate.aspx with this. Note: Please do not copy @page directive, copy only the highlighted section.

<img height="239px" src="1121443/Capture9.PNG" width="640px" />

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

<img height="238px" src="1121443/Capture10.PNG" width="640px" />

<%@ 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 scripts tag from ReportTemplate.aspx page

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

Add additional attributes to the ReportViewercontrol as 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 following code to the Page_load event, you need to 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)
                {
                    
                }
            }
        }
    }
}

<img height="255px" src="1121443/Capture11.png" width="640px" />

add the SSRSReportFolder path to the app settings in the web.config file.

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

<img height="227px" src="1121443/Capture12.PNG" width="640px" />

Next create an entity class ReportInfo.cs under 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; }
    }
 
}

<img height="177px" src="1121443/Capture13.PNG" width="640px" />

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 Home/Index view page.

@{
    ViewBag.Title = "Index";
}
 
<h2>Reports List</h2>

<img height="206px" src="1121443/Capture14.PNG" width="640px" />

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

<img height="251px" src="1121443/Capture15.PNG" width="640px" />

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>

<img height="197px" src="1121443/Capture16.PNG" width="640px" />

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

<img height="221px" src="1121443/Capture17.PNG" width="640px" />

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

<img height="307px" src="1121443/Capture18.PNG" width="640px" />

Hope you like this article and please add comments and share your feedback.

This article was posted on my web site Hussain Patel

References:

For more information see the wiki page on codeplex Codeplex

Also you can read more about ReportViewer for Mvc ReportViewerForMVc

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here