Create a new Report Viewer using a Razor Pages template

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.

First, in the project wizard screen, 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.

Name it “ReportViewer” and click Add. This opens C1 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

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:

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:

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

Try ComponentOne ASP.NET MVC Edition today