This article will guide you through an example of how you can implement our JSViewer web report viewer to create an ASP.NET 6.0 (or ASP.NET Core) report viewer application to allow your end users to view reports directly in their web browser.
Our JSViewer component can be used in a wide variety of project types, such as ASP.NET, pure JavaScript, Angular, React, Vue, and Blazor. Our example will, of course, cover ASP.NET in particular.
This article explicitly covers the viewer, so please check out our report designer pages for more information on designers if you want information on giving your users access to a full-fledged designer.
How To Embed JSViewer to Create Your Own ASP.NET 6.0 (or .NET Core) Report Viewer Application
Before we get started, you can find pre-configured projects for ASP.NET MVC, React, Angular, Vue, and Blazor on our ActiveReports Samples GitHub repository. Implement the JSViewer into one of your own pre-existing applications with these steps:
- Creating a New ASP.NET Project
- Configuring the JSViewer Middleware
- Add the JSViewer Package to the Application
Setting Up the JSViewer ASP.NET Core Middleware
First, we’ll need to set up the middleware for our JSViewer. These middleware components will handle HTTP requests and responses. The default code added by the ASP.NET Core Web App template in Visual Studio will set up the core of our request processing pipeline just fine, so let's start there.
Creating a New ASP.NET Project
1. Open Visual Studio and select “Create a new project”
2. Select ASP.NET Core Web App
3. Name the project, whatever you deem appropriate, and click “Next”
4. Select your target framework and uncheck “Configure for HTTPS”, then click “Create”
-
In this example, we will be selecting .NET 6.0
Configuring the JSViewer Middleware
Now we’ve got a good template to start with, so we can go ahead and start making some changes to get it up to speed on handling our web reporting needs.
1. Right-click the project in the Solution Explorer and select “Manage Nuget Packages”
2. Click “Browse” and then add the following package to the project:
GrapeCity.ActiveReports.Aspnetcore.Viewer
3. In the License Acceptance dialog that appears, click “I Accept”
4. Add a new folder called “Reports” in the application’s root directory and place any report you want to display in the viewer in this folder
-
FYI, this is far from the only way to make reports accessible to the report viewer component, but this is just a convenient and easy way to do it for our ASP.NET Core report viewer example
5. Make sure to set the “Build Action” property of any report files to “Embedded Resource”
6. If you are using a version of .NET older than .NET 6.0, replace the contents of the “Startup.cs” file with the following:
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
namespace JsViewer_Core
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
}
app.UseReporting(settings =>
{
settings.UseEmbeddedTemplates("JsViewer_Sample.Reports", this.GetType().Assembly);
settings.UseCompression = true;
});
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
});
}
}
}
-
Make sure that the correct namespace is provided in the first argument of “UseEmbeddedTemplates“ for the report. It should be “NameOfYourProject.Reports”
7. If you are targeting .NET 6.0 like we are, you will need to modify the “Program.cs” file instead as follows:
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
;
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseReporting(settings =>
{
settings.UseEmbeddedTemplates("JsViewer_Sample.Reports", System.Reflection.Assembly.GetEntryAssembly());
settings.UseCompression = true;
});
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.Run();
- Make sure that the correct namespace is provided in the first argument of “UseEmbeddedTemplates” for the report. It should be “NameOfYourProject.Reports”
Integrating With the Front End
Now that we have the middleware setup, we can move on to setting up the front end and start seeing things come into place. In our example, we will be covering setting this up with a plain ASP.NET 6.0 / JavaScript front end, but if you need help setting this up in other frameworks, you can follow these links to our documentation for Angular, React, and Vue.
Add the JSViewer Package to the Application
1. Open the “Tools” menu and select “NuGet Package Manager” > “Package Manager Console” and then run the following command in the console:
npm install @grapecity/ar-viewer
2. Copy the “jsViewer.min.js” and “jsViewer.min.css” files installed in the “node_modules\@grapecity\ar-viewer\dist” folder to the “wwwroot\js” and “wwwroot\css” folders in the application, respectively
- Note: You may need to open the project directory in the file explorer to see these files, as they may not show up in the Solution Explorer
3. Replace the code in the “Index.cshtml” file with the following:
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ActiveReports JSViewer</title>
<link rel="stylesheet" href="css/jsViewer.min.css" />
</head>
<body>
<div id="viewer-id" style="width: 100%; height: 100%;">
</div>
<!--reference to js file-->
<script src="js/jsViewer.min.js"></script>
<script type="text/javascript">
GrapeCity.ActiveReports.JSViewer.create({
element: '#viewer-id',
reportService: {
url: 'api/reporting',
},
reportID: 'MyReport.rdlx',
settings: {
zoomType: 'FitPage'
},
});
</script>
</body>
</html>
Replace the report name “MyReport.rdlx” after “reportID:” with the name of the report you put in the “Reports” folder
That’s it! You can go ahead and run the application now, and from here, you should be able to use the interface to load any reports you added to your project.
Additionally, if you’d like to load a particular report via code later, you can use the following code to do so:
var viewer = new GrapeCity.ActiveReports.JSViewer.create({
element: '#viewer-host'
});
viewer.openReport("DemoReport.rdlx");
As usual, if you are using Angular, React, or Vue, you can find the respective ways to do this in our documentation.