Embed paginated reports into ASP.NET web apps using the Report Viewer control

Thanks to Rhys Schmidtke, Senior Software Engineer, for contributing content to today’s post.

With SQL Server 2016 Reporting Services, we introduced several modernizations with various types of users in mind – from a new web portal and modern browser support for report viewers, to new chart styles for report designers, to Visual Studio 2015 and .NET Framework 4.x support for developers. Developers in particular are key users and providing a developer-friendly platform has been a priority for Reporting Services since day one. Since releasing SQL Server 2016, we’ve continued to work on modernizing our developer story, focusing on a core scenario: embedding reports into web apps.

SSRS 2016 made it easier than ever to embed a report into a web app: Just copy the address from your browser, append rs:Embed=true, and insert into an iframe in your app. Sometimes, you have a very basic embedding requirement and this lightweight solution fits the bill, while other times, you want the programmability of an API, whether it’s to customize the UI or to trigger actions; the latter is where the Report Viewer control comes in.

Today, we’re pleased to announce a Release Candidate of an updated Report Viewer control for you to try.

We’ve heard from many of you using the existing Report Viewer 2015 control in your existing ASP.NET Web Forms apps and awaiting an updated version with, among other things, modern browser support. This update is for you. (For those of you developing new web apps on ASP.NET Core/MVC and other web frameworks, know that your scenario is on our radar as well.)

What’s new

The updated Report Viewer control includes several enhancements we made for SSRS 2016:

  • Modern browser support: Like SSRS 2016, the updated Report Viewer control is optimized for HTML5 Standards mode pages and works great across Edge, Internet Explorer 10+, Chrome, Firefox, and Safari.
  • Cross-browser printing: Print from any modern browser – without installing an ActiveX control.
  • Report parameter positioning: See your report parameters the way you designed them in SSRS 2016.
  • Modern look-and-feel: Use the default style aligned with SSRS 2016 or customize to align more with your app.

clip_image002

Install the NuGet package

If you’re looking for the updated Report Viewer control in the Download Center and not finding it, fear not: We’ve switched to NuGet, Visual Studio’s package manager that makes it easier than ever to import controls like this one into your app. Here’s how it works:

  1. Open your ASP.NET Web Forms project in Visual Studio 2015.
  2. Open the NuGet Package Manager Console (Tools > NuGet Package Manager > Package Manager Console).
  3. Enter this command in the console:
    Install-Package Microsoft.ReportingServices.ReportViewerControl.WebForms

That’s it; your project now has the files you need.

Add a Report Viewer control to your page

If your project doesn’t reference an earlier version of the Report Viewer control, you’re ready to add a Report Viewer control to your page. You’ll need to add

  • A Register tag.
  • A ScriptManager control.
  • The ReportViewer control itself.

Your page will look something like the following:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<%@ Register Assembly=”Microsoft.ReportViewer.WebForms, Version=14.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91″ Namespace=”Microsoft.Reporting.WebForms” TagPrefix=”rsweb” %>

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head runat=”server”>
  <title></title>
</head>

<body>
  <form id=”form1″ runat=”server”>

    <asp:ScriptManager runat=”server”></asp:ScriptManager>

    <rsweb:ReportViewer ID=”ReportViewer1″ runat=”server” ProcessingMode=”Remote” Width=”850px” Height=”680px”>
      <ServerReport ReportServerUrl=”http://your-report-server/reportserver” ReportPath=”/Some Folder/Some Report” />
    </rsweb:ReportViewer>

  </form>
</body>

</html>

Just use your ReportServerUrl and ReportPath in place of the sample values above.

Check out this article for a step-by-step walkthrough.

Update an existing web app

If your existing project references a previous version of the Report Viewer control, you’ll need to update a few references in your web pages and web.config file; see this article for more info.

Try it now and send us your feedback