Video: Get Started with FlexViewer, an MVC Report Viewer

This four-minute video walks through how to add a FlexViewer control to your MVC app.

1. Inside Visual Studio, Click File > New Project
2. Under the Web Node, select C1 ASP.NET MVC 5 Web Application Template.
3. Name the project FlexViewerIntro and click OK.
4. In the Project Setting Wizard, check C1 FlexViewer Library. Click OK. This creates a new ASP.NET MVC 5 application using C1template and adds any relevant control references.
5. Rebuild the Project to restore all the missing packages.
6. From the Solution Explorer, right click the Controllers folder and select Add Controller from the context menu.
7. From the add Scaffold Window, select MVC5 Controller. Click Add.
8. Name the Controller ReportController. This creates a controller class and Report folder under Views. Save and close the Controller.
9. Under Views, Right Click Report Folder.
10. From the context menu, select Add New Item.
11. From the Add New Item window, select C1ReportViewer View Page and name it Index.
12. The C1 MVC ReportViewer wizard window opens.
13. Here you can choose to specify the report you want to display:
    • FlexReport from the current project
    • An SSRS Report
    • Or a FlexReport hosted in a separate Web API
14. We’ll display a FlexReport from the current project.
15. Browse to and Select the Report file. We’ll select a previously created report definition.
16. Select the Report name from the Report name dropdown.
17. Click OK.
18. This automatically performs several actions:
    • It adds the FlexReport Web API Nuget packages to the project.
    • It adds the selected report definition to the project.
    • It also creates a View with the ReportViewer control declared and its resources registered.
    • The ReportViewer control has the file path and report name property set.
    • The Report definition file is stored in the ReportsRoot folder under the content node. If you need to add more report definitions to the project, you should add it here.
19. If your report uses some local database, then you need to add the database file to App_Data folder. Since this report doesn’t use any local database, we don’t need to do that.
20. Now let’s run the app and see the report display.
21. Navigate to Report.
22. The FlexViewer displays the report.
23. The FlexViewer provides a number of tools to enhance your experience.
    • You can choose to Print the report.
    • Export to various formats such as Html, PDF, Excel, Images.
    • View in portrait or Landscape.
    • Page setup for printing.
    • Navigate tools to go to different pages.
    • Selection tools.
    • Continuous or Single page view
    • Adjust the page width.
    • Zoom in or Zoom out.
    • Full screen view to view the report without any clutter.
    • In the full screen view you can print, zoom in, zoom out or exit full screen using the floating menu.
24. The FlexViewer is a versatile control that offers many out of the box features, and, at the same time, allows you to display different reports and PDFs. Learn more at www.componentone.com.