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

Once you have the Telerik Reporting REST Service implemented, it’s time to consume reports from the service. In this blog post we will step through adding the HTML5 Report Viewer widget to an ASP.NET MVC 5 project hosted separately from the REST service*.

GETTING STARTED

Open Visual Studio 2013, and create a new project. Choose Visual C# -> Web and select ASP.NET Web Application. I’ve named my project Mvc5ReportConsumer.

New Project Dialog

From the project templates dialog, select MVC, then click OK. Your project will now be generated and made available in Visual Studio.

MVC Project Dialog

ADD THE REPORT VIEWER WIDGET ASSETS TO THE PROJECT

Next we will add some ready-made JavaScript/CSS/HTML elements to the project. Open File Explorer and navigate to a path similar to the following:
C:\Program Files (x86)\Telerik\Reporting Q3 2013\Html5
In this folder, copy (CTRL+C) the ReportViewer folder. Then back in Visual Studio, right-click the Mvc5ReportConsumer project and select “Open Folder in File Explorer”, then paste (CTRL+V) the ReportViewer folder there. Next include the folder in your project in Solution Explorer. Toggle to view all files, then right-click the ReportViewer folder and select “Include in Project”.

Include Files In Project

ADDING AN MVC PAGE SECTION FOR HEADER CONTENT

We will be using additional CSS files for our Report Viewer implementation, in order to inject these into the head element of the rendered document, we will need to add an MVC page section. Open Views/Shared/_Layout.cshtml and within the head section of the document, add the following line of code:
@RenderSection("head", required: false)

IMPLEMENTING THE REPORT VIEWER WIDGET USING JAVASCRIPT

Open Controllers/HomeController.cs and add the following method:

public ActionResult JavaScriptImplementation()
{
    return View();
}

Right-click on the method you just added and select “Add View”, then accept all the defaults by clicking the Add button. Open the newly created Views/home/JavaScriptImplementation.cshtml file and replace the contents with the following:

@{
    ViewBag.Title = "JavaScript Implementation";
}
 
@section head {
    <!-- jquery and some basic styling -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 
    <!-- Kendo UI Scripts and Styling : Blue Opal theme -->
 
    <!-- Report Viewer Style Sheets and Scripts -->
    <link href="/ReportViewer/styles/ReportViewer-7.2.13.1016.css" rel="stylesheet" />
    <script src="/ReportViewer/js/ReportViewer-7.2.13.1016.min.js"></script>
 
    <style>
        #reportViewer1 {
            position:absolute;
            top:125px;
            bottom:10px;
            left:5px;
            right:5px;
            font-family: 'segoe ui', 'ms sans serif';
            overflow: hidden;
        }
    </style>
}
<h2>JavaScript Implementation</h2>
 
<div id="reportViewer1" class="k-widget">
    loading...
</div>
 
<script type="text/javascript">
 
    $("#reportViewer1")
        .telerik_ReportViewer({
            serviceUrl: "http://localhost:21294/api/reports/",
            templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate.html',
            reportSource: {
                report: "Dashboard.trdx",
                parameters: {
                    ReportYear: "2003"
                }
            },
            viewMode: "ViewModes.INTERACTIVE",
            scaleMode: "ScaleModes.SPECIFIC",
            scale: "1.0"
        });
 
</script>

In the head section we added some styles and JavaScript references. The JavaScript files referenced are jQuery, Kendo UI as well as the Report Viewer script. The Report Viewer widget is built with Kendo UI at its core, and thus allows us to take advantage of great Kendo UI features like theming. We’ve also included styles for the Kendo UI Blue Opal theme, font-awesome styling as well as the Report Viewer style sheet. A style has also been added for the Report Viewer widget itself, it will be rendered as a div with the id “reportViewer1”. You can see the reportViewer1 div directly underneath the header of the page in the body of the document.

Lastly we added a script to the body of the document after the reportViewer1 div. This script uses the reportViewer1 div to render the widget using JavaScript. 

The serviceUrl property is the link to my stand-alone report server that is hosting multiple file-based Telerik Reports. The templateUrl is a fully customizable HTML template that you can edit to modify the look and features of the Report Viewer widget, feel free to edit this document to your specifications.

The reportSource parameter is where you indicate the requested report and send in any necessary parameters. In this case, we are requesting the Dashboard file based report (Dashboard.trdx). It is just as easy to request a compiled report, simply by modifying the report parameter to the following:

“Fully.Qualified.Class.Name, ReportingAssemblyName”

An example of this can look like the following:

“Telerik.Reporting.Examples.CSharp.ProductCatalog, CSharp.ReportLibrary”

As for parameters, in this case we are passing in ReportYear as “2003” to the report, when the report is rendered you will see the Year of the report will be defaulted to 2003. We’ve also set the viewMode to be interactive (HTML5), and set the initial scale to be at full scale.

With JavaScriptImplementation.cshtml active in the editor, run the project. You will now see the Dashboard report, served from the Telerik Reporting REST Service displayed on the page.

HTML5 Report

CONCLUSION

In this blog post we covered how to consume reports in ASP.NET MVC 5 from a Telerik Reporting REST service that is hosted as a separate website. Including Telerik Reporting in an ASP.NET MVC 5 is quick and easy. 

DOWNLOAD SOURCE CODE

Remember when running the example code that you have a reporting REST service running and that the URL specified in the JavaScript function call matches the endpoint of your service.

* Please note that currently there is a minor issue with the Browser Link feature of Visual Studio 2013, this issue has already been corrected and the fix will be available in the next service pack release of Telerik Reporting. This issue will not affect usage of the product, simply turn off the Browser Link feature for the project. Disable Browser Link by clearing out the checkbox next to the Enable Browser Link item located on your toolbar.

VS 2013 Browser Link

Download Telerik Reporting


About the Author

Carey Payette

is a Developer Advocate. You can follow Carey on Twitter @careypayette or read her personal blog at www.codingbandit.com.

Related Posts

Comments