In this blog post, we'll walk through the newly released ReportViewer item template for ASP.NET Core Razor Pages application. This item template lets you quickly add and configure the page to preview FlexReport reports inside FlexViewer. The item template is also available to configure FlexViewer to preview PDF.

When you create a new ASP.NET Core project using the C1 ASP.NET Core Project templates, the template handles resource registration, licensing, and referencing for ComponentOne controls.

Open the template

First, in the project wizard screen, check Razor Pages.

Check Razor Pages

When the project is created, license the app using the License Manager.

Next, right-click on the Pages folder, and select Add New Item.

In the Add New Item window, select C1ReportViewer View Page.

Select C1ReportViewer

Name it “ReportViewer” and click Add. This opens C1 MVC ReportViewer window.

MVC ReportViewer window

In the Service URL box, add the url of the hosted FlexReport WebAPI. Here we're using the hosted FlexReport Web API from our demos application service: http://demos.componentone.com/ASPNET/c1webapi/4.0.20173.114/api/report

Provide the service URL

Next, add the report folder path to the Report Path prompt. Click Connect. This connects to the server and displays the report folder.

Navigate to the folder that has the report file:

Select the report file

Click OK.

This creates the ReportViewer.cshtml Razor Page with relevant tag helper code for report viewer and sets its report-file-path, report-name and service-URL property:

Tag Helper code

Run the app and navigate to ReportViewer to view the report.

View the report in ReportViewer

Try ComponentOne ASP.NET MVC Edition today