View .NET Reports in ASP.NET MVC

FlexViewer, our flexible ASP.NET MVC report viewer, has now evolved into a first-class MVC control. This HTML5-based report viewer brings the power of FlexReports to the web. In addition to the Viewer, we've developed a Visual Studio Item Template that lets you quickly integrate FlexReport Web API and MVC FlexViewer in the same MVC5 ASP.NET Core(.NET Framework) project. In MVC3, 4 and ASP.NET Core (.NET Core), this ItemTemplate enables configuring FlexViewer according to the separately hosted FlexReport Web API. If you'd like to manually configure FlexReport Web API and FlexViewer, it's explained in the documentation.

Design a new Report using FlexReport Designer

Using Report Viewer Item Template

Note: The following walkthrough is using Visual Studio 2015 and an ASP.NET 4.0 MVC5 C# application.

Step One: Create a New MVC Project

Create a new MVC5 project using the C1 ASP.NET MVC 5 Application template. In the project settings window, check "Include C1 MVC FlexViewer Library." (The advantage of using C1 ASP.NET MVC 5 Application template is that it configures the project with required dlls, registers resources, and adds the license.)

Step Two: Add a Controller

Right-click on the Controllers folder. Click Add, and then click Controller. In the Add Scaffold Window, select MVC5 Controller-Empty and click Add. Name the Controller as ReportController. This creates a ReportController CS file inside Controllers folder and a Report view folder under the Views folder in the Solution Explorer.

Step Three: Add FlexReport Web API & FlexViewer

Right click Report view folder under Views in the solution explorer. Click Add -> Select Add New Item. The C1 ReportViewer Item Template is available under Web node and also Visual C# VB node.

Name it Index, and click OK. This opens a C1 MVC ReportViewer wizard:

Since we're working in an MVC5 application, we can configure both the FlexReport Web API and FlexViewer in the same project. Therefore, select the first option: Report in current project. Click on Browse, and select the FlexReport file that contains your reports. In the Report Name dropdown, select the report you want for initial display:

Click OK to close this window. The Wizard adds the following to the project:

Adds FlexReport Web API package.
Adds ReportsRoot folder inside Contents folder. This folder has your report file. If you need to add more reports files, you should do it in this folder.
A view page named Index inside the Report view folder.
The Index page has the Report Viewer initialized with necessary properties already set.


@{  
Layout = null;  
}  
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>C1 MVC ReportViewer</title>  

<meta http-equiv="X-UA-Compatible" content="IE=edge" />  

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />  

@Html.C1().Resources(typeof(C1Grid))  
@Html.C1().FlexViewerResources()  

</head>  
<body>  

@(Html.C1().ReportViewer().FilePath(@"~\\Content\\ReportsRoot\\FlexCommonTasks.flxr").ReportName(@"Simple List"))  

</body>  
</html>

If the report is using any local database file, be sure to copy that database file to the App_Data folder. The connection string of the report should point to the database file in this folder. This can be updated in the report file itself by opening it in XML editor inside Visual Studio:


<DataSources>  
<DataSource>  
<Name>Main</Name>  
<DataProvider>OLEDB</DataProvider>  
<ConnectionString>Provider=SQLNCLI11;Integrated Security=SSPI;Data Source=(localdb)\\v11.0;Initial File Name=|DataDirectory|\\C1Demo.mdf;Persist Security Info=False</ConnectionString>  
<RecordSource>Employees</RecordSource>  
</DataSource>  
</DataSources>

Run the App and navigate to the report; for example: http://localhost:5896/report.