Telerik blogs

Obsolete: The blog is outdated. Consider using our HTML5 Report Viewer ASP.NET MVC Extension instead. 

A common query that we receive is people asking how to utilize Telerik Reporting in ASP.NET MVC. On the product roadmap, expect to see an MVC and HTML5 compliant report viewer coming soon. In the meantime, while there isn’t a specific report viewer control available for MVC today, there is an easy way to include reporting functionality in your web application. Follow these 8 simple steps and your users will be able to enjoy reporting functionality in no time (jump to the video if you prefer a more visual approach).

Step 1

Add a reference to Telerik.Reporting.dll and Telerik.ReportViewer.WebForms to your ASP.NET MVC project.

Add a reference to Telerik.Reporting.dll and Telerik.ReportViewer.WebForms to your ASP.NET MVC project

Step 2

Create your report (remember any database connection strings that need to be configured!)

Create your Telerik Report

In my case, I added the existing CSharp.ReportLibrary project to my solution (this comes free with the installation of Telerik Reporting, this project is located at the following path: C:\Program Files (x86)\Telerik\Reporting Q1 2013\Examples\CSharp\ReportLibrary). I also copied the connection string from the app.config in the reporting library project to my Web.config of my MVC project. I then added a reference to the CSharp.ReportLibrary project to my MVC project references.

Step 3

Add a report viewer handler to the Web.config in the <system.webServer><handlers> section:

<remove name="Telerik.ReportViewer.axd_*"/>
<add name="Telerik.ReportViewer.axd_*" path="Telerik.ReportViewer.axd" verb="*" type ="Telerik.ReportViewer.WebForms.HttpHandler, Telerik.ReportViewer.WebForms, Version=7.0.13.220, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" preCondition="integratedMode"/>

 

Step 4

Create a new view (not a partial view) that uses the ASPX view engine (you can still choose ASPX even if your project is a Razor project), make sure you don’t use a master page.

image

Step 5

In your view, import report namespace and register the Telerik assemblies.

<%@ Import Namespace="Telerik.Reporting.Examples.CSharp" %>
 
<%@ Register assembly="Telerik.ReportViewer.WebForms, Version=7.0.13.220, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" namespace="Telerik.ReportViewer.WebForms" tagprefix="telerik" %>
 
<%@ Register assembly="Telerik.Reporting, Version=7.0.13.220, Culture=neutral, PublicKeyToken=a9d7983dfcc261be"
namespace="Telerik.Reporting" tagprefix="telerik" %>

 

Step 6

Add the form and control to your view.

<form id="main" method="post" action="">
 <telerik:ReportViewer ID="ReportViewer1" Width="100%" Height="800px" runat="server">
 </telerik:ReportViewer>
</form>

 

Step 7

Add server script to your view, within the <body> element. This server code instantiates an instance of your report, and sets it to the source of the report viewer control

<script runat="server">
 public override void VerifyRenderingInServerForm(Control control)
  {
 // to avoid the server form (<form runat="server"> requirement
  }
 protected override void OnLoad(EventArgs e)
  {
 base.OnLoad(e);
      var instanceReportSource = new Telerik.Reporting.InstanceReportSource();
      instanceReportSource.ReportDocument = new Dashboard();
      ReportViewer1.ReportSource = instanceReportSource;
  }
</script>

 

Step 8

Render your report view as Partial in the view where you want your report to be displayed, then run your application.

<h2>Hello Reporting</h2>
@Html.Partial("Dashboard")

 

Telerik Reporting in ASP.NET MVC project

There you have it, 8 simple steps to success! As you can see it is very easy to include the richness of Telerik Reporting in ASP.NET MVC applications. Watch the video below to review these steps and include a report in ASP.NET MVC4.

Additional information - avoiding CSS collisions with the default stylesheet

If you are using the default stylesheet that comes with the ASP.NET MVC templates, you will need to make some modifications to avoid CSS collisions that will cause the report viewer to render improperly. Luckily this too is also a simple fix. In the Content folder, open Site.css and comment out the following entries:

input, textarea {
 border: 1px solid #e2e2e2;
 background: #fff;
 color: #333;
 font-size: 1.2em;
 margin: 5px 0 6px 0;
 padding: 5px;
 width: 300px;
}

as well as

table {
 border-collapse: collapse;
 border-spacing: 0;
 margin-top: 0.75em;
 border: 0 none;
}


and finally

td {
 padding: 0.25em 2em 0.25em 0em;
 border: 0 none;
}

 

This will solve the problem of colliding CSS and your report viewer will now render properly.

Download Telerik Reporting


About the Author

Carey Payette

Carey Payette is a Senior Software Engineer with Trillium Innovations (a Solliance partner), an ASPInsider, a Progress Ninja, a Microsoft Certified Trainer and a Microsoft Azure MVP. Her primary focus is cloud integration and deployment for the web, mobile, big data, AI, machine learning and IoT spaces. Always eager to learn, she regularly tinkers with various sensors, microcontrollers, programming languages and frameworks. Carey is also a wife and mom to three fabulous boys.

Related Posts

Comments

Comments are disabled in preview mode.