How to Add MVC Report Viewer to Your Web App

FlexViewer is a fast, flexible HTML5-based MVC report viewer for modern enterprises allows you to easily display C1Reports and FlexReports in your browsers. Coming in July, we'll be launching FlexViewer for MVC with full print support, pixel-perfect rendering, and export to PDF, HTML, RTF, Excel, and image file types. In addition, a desktop version of FlexViewer will be added for UWP.

Download C1Studio

Paired with the C1Studio standalone FlexReport Designer and our built-in Web API, creating and publishing reports is a straightforward process. Here's a walk-through of how to add FlexViewer to your MVC projects.

Step 1: Create an MVC Application

Create an ASP.NET MVC application using ComponentOne MVC Template. Refer to Configuring MVC application using ComponentOne template for detailed steps.

Step 2: Add Controller

Complete the following steps to add controller to your application:

  1. Right click the Controllers folder and select Add | New Scaffolded Item....
  2. In the Add Scaffold wizard select MVC5 Controller - Empty, and click Add.
  3. Provide a name to the Controller. For example, we name the controller as ReportTasksController.

A new controller is added to your application.

Step 3: Add a View for the Controller

Complete the following steps to add corresponding view for the controller.

  1. Place the cursor inside the method Index() within your controller (in this example: ReportTasksController).
  2. Right click and select Add View from the options. The Add View dialog appears.
  3. In the Add View dialog, set a View name. For example, Index in this example.
  4. Click Add.

A view is added for the controller.

Step 4: Add FlexViewer Scripts

Complete the following steps to add FlexViewer scripts to your application.

  1. Add a Scripts folder to the application.
  2. Add the file in the Scripts folder.
    • Note: This file is provided in Scripts folder of the FlexViewer HowTo sample, which is installed in the ComponentOne Samples folder by default. ~\Documents\ComponentOne Samples\ASP.NET MVC\MVC\HowTo\FlexViewer\FlexViewer\Script

Step 5: Add FlexViewer StyleSheet

Add flexviewer.css file to the Content folder of your application.

Note: This file can be found in Content folder of the FlexViewer HowTo sample, available at ~\Documents\ComponentOne Samples\ASP.NET MVC\MVC\HowTo\FlexViewer

Step 6: Add FlexViewer Images

  1. Copy the Images folder available in the Content folder of FlexViewer HowTo sample (~\Documents\ComponentOne Samples\ASP.NET MVC\MVC\HowTo\FlexViewer).
  2. Add this Images folder to your application.

Step 7: Reference JavaScript and CSS files

Within the View (For example, Index.cshtml) of your application, add reference to the JavaScript files added in step 4 and FlexViewer CSS file added in the step 5 above.

Step 8: Initialize FlexViewer

Complete the following steps to initialize the FlexViewer control.

  1. Add a
    tag in the View of your application, and set its ID as flexViewer.
  2. Add the following script in the View to load and view the "SimpleList" report, available in the "FlexCommonTasks.flxr" report definition file:

        c1.mvc.Utils.documentReady(function () {  
        function loadFlexReport() {  
            var flexViewer = new"#flexViewer")  
            var flexReport = new;  
            flexReport.serviceUrl = "http://localhost/FlexReportwebAPI/";  
            flexReport.reportUrl = '/root/FlexCommonTasks.flxr';  
            flexReport.reportName = "Simple List";  
            if (flexViewer.documentSource) {  
            flexViewer.documentSource = flexReport;  

The loadFlexReport function does the following operations:

  • Declares a FlexViewer object on the flexViewer
    tag and an object of FlexReport.
  • Assigns the WebAPI previously created and hosted on IIS to the serviceUrl property of FlexReport.
  • Assigns the FlexReport definition file name to reportUrl property of FlexReport object.
  • Assigns the name of the report to display to the reportName property of FlexReport object.
  • Sets the documentSource property of FlexViewer to the FlexReport object.

Step 9: Build and Run the Project

  1. Click Build | Build Solution to build the project.
  2. Press F5 to run the project.

The following image shows a report named Simple List, which can be viewed in FlexViewer on completing the steps above.

FlexViewer for MVC FlexViewer for MVC Try the FlexViewer Demo


GrapeCity Developer Tools
comments powered by Disqus