Telerik Reporting Integration with ASP.NET MVC

Introduction:

Telerik Reporting is a reporting solution for all .NET cloud, web, mobile and desktop platforms that provides a full range of ready-to-use tools and services, which are usd to communicate information, make decisions, and identify opportunities.

With Telerik Reporting, you can retrieve data from relational, multidimensional, ORM or custom data layer based data sources; The ready reports can be viewed in various formats (including PDF, Microsoft Office Word and Excel and PowerPoint documents); and can be viewed with a dedicated viewer in a Web or .NET Desktop application.

The Telerik Report Designer for Visual Studio provides a developer-friendly environment for creating and editing interactive ad-hoc reports. Reports stored in a class library and are embedded and distributed in .NET or touch-enabled mobile applications.

Drag and Drop Report Creation

Telerik Reporting is the first reporting tool to provide a WYSIWYG report canvas. Used in both report designers, the canvas offers drag and drop item rearrangement, codeless data binding, in-line editing and many wizards and tools to help you create and edit reports faster than ever.

Steps to integrate with ASP.NET MVC

Step 1:

Download the software from the below link and install it.

https://www.telerik.com/download-trial-file/v2/reporting for free trial version

Step 2:

Add the reference of the following dll(s): Telerik.Reporting.dll, Telerik.Reporting.Services.WebApi.dll and Telerik.ReportViewer.Mvc.dll to your ASP.NET MVC project.

Step 3:

Add a New Project (Class Library) to the solution and name it as TelerikReportLibrary. This is used for creating reports (in the sample below, we added “TelerikReportLibrary” project to MVC project solution as separate layer).

Repeat step 2 by adding all three dll(s) to this Class Library project – TelerikReportLibrary.

Then added a reference of this TelerikReportLibrary project to MVC project solution references.

Step 4:

Add the existing HTML5 “ReportViewer” folder to your MVC project. This comes free with the installation of Telerik Reporting. In our case, folder was located at the following path: “C:Program Files (x86)TelerikReporting R2 2016Html5”

This mainly consists of HTML 5 ReportViewer templates and corresponding CSS and J-script files as highlighted below.

Step 5:

Add a new report to your Report Library project, right click on Report Library project then choose

Add -> New Item -> Reporting. Select Reporting option on the left side panel and then select “Telerik ReportR2 2016 blank” (In below case, we have installed Telerik Report R2 2016) report and name it as Report1.cs, and click Add to your project.

Step 6:

Drag and drop some of the controls based on your requirement on to the report from the “Toolbox” for all the sections like header, detail and footer sections, etc.

Step 7:

Create a view that uses the Razor(CSHTML) view, make sure you don’t use a master page. This view is used to display HTML5 viewer.

We have added a div control with id=”reportViewer1” and javascript logic to inject HTML 5 viewer template to this Razor view (_Presentation).

The below path specifies the template that needs to be loaded into HTML view.

templateUrl: + '/ReportViewer/templates/telerikReportViewerTemplate.html'
 The below path specifies the report source to load data to the report.
 reportSource: { report: "TelerikReportingLibrary.Reports.Report1, TelerikReportingLibrary" }

Step 8:

Add a controller with name PresentationController.cs to the MVC solution, which is in-turn used to load data to the report viewer.

using Newtonsoft.Json;
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;

namespace TelerikReportingwithASPDotNetMVC.Controllers
{
public class PresentationController : Controller
{
//
// GET: /Presentation/

public ActionResult OpenViewPanel()
{
return PartialView(“_Presentation”);
}
[HttpPost, ValidateInput(false)]
public ActionResult PopulateReportParameters(string inputdetails)
{
JsonSerializerSettings serializationSettings = new JsonSerializerSettings();
serializationSettings.NullValueHandling = NullValueHandling.Ignore;
inputdetails = HttpUtility.UrlDecode(inputdetails);
inputdetails = inputdetails.Replace(“$”, “”).Replace(“%”, “”);
var InputObjetails = JsonConvert.DeserializeObject<object>(inputdetails, serializationSettings);
var jsonStringdata = Newtonsoft.Json.JsonConvert.SerializeObject(inputdetails);
return Json(new
{
successMessage = jsonStringdata
}, JsonRequestBehavior.AllowGet);

}
}
}

Step 9:

In the home page of project solution Index.cshtml, we have a button “Results” that is used to show the result. On click of this button, we are sending request input parameter as json through $.ajax call to server side to render the Presentation page.

Here, we are trying to show this HTML5 report viewer presentation page as Popup using fancy box.

Index.cshtml :

@{
 ViewBag.Title = "Home Page";
 }

<section class=”featured”>
<div class=”span3″>
<ul class=”leftNav”>
<li>
<a href=”#” id=”viewNav” class=””>Results</a>
</li>
</ul>
</div>
<div id=”divView” data-request-url=”@Url.Action(“OpenViewPanel”, “Report”)” class=”hide viewPanel” data-value=”viewNav”></div>
</section>

Step 10:

The below code explains the logic to send request from client-side to server-side with input parameters as json string using $.ajax call, to show HTML 5 Viewer presentation page as Popup.

Custom.js file logic

$(document).on("click", "#viewNav", function (event) {
 var InputObj = {
 HeaderSectioninput: "Company Logo with image",
 Date: Date.now,
 DetailSectioninput: "This is for testing",
 FooterSectioninnput:"Footer section details"
 }
 var JsoninputValue = JSON.stringify(InputObj);
 JsoninputValue = encodeURIComponent(stringCaseDetails);
 $.ajax({
 type: "POST",
 async: false,
 url: baseURL + "/Report/PopulateReportParameters",
 dataType: "json",
 data: { inputdetails: JsoninputValue },
 success: function (data) {
 //if it is sucess we will callresultviewPanel() method to show report
 resultViewPanel();
 }, error: function (XMLHttpRequest, textStatus, errorThrown) {

}
});

});
// this method is used to show HTML5 Viewer as Popup using facybox
function resultViewPanel() {
var view = $(‘body’).find(‘#divView’).data(‘request-url’);
$(document).trigger(‘click’);
$.fancybox({
type: ‘ajax’,
async: false,
cache: false,
href: view,
beforeClose: function () {

},
afterShow: function () {
},
onComplete: function (e) {
}(),

helpers: {
overlay: {
closeClick: false
}
}
});
}