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).
Add a reference to Telerik.Reporting.dll and Telerik.ReportViewer.WebForms to your ASP.NET MVC project.
Create your report (remember any database connection strings that need to be configured!)
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.
Add a report viewer handler to the Web.config in the <system.webServer><handlers> section:
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.
In your view, import report namespace and register the Telerik assemblies.
Add the form and control to your view.
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
Render your report view as Partial in the view where you want your report to be displayed, then run your application.
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:
as well as
This will solve the problem of colliding CSS and your report viewer will now render properly.
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required