JSViewer Vue(Core)
In This Topic
The sample demonstrates the use of GrapeCity ActiveReports JSViewer with an VueJS app and ASP.NET Core back end.
GrapeCity ActiveReports JSViewer
Note: To run this sample, you must have
- Visual Studio 2019 version 16.4 or newer.
- .NET Core 3.1 SDK (https://dotnet.microsoft.com/download) or later installed on your machine.
- .NET Core Hosting Bundle (https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/iis/?view=aspnetcore-3.1#install-the-net-core-hosting-bundle) (for deployment to IIS).
- Node.js 8.x or 10.x.
Sample Location
..\WebSamples14\JsViewerSamples\JSViewer_Vue(Core)
Details
When you run the sample, the JSViewer opens in your browser. The viewer provides links to reports to demonstrate GrapeCity ActiveReports JSViewer with a ReactJS app and the ASP.NET Core back end.
Clicking the report link in the left panel opens the report for preview. You can preview the following reports.
- AcmeStore.rdlx
- AnnualReport.rdlx
- Invoice.rdlx
- Invoice.rpx
- InvoiceList.rdlx
- Invoice_Colored.rpx
- Project & ResourceAnalysis - Staff Performance Analysis.rdlx
- Statistical analysis scatter plot.rdlx
- User defined report columns.rdlx
The project consists of the following elements.
- Controllers folder: This folder contains the HomeController that handles the user interaction and returns the main Index view.
- ClientApp folder: This folder contains a standard Angular CLI app that is used for all UI concerns.
- readme: This file contains the instructions on how to build and run the sample project.
- Startup.cs: This is the default startup file.
- wwwroot: Contains designer CSS and JavaScript files.