This article will explain some of the key benefits of ActiveReports.NET as a premier .NET web reporting tool and then 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.
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:
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.
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”
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
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();
});
}
}
}
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();
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.
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
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>
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.
By embedding the customizable End-User Report Designer component in your desktop or web solution, you can give your users a tailored ad hoc report-creation experience.
Pick from layout-driven page reports, scrolling RDL reports, and code-based section reports to create a full-featured report library.
ActiveReports.NET supports many different export formats, such as PDF, Excel, Word, CSV, and more!
Conditionally format your .NET reports easily using expressions. Expressions are simple scripts that you can use to calculate values, concatenate strings, or set a condition under which a style is applied.
Table, Tablix, Charts, and other data regions support grouping and sorting. Create from simple tabular reports to complex multi-level grouped, sorted, and drill-down reports. Setting grouping, sorting, and drill-down is done by setting a single property.
Another way to create dynamic reports is to use Parameters. Parameters are prompts to take user input and filter the data to the desired volume.
If you’re interested in learning more, we highly recommend checking out the “Top .NET Reporting Features” section of our main product page to find many more examples of some of our flagship features. We also highly recommend looking at the documentation and demos pages directly.
If you have any questions, please feel free to reach out to us via support ticket or contact sales directly at us.sales@grapecity.com or 412-681-4343.
Embed professional .NET reports in your enterprise-level business apps. Download ActiveReports.NET Today!