How to Build an ASP.NET MVC Report Viewer Application

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 9.0 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. Of course, our example will cover ASP.NET MVC/Razor Pages 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.

Embed professional .NET reports in your enterprise-level business apps. Download ActiveReports.NET Today!

How to Embed JSViewer to Create Your Own ASP.NET 9.0 (or .NET Core) Report Viewer Application

Before we get started, if you’d prefer, you can download our completed demo project, and you can also find pre-configured projects for ASP.NET MVC, React, Angular, Vue, and Blazor on our ActiveReports Samples GitHub repository. Below, we will cover how to 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
• Feel free to use either the (Razor Pages) or (MVC) version

3. Name the project whatever you deem appropriate, and click “Next”
4. Select your target framework, then click “Create”
• In this example, we will be selecting .NET 9.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 ASP.NET Core report viewer 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:

MESCIUS.ActiveReports

3. In the License Acceptance dialog that appears, click “I Accept”
4. Follow the same steps again, but instead for the following package:

MESCIUS.ActiveReports.Aspnetcore.Viewer

5. 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
• If you don’t have a sample report to work with, you can get our sample Invoice.rdlx
• 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

6. Update your “Program.cs” file with the following changes denoted with “********”:

//********
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
using System.Text;

var builder = WebApplication.CreateBuilder(args);

//********
// Register character encodings
Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);

// Add services to the container.
builder.Services.AddControllersWithViews();

//********
// Register the Report Viewer service
builder.Services.AddReportViewer();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/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.UseRouting();
app.UseAuthorization();
app.MapStaticAssets();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}")
    .WithStaticAssets();

//********
// Add the Report Viewer middleware to the request pipeline
app.UseReportViewer(config =>
{
	var rootDir = new DirectoryInfo(Path.Combine(app.Environment.ContentRootPath, "Reports"));
	config.UseFileStore(rootDir);
});

app.Run();

All sections added specifically for ActiveReports are denoted with ********. The rest of the lines are included by the default ASP.NET Core Web App (MVC) project template. If you are using Razor Pages, it will look slightly different, but the process is effectively identical.

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 cover setting this up with a plain ASP.NET 9.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 i @mescius/activereportsnet-viewer

2. Copy the “jsViewer.min.js” and “jsViewer.min.css” files installed in the “\node_modules\@mescius\activereportsnet-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. Add the following to your “Index.cshtml” file:

<link rel="stylesheet" href="css/jsViewer.min.css" />
<body onload="loadViewer()">
    <div style="height:100vh;width:100%" id="viewerContainer"></div>
    <script type="text/javascript" src="js/jsViewer.min.js"></script>
    <script type="text/javascript">
        let viewer;
        function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
            reportService: {
                url: 'api/reporting',
            },
            reportID: 'Invoice.rdlx',
            settings: {
                zoomType: 'FitPage'
            }
            });
        }
    </script>
</body>

Replace the report name “Invoice.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 you should see the report file you placed in your "Reports" folder render in the ASP.NET web report viewer.

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.

Using the JSViewer with ASP.NET Core reporting provides a streamlined and efficient way to integrate powerful reporting capabilities into your web applications. By following the steps outlined in this article, you can easily set up an ASP.NET Core report viewer to display reports directly in the browser, offering your users a seamless and interactive experience. Whether you're building new applications or enhancing existing ones, ActiveReports.NET and its JSViewer component provide a flexible, high-performance solution for all your reporting needs across various frameworks. 

Key Features of ActiveReports.NET

Ad-Hoc Reporting for End-Users

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.

Multiple Report Types

Pick from layout-driven page reports, scrolling RDL reports, and code-based section reports to create a full-featured report library.

Export to Multiple Formats

ActiveReports.NET supports many different export formats, such as PDF, Excel, Word, CSV, and more!

Conditional Formatting

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.

Grouping and Sorting

Table, Tablix, Charts, and other data regions support grouping and sorting. Create everything 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.

Parameterized Reports

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.

So Many More!

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@mescius.com or 412-681-4343.

Embed professional .NET reports in your enterprise-level business apps. Download ActiveReports.NET Today!