HTML5 Report Viewer : Viewing .NET Reports in ASP.NET MVC

We're pleased to launch FlexViewer for MVC, a new HTML5 report viewer supporting FlexReport and C1Reports. C1Studio's FlexReport has been a leap forward in our strong Reporting & Documentation offering, and the FlexViewer for MVC is a powerful addition to your .NET reporting capabilities. C1Studio's FlexReport for web consists of:

  • The standalone FlexReport Designer app to create reports.
  • FlexReport Web API, available as a package on GrapeCity NuGet Server.
  • HTML5 Report Viewer as a JavaScript control, currently available in beta. By 2016 V2, this will be a first-class MVC control supporting HtmlHelpers\TagHelpers.

Update: The HtmlHelpers\TagHelpers for FlexViewer has been launched in 2016 V2. In addition an Item Template has also been released that enables integration of FlexReport Web API and FlexViewer in the same MVC5 or ASP.NET Core MVC(.Net framework) project. Please refer this blog for getting started with FlexViewer in MVC. You may also refer the documentation. In this tutorial, you'll learn how to:

  • Create a report using the standalone FlexReport Designer app;
  • Configure the FlexReport WebAPI using the C1Studio Web API; alternatively
  • Configure the FlexReport WebAPI using the standard Visual Studio Web API template
  • Viewing the FlexReport using FlexViewer in a MVC application

FlexReport Designer Application

The standalone FlexReport Designer app is installed at C:\Program Files (x86)\ComponentOne\Apps\4.0\. Here's a look at some resources for creating a report:

About MVC FlexViewer

MVC FlexViewer MVC FlexViewer Here's a quick look at the highlights of FlexViewer.

  • Modern UI, supporting all FlexReport features (except Map Field)
  • SVG-based pixel-perfect rendering
  • Supports export to:
    • PDF
    • HTML
    • RTF
    • Excel
    • Open XML Word/Excel
    • TIFF
    • BMP
    • PNG
    • JPEG
    • GIF
  • Customizable features include:
    • Text Searching
    • Zoom
    • Thumbnails
    • Continuous page view
    • Single page view
    • Page navigation
    • Parameters
    • Document Map
    • Keyboard navigation
    • Bookmarks support
  • Full print support

Viewing Reports on the Web

Let's walk through the steps required to view a report created using FlexReport Designer on the web. To view a FlexReport on the web, we require a Web API of FlexReport and a client HTML5 report viewer control. The FlexReport Web API consists of REST services with which the viewer communicates to load and display reports. The FlexReport Web API can be created in two ways:

  • Using C1 Web API Edition Template; or
  • Using standard Visual Studio web API template

Configuring FlexReport WebAPI using Web API Edition Template

Step One: Use Web API Edition Template

If you've installed Web API Edition from C1Studio installer, then it's easy to create a project pre-configured with FlexReport Web API. Use the C1 Web API Template to create a new project named FlexReportWebAPI and follow steps below:

Step Two: Add Report Files

  1. Add a folder named Files.
  2. Add the FlexReport's report definition file to it; the name of this folder can be of your choice. This example uses the FlexCommonTasks.flxr report definition that comes with the FlexViewer sample.
  3. If the report uses any local database (like MDB\MDF files), add the database to the App_Data folder. Make sure that the connection string of the reports are accordingly pointing to the App_Data folder.

Change connection string for local DB inside report definition Change connection string for local DB inside report definition

Step Three: Set Reports Root Location

  1. In the Startup.cs, add the following code inside Configuration method of the Startup class. This code registers the folder\location where the Report files will be stored; in this case, it's the Files folder: 

    app.UseCors(CorsOptions.AllowAll);  
var folder = GetFullRoot("Files");  
app.AddDiskStorage("root", folder);

    You will need to add Microsoft.Owin.Cors package from NuGet to the project if it is not added.

  2. Add the GetFullRoot function inside the Startup class: 

    private static string GetFullRoot(string root)  
{  
var applicationBase = AppDomain.CurrentDomain.SetupInformation.ApplicationBase;  
var fullRoot = Path.GetFullPath(Path.Combine(applicationBase, root));  
if (!fullRoot.EndsWith(Path.DirectorySeparatorChar.ToString(), StringComparison.Ordinal))  
{  
fullRoot += Path.DirectorySeparatorChar;  
}  
return fullRoot;  
}

Step Four: Deploy

Compile and deploy to IIS. If hosted on local IIS, the Web API url will be http://localhost/FlexReportwebAPI/.

Configuring FlexReport WebAPI Using Standard Visual Studio Web API Template

Step One: Create Project

Create a new ASP.NET Web API Project.

Step Two: Add FlexReport Web API Package

If you've installed MVC Edition, the GrapeCity NuGet source path should already be set inside Visual Studio. Alternatively, you could manually add the source path from Tools > NuGet Package Manager > Package Manager Settings as depicted in the following screen: GrapeCity Nuget GrapeCity Nuget Add ComponentOne ASP.NET Report Service package from GrapeCity NuGet. Report WebAPI package Report WebAPI package FlexReport Web API adds the following C1 references to the project: FlexReport WebAPI References FlexReport WebAPI References

Step Three: License The Project

Add licensing to the project by creating a licenses.licx file inside the project. This file can be created by adding a text file and saving it as Licenses.licx. In this file, add the following entry: 

C1.Web.Api.LicenseDetector, C1.Web.Api

Read more about MVC Licensing >>

Step Four: Add Report Files to Project

  1. Add a folder named Files and add the FlexReport Definition file to it.
  2. If the report is using any local database(like MDB\MDF files) then add the database to the App_Data folder. Make sure that the connection string of the reports are accordingly pointing to the App_Data folder: Change connection string for local DB in report definition Change connection string for local DB in report definition

Step Five: Set Reports Root Location

Add NuGet package for Microsoft.Owin.Cors to support cross origin calls. Open the Startup.cs file and add the following code to Configuration method:


            app.UseCors(CorsOptions.AllowAll);  //support cross origin calls  
            var folder = GetFullRoot("Files");  //Map report files location  
            app.AddDiskStorage("root", folder);

You will need to add Microsoft.Owin.Cors package from NuGet to the project, you will also need to add the following namespaces to the startup:


using Microsoft.Owin.Cors;  
using C1.Web.Api;  
using System.IO;

Add the following GetFullRoot function to startup class:


 private static string GetFullRoot(string root)  
        {  

            var applicationBase = AppDomain.CurrentDomain.SetupInformation.ApplicationBase;  

            var fullRoot = Path.GetFullPath(Path.Combine(applicationBase, root));  

            if (!fullRoot.EndsWith(Path.DirectorySeparatorChar.ToString(), StringComparison.Ordinal))  
            {  

                fullRoot += Path.DirectorySeparatorChar;  

            }  

            return fullRoot;  

        }

Step Six: Update web.config

Open web.config and add the following entry under handlers inside system.webServer Node:


<add name="ExtensionlessUrlHandler-Integrated-4.0" path="api/*" verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

Step Seven: Deploy

Deploy the project to IIS. If hosted on local IIS, the Web API url will be http://localhost/FlexReportwebAPI/.

Viewing Reports in HTML5 Report Viewer (FlexViewer)

The FlexViewer is currently a JavaScript control that can be used in a MVC application. Here's how to use the control to view a report.

Step One: Create MVC Project

Create a new ASP.NET MVC project using C1 MVC Template. Add a new scaffolded item to the project by right-clicking on the Controllers folder.

Step Two: Add Controller

In the scaffolder wizard select MVC5 empty controller. In this example, we named the controller ReportTasksController.

Step Three: Add FlexViewer Scripts

Add a Scripts folder to the project. Add the following file to the project.

  • wijmo.report.min.js

These files are available with the FlexViewer HowTo sample available at: ~\Documents\ComponentOne Samples\ASP.NET MVC\MVC\HowTo\FlexViewer\FlexViewer\Script

Step Four: Add StyleSheet

Add the flexviewer.css file to the content folder. This file can be found in the Contents folder of the above mentioned HowTo sample.

Step Five: Add FlexViewer Images

Add the images folder available in the HowTo FlexViewer sample's Content folder to this project.

Step Six: Reference JS & CSS

Open the Index.cshtml under Views > ReportTasks. Add references to the JavaScript & stylesheet css files to the Index.cshtml.

Step Seven: Initialize FlexViewer

  1. Add a div tag to the Index.cshtml.
  2. Set its ID as flexViewer.

  3. Add the following script to load and view the "Simple List" report available in the "FlexCommonTasks.flxr" report definition file:

    
//     c1.mvc.Utils.documentReady(function () {  

        loadFlexReport();  

    })  

    function loadFlexReport() {  
        var flexView = new wijmo.report.FlexViewer("#flexViewer")  
        var flexReport = new wijmo.report.FlexReport();  
        flexReport.serviceUrl = "http://localhost/FlexReportwebAPI/";  
        flexReport.reportUrl = '/root/FlexCommonTasks.flxr';  
        flexReport.reportName = "Simple List";  
        if (flexView.documentSource) {  
            flexView.documentSource.dispose();  
        }  
        flexView.documentSource = flexReport;  
    }  

// ]]>

FlexReport Common Tasks

The loadFlexReport function does the following operations:

  • Declares a FlexViewer object on the flexViewer div tag, and an object of FlexReport.
  • It assigns the Web API 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.

View Report

Run the project and navigate to ReportTasks to view the report. HTML5 Report Viewer HTML5 Report Viewer

Note: FlexViewer for MVC, FlexReport Designer and FlexReport Web APIs are available to MVC Edition license holders, but the C1Studio Web APIs are available only in ComponentOne Studio and Ultimate.

Download Now!

Prabhakar Mishra

Product Manager
comments powered by Disqus