Viewing SSRS Reports in an ASP.net MVC Site

Is there a way to put a SQL Server Reporting Services report viewer control on an ASP.net MVC view? If not...what is the best way to accomplish this?


Solution 1:

No, not in a MVC view. But you can have a web forms pages which have server controls in them mixed in with your MVC site.

Hmm, just googled "mix asp.net mvc and web forms" to find some examples, and google questioned whether I'm human or not :)

Anyway, here's a link - http://www.packtpub.com/article/mixing-asp.net-webforms-and-asp.net-mvc - there's a few out there. I've also done this in a MVC site for the same reason - the report control.

Solution 2:

No, the ReportViewer control won't work if you place it in an MVC view, since it requires ViewState. You'll have to create an old-school web form and put the ReportViewer there instead.

A solution I used in a project I worked on was to create a custom route handler, so I could still make use of URL routing. The route handler would take parameters like the report name from the RouteData collection, create an instance of my web form, and pass the parameters to it via public properties. The web form would read these in Page_Load and configure the ReportViewer control.

// Configure a route in Global.asax.cs that is handled by a ReportRouteHandler
routes.Add("ReportRoute", new Route("Reports/{reportName}",
                                    new ReportRouteHandler());

public class ReportRouteHandler : IRouteHandler {
    public IHttpHandler GetHttpHandler(RequestContext requestContext) {
        var reportName = requestContext.RouteData.Values["reportName"] as string;

        var webform = BuildManager
            .CreateInstanceFromVirtualPath("~/Path/To/ReportViewerWebForm.aspx",
                                           typeof(Page)) as ReportViewerWebForm;
        webform.ReportToShow = reportName;
        return webform;
    }
}

This code is just a starting point if you decide to use this approach, of course. The one I created also did some user authentication and parameter validation before returning.

Update: Looks like if you're using ASP.NET 4.0, most of this can be done automatically!

Solution 3:

Implementing a SSRS ReportViewer control in MVC consists of two problems:

  1. Minimally, you'll need to add the right dependencies, handlers, and configuration for the ReportViewer control (regardless of project type).
  2. The trickier hurdle is in Mixing WebForms and MVC. We need a way of rendering and routing incoming requests so they will be handled by WebForms pages, controls, and actions.

Problem 1 - Configuring the ReportViewer

If you've done a lot with setting up ReportViewer controls in the past, this might be old hat and you can skip to section 2.

  1. Add package/reference - The ReportViewer control lives in the Microsoft.ReportViewer.WebForms.dll. You can include in your project by adding the Microsoft.ReportViewer.WebForms package from nuget:

    Nuget - Microsoft.ReportViewer.WebForms

  2. Web.config Handlers - Per this article on Web.config Settings for ReportViewer, and this SO question you'll need to add the following to your web.config:

    <system.web>
      <httpHandlers>
        <add verb="*" path="Reserved.ReportViewerWebControl.axd" 
             type="Microsoft.Reporting.WebForms.HttpHandler,
                   Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral,
                   PublicKeyToken=b03f5f7f11d50a3a" />
      </httpHandlers>
    </system.web>
    <system.webServer>
      <handlers>
        <remove name="ReportViewerWebControlHandler" />
        <add name="ReportViewerWebControlHandler" preCondition="integratedMode"
             verb="*" path="Reserved.ReportViewerWebControl.axd" 
             type="Microsoft.Reporting.WebForms.HttpHandler, 
                   Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral,
                   PublicKeyToken=b03f5f7f11d50a3a"/>
      </handlers>
    </system.webServer>
    

    Per this question on duplicate keys, it's typically easiest to remove and then re-add webserver configs

  3. Fix broken Image Requests - there's a known defect in ReportViewer with blank.gif images not loading so you can add the following fix to your global.asax.cs:

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        HttpRequest req = HttpContext.Current.Request;
        if (req.Url.PathAndQuery.StartsWith("/Reserved.ReportViewerWebControl.axd") &&
            !req.Url.ToString().ToLower().Contains("iteration") &&
            !String.IsNullOrEmpty(req.QueryString["ResourceStreamID"]) &&
            req.QueryString["ResourceStreamID"].ToLower().Equals("blank.gif"))
        {
            Context.RewritePath(String.Concat(req.Url.PathAndQuery, "&IterationId=0"));
        }
    }
    
  4. IgnoreRoute .axd - If it's not already there, make sure to allow ScriptResources in your RouteConfig.cs:

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    
  5. Add ReportViewerPage.aspx - Add a WebForm page that will hold an instance of the ReportViewer control. In order to work, that control needs to find a ScriptManager control and be placed inside of a <form runat="server" >.
    So your new .aspx page should look something like this:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ReportViewerPage.aspx.cs" Inherits="MVCAppWithReportViewer.ReportViewerPage" %>
    <%@ Register TagPrefix="rsweb" Namespace="Microsoft.Reporting.WebForms" Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Report Viewer</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <rsweb:ReportViewer ID="ReportViewer" runat="server" 
                                Height="100%" Width="100%" 
                                SizeToReportContent="True" ProcessingMode="Remote" />
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
        </form>
    </body>
    </html>
    
  6. Wire up ReportViewer on Page_Load - Assuming, you already have an SSRS report fully deployed to a reporting server which is available at an address like this:

    http://ReportServerName/Reports/Pages/Report.aspx?ItemPath=%2fCompany%2fClientReport

    Then your code-behind in your new WebForm page should look like this:

    public partial class ReportViewerPage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                // confirm report properties (also setable in attributes)
                ReportViewer.ProcessingMode = ProcessingMode.Remote;
    
                // config variables
                var reportServer = "ReportServerName";
                var reportPath = "/Company/";
                var reportName = "ClientReport";    
    
                // report setup
                var serverReport = new ServerReport();
                serverReport = ReportViewer.ServerReport;
                serverReport.ReportServerUrl = new Uri($@"http://{reportServer}/ReportServer");
                serverReport.ReportPath = $@"{reportPath}{reportName}";
    
                // report input
                var parameters = new List<ReportParameter>();
                parameters.Add(new ReportParameter("User_uid", "1"));
                serverReport.SetParameters(parameters);
    
                // run report
                serverReport.Refresh();
            }
        }
    }
    
  7. View Report - At this point you should be able to view your report on it's own by selecting View in Browser or Ctrl + Shift + W

    View in Browser

Problem 2 - Mixing WebForms and MVC

First, let's quickly dissect the routing differences between how these controls are loaded and subsequently updated

  • MVC routes will look something like this {controller}/{action}/{id} where the routing engine will automatically find a Controller and Action with the specified name and incoming requests will be handled by that method. On any page request, whether from page load, form submit, button clicks, anchor navigation, or ajax calls, the exact method being executed is always specified in the url {action}.

  • WebForms routes to code by finding the physical .aspx page address, and then uses ViewState & PostData to wire up and fire events on that page / control.

    Here's an illustration of different routing formats in WebForms. And here's a simple button click event which will submit a post back to the parent page and raise the appropriate events within the page based on the event data submitted:

    ASP.NET WebForms - Postback

This is a pretty big constraint on our solutions available. Nothing is special about the ReportViewer control. It's just a sophisticated set of UserControl classes that respond to click and other input events by posting back the current address along with the ViewState and Event info. So whatever assumptions were baked into the routing and navigation of the ReportViewer will need to persist into our MVC wrapper.

  1. Option 1 - Add Route for .aspx page

    As of MVC 4.0+, you can use URL Routing with WebForms. This mixes well with MVC by adding a MapPageRoute (note the Page part) to map a route to a physical file. So add the following to your RouteConfig.cs:

    routes.MapPageRoute(
        routeName: "ReportViewer",
        routeUrl: "ReportViewer/{reportName}",
        physicalFile: "~/ReportViewerPage.aspx"
    );
    

    The report will run when you navigate to the address ~/Reports/reportName. This will probably be invoked from inside a controller action, perhaps with some user entered parameters or web.config connection strings. There are lots of ways to manage state in ASP.NET and Pass Values to ASP.NET Web Forms Pages. One option would be to stash the info in the Session and Redirect like this in your controller:

    HttpContext.Session[reportSetup.ReportName] = new ReportSetup() {ReportName = "ClientReport"}; //reportSetup;}
    return RedirectToRoute("ReportViewer", new { reportName = reportSetup.ReportName});
    

    Then, inside the .aspx page, and you can grab the reportName from the RouteData Values and any setup params from the session:

    // get report name from route
    string reportName = Page.RouteData.Values["reportName"].ToString();
    
    // get model from session and clear
    ReportSetup setup = (ReportSetup)HttpContext.Current.Session[reportName];
    

    Pros:

    • Most of the routing seems to work by default, and AJAX controls work fine, so you can set AyncRendering=True

    Cons:

    • It's hard to use an ASP Web Form with a Razor MVC Layout so rendering will take users out of the flow of the rest of the application.
    • Also, report values have to be exposed as part of the URL or passed indirectly via session (as opposed to hydrating directly onto the object).
  2. Option 2 - Nest .ascx inside PartialView on your Page

    Adapted from How can I use a ReportViewer control with Razor?, you can consume .ascx controls in PartialViews as long as they inherit from System.Web.Mvc.ViewUserControl.

    Create a new Web Forms User Control called ReportViewerControl.ascx that looks like this:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ReportViewerControl.ascx.cs" Inherits="MVCAppWithReportViewer.ReportViewerControl" %>
    <%@ Register TagPrefix="rsweb" Namespace="Microsoft.Reporting.WebForms" Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %>
    
    <form id="form1" runat="server">
        <rsweb:ReportViewer ID="ReportViewer" runat="server" 
                            Height="100%" Width="100%"  
                            SizeToReportContent="True" ProcessingMode="Remote"
                            AsyncRendering="False" />
        <asp:ScriptManager ID="ScriptManager1" runat="server" 
                           EnablePartialRendering="false"  />
    </form>
    

    Note: You must set AsyncRendering="False" and EnablePartialRendering="false"

    In the code behind you'll need to replace the inheritance type from System.Web.UI.UserControl to System.Web.Mvc.ViewUserControl.

    And on Page_Init, you'll need to set the Context.Handler to Page so events are registered properly.

    So the ReportViewerControl.ascx.cs should look like this:

    public partial class ReportViewerControl : System.Web.Mvc.ViewUserControl
    {
        protected void Page_Init(object sender, EventArgs e)
        {
            // Required for report events to be handled properly.
            Context.Handler = Page;
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                /* ... report setup ... */ 
                serverReport.Refresh();
            }
        }
    }
    

    In order to render the report, add the following to your controller view:

    @Html.Partial("ReportViewerControl", Model)
    

    And then in the ReportViewerControl.ascx.cs Page_Load event, you can retrieve the passed in model from the ViewUserControl.Model property like this:

    ReportSetup setup = (ReportSetup)Model;
    

    Pros:

    • Can build into master _layout.cshtml and consume in regular views
    • Can pass model directly

    Cons:

    • AsyncRendering must be set to false, so interactions like pagination and sorting cause full page refreshes and are sometimes wonky. Brian Hartman's has a blog just for ReportViewer and talks about AsyncRendering and all the Baggage that Comes With It.

Further Reading:

  • How can I use a reportviewer control in an ASP.NET MVC 3 razor view?
  • How do I render a remote ReportViewer aspx page in MVC 4?
  • MVC 5 & SSRS ReportViewer - How to Implement?

Solution 4:

Now there's a MvcReportViewer helper. We can get it from NuGet.

Project Site on GitHub

NuGet Package