ReportViewer and ASP.NET MVC 3 - Razor

[y]

Hi,

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

Thanks

[Saud Almutairi]

any updates on this issue.... the sample for ReportViewer with MVC is old... please provide one with MVC 3 Razor Engine


thanks

[Steve]

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

[Saud Almutairi]

any updates on this, as MVC 3 is now RTM

[Steve]

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

[Marc]

You could just include MVC2 page with report viewer in a MVC 3 page

@Html.Partial("ViewPageTestReport")

ViewPageTestReport in a ASCX page

[David]

Hello, do you could share your code where you put in reportviewer partial file?
Thank you
David

[Marc]

I'm writing a small post blog to explain that with an example

[David]

Thank you Raynald

[Marc]

You find it here

[Michael]

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!!)

[Marc]

Oupps, I have deleted it...
It's ok now, you can download it from http://yurl.fr/adluh

[Michael]

The 2 Css files didn't make a difference...I wonder if its because my partial view is inside the teleriktabstrip??

[Joseph]

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

[Alan Wong]

When is Telerik going to release an Html.ReportViewer helper method for MVC?

[Saud Almutairi]

Telerik Report Helper Method would be Great - at least you can give us the implementation code.

thanks

[Kori]

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.

[Saud Almutairi]

i second that

[Developer]

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

[Steve]

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

[Developer]

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

[dalexsoto]

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?

[Steve]

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

[AkAlan]

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?

[IvanY]

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

[AkAlan]

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.  

[IvanY]

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

[dalexsoto]

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??

[AkAlan]

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.

[Ed]

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.

[Steve]

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

[Vassil Petev]

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

[cheekl]

Hi,

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

Thanks.

[Stef]

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

[Ed]

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>
<html xmlns="http://www.w3.org/1999/xhtml">
    <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.

[Stef]

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:

• HTML5 Report Viewer - elaborates on the HTML5 Report Viewer features, how to pass report parameters and styling options;
• HTML5 Report Viewer ASP.NET MVC Extension - elaborates on the HTML5 Report Viewer MVC extension and how to pass report parameters;
• Telerik Reporting REST Service - elaborates on the new Reporting REST service, how to implement and host it and the available REST API;

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