ActiveReports HTML5 Viewer in ASP.NET MVC

ActiveReports has been the greatest reporting tool for quite some time. Guess what, it's even better now. ActiveReports(v8) now has an HTML5 Viewer that can be used to view reports in a native HTML5 application. With the new HTML5 Viewer you can build more advanced, fast and robust applications for multiple platforms(Desktop and Mobile); thanks to its various UI types - Desktop, Mobile and Custom. The HTML5 Viewer also provides the feature to print the displayed reports and even export them to various formats (PDF, Excel, Word, etc). Since it is such a powerful control, I'm going to explain here how to use it in the ASP.NET MVC Framework.

Create the Application

First of all, we create a basic ASP.NET MVC application. Once that is done, we add the ActiveReport's Report Service required for processing the reports and generating the output for the HTML5 Viewer.

Adding the Report

Next, we create a new folder called Reports and add a SectionReport under this folder. You can also add your existing rpx or rdlx reports for that matter.

Adding HTML5 Viewer

Once the report(s) has been added, open the Index.cshtml file under the Views folder and add the following markup and code to create the HTML5 Viewer.

<div id="viewer" style="height:700px"></div>  
var viewer = GrapeCity.ActiveReports.Viewer({  
   element: '#viewer',  
   reportService: {  
      url: 'ActiveReports.ReportService.asmx'  
   },  
   uiType: 'desktop',  
   reportLoaded : function () {  
      reportsButtons.prop('disabled', false);  
   },  
   documentLoaded : function(){  
      console.log(viewer.pageCount);  
   },  
   error : function(error)  
   {     
      console.log("error");  
   }  
});

The HTML5 Viewer requires a few references and css files before we can run the application. We need to add the following js and css files and then add their references in the Index.cshtml file : - GrapeCity.ActiveReports.Viewer.Html.js - GrapeCity.ActiveReports.Viewer.Html.css - bootstrap.js - jquery-1.10.2.js - knockout.js Note : We also need to add the following in the RouteConfig.cs file under the App_Start folder in order to be able to run and view the report :

routes.IgnoreRoute("{\*allActiveReport}", new { allActiveReport = @".\*\\.ar8(/.*)?" });

Once all this is done, we can run the application and view the report of our choice in our preferred UI.
This is just a glimpse of what the ActiveReports HTML5 Viewer is capable of. Go ahead and explore! Download Sample