ASP.NET MVC Controls
Manually Configuring ReportViewer
ASP.NET MVC Controls > Controls > FlexViewer > ReportViewer > Manually Configuring ReportViewer

FlexViewer is available as MVC control that can be used in an MVC applications to view reports using C1 Web API Report Services. Complete the following steps to use the control to view a report.

Note: The C1 ASP.NET MVC 5 Web Application and C1 ASP.NET Core MVC Application template for ASP.NET MVC Edition automatically registers the required resources, and adds the relevant references and packages to your application. Therefore, you only need to follow Steps 6 to 8 above if your application is created using ComponentOne template.

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

Step 1: Create an MVC Application

Create an ASP.NET Web Application (.NET Framework) using Visual Studio templates. For more information, see Configuring MVC application using Visual Studio template.

Back to Top

Step 2: License your application

  1. In the Solution Explorer, right click the project and select Add | New Item. The Add New Item dialog appears.
  2. In the Add New Item dialog, select C# | General and select Text File in the right pane.
  3. Name the text file as licenses.licx.
  4. In the licenses.licx file, add the following:
    licenses.licx
    Copy Code 
    C1.Web.Mvc.LicenseDetector, C1.Web.Mvc
C1.Web.Mvc.Viewer.LicenseDetector, C1.Web.Mvc.FlexViewers

    For more information on how to add license to your application, refer to Licensing.

Back to Top

Step 3: Add the relevant references to your application

Complete the following steps to add the ASP.NET MVC Edition references and FlexViewer references to your project.

  1. In the Solution Explorer, right click References and select Add Reference.
  2. Browse to the location- C:\Program Files (x86)\ComponentOne\ASP.NET MVC Edition\bin.
  3. Select C1.Web.Mvc.dll and C1.Web.Mvc.Finance.dll, and click Add.
  4. Set the Copy Local property of the C1.Web.Mvc.dll and C1.Web.Mvc.FlexViewer.dll to True.
  1. In the Solution Explorer, right click References and select Manage NuGet Packages.
  2. In NuGet Package Manager, select GrapeCity as the Package source. Search for C1.AspNetCore.Mvc package, and click Install. Refer to Configuring NuGet Package Sources for information on manually configuring GrapeCity NuGet source.
  3. To work with FlexViewer control in your application, add C1.AspNetCore.Mvc.FlexViewer package. Once you restore the packages, "C1.AspNetCore.Mvc.FlexViewer" gets added under the "dependencies" in project.json file.

    Note: Once you have added the resources to ASP.NET Core application, you can license the resources and your application using the GrapeCity License Manager. For more information, see Licensing topic.

Back to Top

Step 4: Configure the application to use FlexViewer

  1. From the Solution Explorer, expand the folder Views and double click the web.config file to open it.
  2. Add the following markups in <namespaces></namespaces> tags, within the <system.web.webPages.razor></system.web.webPages.razor> tags.
    HTML
    Copy Code 
    <add namespace="C1.Web.Mvc" />
<add namespace="C1.Web.Mvc.Viewer" />
<add namespace="C1.Web.Mvc.Viewer.Fluent" />
  1. From the Solution Explorer, expand the folder Views and double click the _ViewImports.cshtml file to open it.
  2. Add the following references to work with FlexViewer control in your ASP.NET Core application.                       
    _ViewImports
    Copy Code 
    @addTagHelper *, C1.AspNetCore.Mvc
@addTagHelper *, C1.AspNetCore.Mvc.FlexViewer

 

Back to Top

Step 5: Register Resources

Complete the following steps to register the required resources for using ASP.NET MVC FlexViewer control:

  1. From the Solution Explorer, open the folders Views | Shared.
  2. Double click _Layout.cshtml to open it.
  3. Add the following code between the <head></head> tags.
    _Layout.cshtml
    Copy Code 
    @Html.C1().Styles()
@Html.C1().Scripts().FlexViewer()
    _Layout.cshtml
    Copy Code 
    <c1-styles> <c1-scripts>
<c1-flex-viewer-scripts /></c1-scripts>

For more information on how to register resources for FlexViewer, refer to Registering Resources.

Back to Top

Step 6: 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 ReportController.

A new controller is added to the application within the folder Controllers.

  1. In the Solution Explorer, right click the folder Controllers.
  2. From the context menu, select Add | Controller... . The Add Scaffold dialog appears.
  3. Complete the following steps in the Add New Item dialog:
    1. Select the Controller tab towards left, and then select MVC Controller - Empty.
    2. Click Add, and then set a name for the controller. (for example: ReportController)
    3. Click Add.

A new controller is added to the application within the folder Controllers.

Back to Top

Step 7: 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: ReportController).
  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.
  5. Once the index.cshtml page is added to your project, add the following code to view your report in the FlexViewer.

A view is added for the controller. In the code below, we have specified the Service URL, FilePath, and Report Name.

Index.cshtml
Copy Code 
@(Html.C1().ReportViewer().ServiceUrl(@"http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/report").FilePath(@"ReportsRoot/FlexCommonTasks/FlexCommonTasks.flxr").ReportName(@"Simple List"))
  1. From the Solution Explorer, right click the folder Views and select Add | New Folder.
  2. Name the new folder. Provide the same name as the name of your controller, minus the suffix Controller (in our example: Report).
  3. Right click the Report folder, and select Add | New Item. The Add New Item dialog appears.
  4. Complete the following steps in the Add New Item dialog:
    1. Expand the Installed tab towards left, and select ASP.NET|MVC View Page.
    2. Set name of the view (for example: Index.cshtml).
    3. Click Add.
  5. Once the index.cshtml page is added to your project, add the following code to view your report in the FlexViewer.

A view is added for the controller. In the code below, we have specified the Service URL, FilePath, and Report Name.

Index.cshtml
Copy Code 
<c1-report-viewer file-path="ReportsRoot/FlexCommonTasks/FlexCommonTasks.flxr" 
report-name="Simple List" service-url="http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/report">
</c1-report-viewer>

A view is added for the controller.

Back to Top

Step 8: Build and Run the Project

  1. Click Build | Build Solution to build the project.
  2. Press F5 to run the project, and view your report in FlexViewer. For more information about FlexViewer, see FlexViewer Elements.
    Note: Append the folder name and view name to the generated URL (for example: http://localhost:1234/Report/Index) in the address bar of the browser to view the report.
Note: To know further, explore the detailed demo for using FlexViewer.

Back to Top

 

 

Copyright © GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback