This is a migrated thread and some comments may be shown as answers.
ReportViewer and ASP.NET MVC 3 - Razor
35 Answers 1472 Views
This is a migrated thread and some comments may be shown as answers.
y
Top achievements
Rank 1
y asked on 08 Dec 2010, 11:02 PM
Hi,

What is the best way to implement the report viewer using MVC 3 project with the Razor engine?

Thanks

35 Answers, 1 is accepted

Sort by
0
Saud Almutairi
Top achievements
Rank 1
answered on 02 Jan 2011, 04:55 PM
any updates on this issue.... the sample for ReportViewer with MVC is old... please provide one with MVC 3 Razor Engine


thanks

0
Steve
Telerik team
answered on 04 Jan 2011, 05:51 PM
Hi y,

Telerik Reporting does not have out of the box support for MVC and thus we have included such project in our code library section. Moreover MVC 3 is still not official and we have not yet looked at that direction, especially having in mind that we do not have a dedicated MVC report viewer. Once MVC 3 becomes official, we would review any problems that might arise with the workaround we have provided so far.

Kind regards,
Steve
the Telerik team
Get started with Telerik Reporting with numerous videos and detailed documentation.
0
Saud Almutairi
Top achievements
Rank 1
answered on 18 Jan 2011, 09:56 AM
any updates on this, as MVC 3 is now RTM
0
Steve
Telerik team
answered on 21 Jan 2011, 05:02 PM
Hello Saud,

We've tested the project from the Using Telerik Web ReportViewer in ASP.NET MVC application code library with MVC and it works fine with the ASPX view engine. As you have probably read by now from ScottGu posts, you cannot use web controls in any way in the Razor view engine, there are no postbacks, viewState etc. that our ASP.NET viewer depends on.

Kind regards,
Steve
the Telerik team
Get started with Telerik Reporting with numerous videos and detailed documentation.
0
Marc
Top achievements
Rank 1
answered on 09 Feb 2011, 09:58 AM
You could just include MVC2 page with report viewer in a MVC 3 page

@Html.Partial("ViewPageTestReport")

ViewPageTestReport in a ASCX page
0
David
Top achievements
Rank 1
answered on 16 Feb 2011, 10:48 PM
Hello, do you could share your code where you put in reportviewer partial file?
Thank you
David
0
Marc
Top achievements
Rank 1
answered on 17 Feb 2011, 08:09 AM
I'm writing a small post blog to explain that with an example
0
David
Top achievements
Rank 1
answered on 17 Feb 2011, 01:59 PM
Thank you Raynald
0
Marc
Top achievements
Rank 1
answered on 17 Feb 2011, 03:20 PM
You find it here
0
Michael
Top achievements
Rank 1
answered on 18 Mar 2011, 11:10 AM
Brilliant Raynard,

I have the viewer working, but the same css problems (i think).

The Viewer is running inside a tabcontrol and as you can see from the screen shot its all a little awkward (still repeating the page controls/print etc)

I've replaced the default site.css file with that from the telerik example (table styles removed) but this made no difference to the layout.

I followed Raynard's video and noticed a seperate reports.css so i am hoping this is my solution??, there's no link to code from the website so would appreciate this style to try to fix my problem. 

(Oh.... Firefox 4 Beta seems to dislike the standard MVC site menu css!!)
0
Marc
Top achievements
Rank 1
answered on 18 Mar 2011, 12:53 PM
Oupps, I have deleted it...
It's ok now, you can download it from http://yurl.fr/adluh
0
Michael
Top achievements
Rank 1
answered on 19 Mar 2011, 09:51 PM
The 2 Css files didn't make a difference...I wonder if its because my partial view is inside the teleriktabstrip??
0
Joseph
Top achievements
Rank 1
answered on 23 Mar 2011, 01:23 PM
Hi Michael,

I'm having the same issue but only when the view (mine's a partial view, ascx) is  called via render.partialview().

Have you managed to get around it?

regards,
James


EDIT: Michael.

You might find this useful
http://www.telerik.com/support/kb/reporting/report-viewers/the-styles-of-the-web-report-viewer-s-toolbar-are-messed-up.aspx
0
Alan Wong
Top achievements
Rank 1
answered on 23 Jun 2011, 08:57 PM
When is Telerik going to release an Html.ReportViewer helper method for MVC?
0
Saud Almutairi
Top achievements
Rank 1
answered on 07 Jul 2011, 10:21 AM
Telerik Report Helper Method would be Great - at least you can give us the implementation code.

thanks
0
Kori
Top achievements
Rank 2
answered on 24 Feb 2012, 05:27 PM
Please -Telerik developers,

I beg you to look into this further, at least to provide a workaround for your customers who are using MVC and want the option to use the Razor view engine. Now that MVC 4 is in beta, it'd be nice to see a solution for MVC3 - as the argument that it's not important doesn't really apply any more.

I'm trying to convert my whole office, but this issue will make me reconsider not renewing my ultimate subscription again because it looks as if you're not interested in MVC.
0
Saud Almutairi
Top achievements
Rank 1
answered on 24 Feb 2012, 06:50 PM
i second that
0
Developer
Top achievements
Rank 1
answered on 29 Feb 2012, 09:38 PM
So true; any application that takes its users serious will have to have some sort of reporting and buying into the Telerik suite I thought I'd get this too. Please give us something like @Html.ReportViewer to work with!

Kind regards,

Chris
0
Steve
Telerik team
answered on 01 Mar 2012, 03:33 PM
Hi guys,

We've never claimed that MVC is not important, let there be no doubt about that. We always work towards presenting tools that ease the daily job of developers and MVC is not an exception, as you can see our MVC suite has grown enormously since its introduction and it is only a matter of time to create a native MVC report viewer as well.
For the time being you can include partial view with the web report viewer in a MVC 3 page

@Html.Partial("ViewPageTelerikReport")

You can see a short video on the matter here.

All the best,
Steve
the Telerik team
NEW in Q1'12: Telerik Report Designer (Beta) for ad-hoc report creation. Download as part of Telerik Reporting Q1 2012. For questions and feedback, use the new Telerik Report Designer Forum.
0
Developer
Top achievements
Rank 1
answered on 01 Mar 2012, 04:01 PM
Yeah, I am using that right now. But it isn't as flexible as I would like it to be. Good to hear that you are working towards a native MVC report viewer though! I'll be looking out for that one.
Keep up the great work,

Chris
0
dalexsoto
Top achievements
Rank 1
answered on 01 Jun 2012, 01:37 AM
I hpoe you integrate telerik reporting on kendo ui for Asp.net MVC because afaik Telerik Asp mvc controls will be discountinued on 2013 right?
0
Steve
Telerik team
answered on 01 Jun 2012, 08:33 AM
Hello dalexsoto,

Whenever there is a native MVC viewer, it would be part of the reporting suite and not part of the mvc controls.

Greetings,
Steve
the Telerik team

BLOGGERS WANTED! Write a review about Telerik Reporting or the new Report Designer, post it on your blog and get a complimentary license for Telerik Reporting. We’ll even promote your blog and help bring you a few fresh readers. Yes, it’s that simple. And it’s free. Get started today >

0
AkAlan
Top achievements
Rank 2
answered on 22 Jul 2012, 11:22 PM
I have been able to get a report to work in an MVC 3 application by following the video posted earlier. How is it possible to pass parameters to a report that uses a SqlDataSource in an MVC applilcation?
0
IvanY
Telerik team
answered on 23 Jul 2012, 05:52 PM
Hello Alan,

Passing parameters to a report in an MVC application is no different than doing so in a classic ASP.NET application. Because the Report Viewer is in a view you can simply use the ViewBag to pass parameters from the controller to the view - it does not matter that the view is not cshtml but aspx. As an example you can do this:
protected override void OnLoad(EventArgs e)
{
  base.OnLoad(e);
  var instanceReportSource = new Telerik.Reporting.InstanceReportSource();
  instanceReportSource.ReportDocument = new Reports.Sample();
             
  instanceReportSource.Parameters.Add(new Telerik.Reporting.Parameter("Parameter1", ViewBag.Text));
 
  ReportViewer1.ReportSource = instanceReportSource;
}

Additionally you can make the View strongly typed and pass the model class through your controller. 

All the best,
IvanY
the Telerik team

BLOGGERS WANTED! Write a review about Telerik Reporting or the new Report Designer, post it on your blog and get a complimentary license for Telerik Reporting. We’ll even promote your blog and help bring you a few fresh readers. Yes, it’s that simple. And it’s free. Get started today >

0
AkAlan
Top achievements
Rank 2
answered on 23 Jul 2012, 06:36 PM
Thanks IvanY, I will try that out. I would really be interested in seeing an example of how to bind a report to a model on a strongly typed View. There does not seem to be any documetation for using MVC and Telerik Reporting.  
0
IvanY
Telerik team
answered on 24 Jul 2012, 05:08 PM
Hi Alan,

The approach to make a strongly typed View with Telerik Reporting is pretty straightforward too. In your view (which is an aspx page because of the Report Viewer) you can do this:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Telerik.Reporting.ReportSource>" %>
 
<%@ Register Assembly="Telerik.ReportViewer.WebForms, Version=6.1.12.621, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" Namespace="Telerik.ReportViewer.WebForms" TagPrefix="telerik" %>
 
<!DOCTYPE html>
<html><head></head>
<body>
    <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);
            ReportViewer1.ReportSource = Model;
        }
 
    </script>
    <form id="main" method="post" action="">
        <telerik:ReportViewer ID="ReportViewer1" Width="100%" Height="800px" runat="server"></telerik:ReportViewer>
    </form>
</body>
</html>

Then in your controller you will have to pass the instance of the report source (or URI, XML, Type - for more information please check the Report Sources help article):
public ActionResult Index()
{
  var instanceReportSource = new Telerik.Reporting.InstanceReportSource();
  instanceReportSource.ReportDocument = new Sample();
 
   // Of course passing parameters is optional
  instanceReportSource.Parameters.Add(new Telerik.Reporting.Parameter("Parameter1", parameterObjectHere));
 
  // Here you can return to the view one of the other report sources as well, check the link above
  return View(instanceReportSource);
}

I hope that helps.

All the best,
IvanY
the Telerik team

BLOGGERS WANTED! Write a review about Telerik Reporting or the new Report Designer, post it on your blog and get a complimentary license for Telerik Reporting. We’ll even promote your blog and help bring you a few fresh readers. Yes, it’s that simple. And it’s free. Get started today >

0
dalexsoto
Top achievements
Rank 1
answered on 24 Jul 2012, 05:45 PM
Ok, it works and shows the report but the buttons of the reportviewer appears all messed up and repeated i guess its a css problem, how to fix it??
0
AkAlan
Top achievements
Rank 2
answered on 24 Jul 2012, 05:51 PM
If you watch This video that was mentioned in a previous post on this forum, he shows you what to edit in your site.css file to fix that. I followed his instructions and it worked for me. BTW,  the video has no audio.
0
Ed
Top achievements
Rank 1
answered on 06 Aug 2012, 06:40 PM

You may not be able to use the ReportViewer in a Razor view, but you can include a partial view that is an ASPX (WebForm) page. As long as the page is in a default location, it works fine; if you want to put it in a custom location, things get trickier, but still possible.

You can have a Razor view include an ASPX partial view, as follows. The referenced Telerik demo (Using Telerik Web ReportViewer in ASP.NET MVC application) is out of date for the Q2 2012 Reporting, but the same concepts still apply. I have the following action in my controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MyProject.Helpers;
 
 
namespace MyProject.Controllers
{
    public class ReportsController : Controller
    {
        public ActionResult Index()
        {
            // Menu of reports.
            return View();
        }
         
        public ActionResult ReportView(string id)
        {
            ViewBag.Title = id;
            ViewBag.ReportViewName = "InvalidReport";
            switch (id.ToLower())
            {
            case "mydemoreport":
                ViewBag.Title = "Demo Report";
                ViewBag.ReportViewName = "MyDemoReportASPX";
                break;
            }
            return View();
        }
    }
}

This is my Razor view, ReportView.cshtml, that includes the ASPX page the calls the report viewer, MyDemoReportASPX.aspx. By changing the contents of the ViewBag.ReportViewName, this one view can be used to launch all my report pages.
@{
    ViewBag.Title = ViewBag.Title ?? "Reports";
}
<link href="@Url.Content("~/Content/TelerikReportingFix.css")" rel="stylesheet" type="text/css" />
 
<h2>@ViewBag.Title</h2>
 
@Html.Partial((string)ViewBag.ReportViewName)

My demo report that launches the viewer (with an objectdatasource object as the data source), in MyDemoReportASPX.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
 
<%@ Register Assembly="Telerik.ReportViewer.WebForms, Version=6.1.12.611, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" Namespace="Telerik.ReportViewer.WebForms" TagPrefix="telerik" %>
 
<!DOCTYPE html>
<script runat="server">
 
</script>
<html>
<head runat="server">
    <title>My Demo Report ASPX</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         
        <telerik:ReportViewer ID="MyDemoReportViewer" runat="server" Width="100%" Height="520px">
        <typereportsource
                    typename="MyProject.Reports.MyDemoReport, MyProject, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"></typereportsource>
        </telerik:ReportViewer>       
    </div>
 
    </form>
</body>
</html>

The Error:
This was the tricky part. I placed my partial views for the reports in a subfolder named Partials in my Reports view folder. I was getting errors like:
The view 'MyDemoReportASPX' or its master was not found or no view engine supports the searched locations. The following locations were searched:
~/Views/Reports/EQMAgingReportASPX.aspx
~/Views/Reports/EQMAgingReportASPX.ascx
~/Views/Shared/EQMAgingReportASPX.aspx
~/Views/Shared/EQMAgingReportASPX.ascx
~/Views/Reports/EQMAgingReportASPX.cshtml
~/Views/Reports/EQMAgingReportASPX.vbhtml
~/Views/Shared/EQMAgingReportASPX.cshtml
~/Views/Shared/EQMAgingReportASPX.vbhtml
~/Views/Reports/Partials/EQMAgingReportASPX.cshtml

Or the maddeningly cryptic:
'System.Web.Mvc.ViewPage' is not allowed here because it does not extend class 'System.Web.Mvc.WebViewPage'.

The Fix:
Because I was using a custom "partials" location, my default view engine (Razor) didn't know where to look for it. Notice it didn't search ~/Views/Reports/Partials/. I had the custom location defined for .cshtml pages, but the ASPX (WebForms) engine had to be configured, too. Here is my new CustomViewEngine.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
// My custom view engine.
namespace MyProject
{
    public class MyRazorViewEngine : RazorViewEngine
    {
        public MyRazorViewEngine()
        {
            // Serve view files named ~/Views/{controller}/Partials/{action}.cshtml.
            this.PartialViewLocationFormats = new[] {
                "~/Views/{1}/Partials/{0}.cshtml"
            };
        }
    }
 
    public class MyAspxViewEngine : WebFormViewEngine
    {
        public MyAspxViewEngine()
        {
            // Serve ASPX views from custom locations.
            this.PartialViewLocationFormats = new[] {
                "~/Views/{1}/Partials/{0}.aspx"
            };
        }
    }
}

After verifying the following lines were added to the Application_Start() method in Global.Asax.cs:
protected void Application_Start()
{
    // ...
 
    // Tell view engines to look in custom locations.
    ViewEngines.Engines.Add(new MyRazorViewEngine());
    ViewEngines.Engines.Add(new MyAspxViewEngine());
 
    // ...
}

Now, when ~/Views/Reports/ReportView.cshtml looked for ~/Views/Reports/Partials/MyDemoReportASPX.aspx, it found the view in the Reports/Partials subfolder, used the ASPX engine, and did not throw the exceptions when rendering the partial view to launch the report viewer.
0
Steve
Telerik team
answered on 09 Aug 2012, 01:16 PM
Hi guys,

We've updated the code library Using Telerik Web Report viewer in ASP.NET MVC application with an MVC 3 project using the Razor view engine. There is nothing new to add, it uses the approach of including a partial view with the web report viewer in a MVC 3 page.

Regards,
Steve
the Telerik team

BLOGGERS WANTED! Write a review about Telerik Reporting or the new Report Designer, post it on your blog and get a complimentary license for Telerik Reporting. We’ll even promote your blog and help bring you a few fresh readers. Yes, it’s that simple. And it’s free. Get started today >

0
Vassil Petev
Telerik team
answered on 26 Mar 2013, 04:14 PM
Hi all,

Just a quick update: we will be working on a new web viewer for Q2 2013 which will work with MVC without the extra steps. Until then, check out our new blog + video on how to use Telerik Reporting in MVC 4.


Regards,
Vassil Petev
the Telerik team

Telerik Reporting Q1 2013 available for download with impressive new visualizations. Download today from your account.

0
cheekl
Top achievements
Rank 2
answered on 24 Jun 2013, 04:28 AM
Hi,

When the new web viewer for Q2 2013 is release? We are waiting for this Q2 2013 release.

Thanks.
0
Stef
Telerik team
answered on 27 Jun 2013, 10:05 AM
Hello,

We have rescheduled the release of the new viewer for Q3 2013. Meanwhile you can expect a preview of the feature to test it before the official release. If there are any changes they will be reflected in our Roadmap.

Regards,
Stef
Telerik

Have you tried the new visualization options in Telerik Reporting Q1 2013? You can get them from your account.

0
Ed
Top achievements
Rank 1
answered on 13 Nov 2013, 07:37 PM
As an addendum, I recently need to pass some parameters to a report that was displayed from a ReportViewer in a partial (ASPX) page. It ended up being a fairly simple matter. Here's an example:

// Controller code to display the View.
public
ActionResult ReportView(string id)
{
    ViewBag.Title = "Parameterized Report";
    ViewBag.ReportViewName = "myparameterizedreport";
    ViewBag.ReportingParameters = new Telerik.Reporting.ParameterCollection()
    {
        new Telerik.Reporting.Parameter("CodeList", "232,249")
    };
    return View();
}

The ReportView.cshtml file:
@{
    ViewBag.Title = ViewBag.Title ?? "Reports";
}
<link href="@Url.Content("~/Content/TelerikReportingFix.css")" rel="stylesheet" type="text/css" />
 
<h2>@ViewBag.Title</h2>
 
@* Include ASPX page that embeds the report viewer and identifies the data source. *@
@Html.Partial((string)ViewBag.ReportViewName)

And finally, the partial view that copies the parameters into the instantiated ReportViewer:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
 
<%@ Register assembly="Telerik.ReportViewer.WebForms, Version=7.2.13.1016, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" namespace="Telerik.ReportViewer.WebForms" tagprefix="telerik" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
 
    protected void ReportViewer1_Load(object sender, EventArgs e)
    {
        // Copy reporting parameters from the controller to the report instance.
        if (ViewBag.ReportingParameters != null)
        {
            foreach (Telerik.Reporting.Parameter p in ViewBag.ReportingParameters)
            {
                this.ReportViewer1.ReportSource.Parameters.Add(p);
            }
        }
    }
</script>
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
     
                <telerik:ReportViewer ID="ReportViewer1" runat="server" Width="100%"
                    Height="800px" onload="ReportViewer1_Load">
                    <typereportsource
                        typename="MyProject.Reports.MyParameterizedReport, MyProject, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null">
                    </typereportsource>
                </telerik:ReportViewer>
            </div>
        </form>
    </body>
</html>

In the definition of the CodeList report parameter, set Value to =Parameters.CodeList.Value to actually make the passed value available in the report.
0
Stef
Telerik team
answered on 14 Nov 2013, 02:24 PM
Hello,

@Ed: Thank you for your examples.

In addition, the new HTML5 Report Viewer is already released as of Telerik Reporting Q3 2013. More details about the new features can be found in the following help section:

There are also examples in the local demos provided with your Telerik Reporting installation - C:\Program Files (x86)\Telerik\Reporting Q3 2013\Examples (the default installation folder).


Regards,
Stef
Telerik

New HTML5/JS REPORT VIEWER with MOBILE AND TOUCH SUPPORT available in Telerik Reporting Q3 2013! Get the new Reporting version from your account or download a trial.

Asked by
y
Top achievements
Rank 1
Answers by
Saud Almutairi
Top achievements
Rank 1
Steve
Telerik team
Marc
Top achievements
Rank 1
David
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Joseph
Top achievements
Rank 1
Alan Wong
Top achievements
Rank 1
Kori
Top achievements
Rank 2
Developer
Top achievements
Rank 1
dalexsoto
Top achievements
Rank 1
AkAlan
Top achievements
Rank 2
IvanY
Telerik team
Ed
Top achievements
Rank 1
Vassil Petev
Telerik team
cheekl
Top achievements
Rank 2
Stef
Telerik team
Ed
Top achievements
Rank 1
Share this question
or