ActiveReports 12
ActiveReports with MVC5 and HTML5Viewer
ActiveReports 12 > ActiveReports User Guide > Samples and Walkthroughs > Samples > Professional > ActiveReports with MVC5 and HTML5Viewer

This sample demonstrates how to use ActiveReports HTML5 Viewer in ASP.NET MVC5 framework. This Sample is part of the ActiveReports Professional Edition. 

Note: Before running this sample, you must first install the ASP.NET MVC5 framework on your system.

Sample Location


<User Folder>\Documents\GrapeCity Samples\ActiveReports 12\Professional\ActiveReportsWithMVC5WebAPI\C#

Run-Time Features

When you run the sample, the page with the main view appears. On the left side of the main view, you can click a customer name under the Customer List. On the right side of the main view, you have the Customer Info tab and the Reports tab. Following options are available on this page.

Project Details

App_Start folder

This folder contains the following cs files that are required to run the application.

  • BundleConfig.cs

  • FilterConfig.cs

  • RouteConfig.cs

  • Startup.Auth.cs

  • WebApiConfig.cs

Content folder

Image folder

This folder contains the images used for the viewer buttons.

Also contains .css files which define the style of the application.

  • bootstrap.css
  • bootstrap.min.css
  • SideBar.css
  • Site.css


This folder contains the HomeController and CustomersController files. The HomeController handles the user interaction and returns the main view. The CustomersController handles the customer details information that is displayed when a customer is selected.

css folder

The css folder contains the following css files that store styles for the HTML5 viewer application.
  • GrapeCity.ActiveReports.Viewer.Html.css
  • theme-cosmo.css

Fonts folder

The fonts folder contains the following font files to provide styles to the text that gets displayed in the HTML5 viewer at run time.
  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.svg
  • glyphicons-halflings-regular.ttf
  • glyphicons-halflings-regular.woff


This folder contains the following classes.

Customer - Contains information for the rows in the Customers table of Reels.mdb.

CustomerContext - Contains information for the rows in the CustomerOrders table of Reels.mdb.


OrderDetailsReport.rdlx: This page report loads in the HTML5 Viewer when you select the Orders report for the Desktop UI type. This report uses the Table data region to display the order details. The Sum function is used to display the totals.

ProductDetail.rpx: This section report loads in the HTML5 Viewer when you select Product Details for the Desktop UI type. This report uses the Textbox and Label controls to display the data. The Sum function is used to display the total price information for each customer order.

Scripts folder

The Scripts folder contains the following javascript files and its dependencies required to build this application.
  • bootstrap-3.0.0.js
  • GrapeCity.ActiveReports.Viewer.Html.js
  • jquery-1.10.2.js
  • knockout-2.3.0.js

Views folder

Home folder

The default view start file.

Index.cshtml: The Index view file.

Shared folder

_Layout.cshtml: The default layout file.


The default view start file.


This file contains settings for the HTTP handler.


This is the report web service required for the proper functioning of the WebViewer control. The ActiveReports.ReportService.asmx is added automatically to the project when you place the Viewer control on the form. You can also can add this service by using Add New Item in the Visual Studio Project menu.


The is the default class that sets global URL routing values for this web application.


This is the default startup file.


The configuration file that contains the httpHandlers that allow ActiveReports to process this web application.

Note that you need to manually update version information here when you update your version of ActiveReports.