Make a Web Reporting App Using a Blazor Reporting Tool & Microservices

"Microservices" architecture means designing software as a bunch of independently deployable services. This article gives an example of such a design for a web application built with the Blazor framework and ActiveReports.NET.

Ready to get started with ActiveReports .NET? Download a free trial today!

The Blazor framework allows building client-facing applications with C# instead of JavaScript. Blazor supports two hosting models:

1. Blazor Server: The handlers of client-side events, such as clicking on a button, run on the server-side. The interaction between the client and the server is performed with the SignalR framework. The server-side in this scenario is an ASP.NET Core application. 
2. Blazor Web Assembly: The entire application, its dependencies, and the .NET runtime are downloaded into the browser. The role of the server-side in this scenario is reduced to hosting the web assembly file. An ASP.NET Core web server isn't required, and it allows a serverless approach, for example, distributing the application from a CDN.

Both approaches have pros and cons described in detail in the documentation. 

A reporting web application built with ActiveReports.NET requires the Reporting Service, an ASP.NET middleware responsible for locating, running, and exporting reports. 
For a reporting web application that is built with Blazor Server hosting model, it's possible to set up the Reporting Service within the server-side ASP.NET Core application, but what if you want to take advantage of the Web Assembly hosting model and distribute your application via a CDN?

Reporting Service that runs and export reports can't be invoked from within the web assembly because it's not supported. CDN implies no code execution but distributing the static content. In that case, Reporting Service could be decoupled into a separate application, aka microservice. This approach works for both of the Blazor Hosting Models:                                

In addition, there are a couple of advantages of keeping Reporting Service in a separate application.

• Independent development and deployment: You don't have to re-build the client-facing app after updating an existing report or adding a new one
• Reusability: The same reporting service can serve as the report library for multiple web applications. For example, you could offer a web-based report designer

Let's build the reporting application with Blazor and microservice architecture with these two steps.

1. Building the Reporting Services Application

2. Building the Client-Facing Blazor Application

Building the Reporting Services Application

In Visual Studio 2022, create a new ASP.NET Core Web API Application, name it "BlazorReporting", select the .NET 6(Long-term support) framework, and uncheck all checkboxes on the "Additional Information" screen of the dialog.

Add the GrapeCity.ActiveReports.Aspnetcore.Viewer Nuget package into the newly created project.

Add a new Folder called "Reports" and add any existing report template to this folder. For example, the attached project uses the "Financial Reports - CashFlowReport.rdlx" report here.

Set Build Action for the report template file to "Embedded Resource".

Open the Program.cs file.

Replace the existing code with the following:

using GrapeCity.ActiveReports.Aspnetcore.Viewer;
 
var builder = WebApplication.CreateBuilder(args);
 
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", builder =>
    {
        builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost").AllowCredentials().AllowAnyMethod().AllowAnyHeader();
    });
});
builder.Services.AddReporting();
 
var app = builder.Build();
app.UseCors("AllowAll");
app.UseReporting(settings =>
{
    settings.UseEmbeddedTemplates("BlazorReporting.Reports", typeof(Program).Assembly);
    settings.UseCompression = true;
});
 
 
app.Run();

*Note: CORS configuration depends on the application requirements. Here is the simplest one that allows requests from any "localhost" origins.

Build the application.

Open the command line, navigate to the application's bin\Debug\net6.0 folder, and run BlazorReporting.exe.

The reporting service is now available via the default URL (http://localhost:5000/api/reporting/reports). You can try it in the browser (http://localhost:5000/api/reporting/reports/Financial Reports - CashFlowReport.rdlx/info).

Building the Client-Facing Blazor Application

In Visual Studio 2022, add the new Blazor Server App project into the solution, call it "BlazorReportingApp", select the .NET 6(Long-term support) framework, and uncheck all checkboxes on the "Additional Information" screen of the dialog.

Install the GrapeCity.ActiveReports.Blazor.Viewer package into the newly created project.

Add a new Razor Component in the Pages folder of the project, call it "ARViewer", and replace the default code with the following one:

@page "/arviewer"
@using GrapeCity.ActiveReports.Blazor.Viewer;
 
<div id="viewerContainer" style="height:800px;width:100%;">
    <ReportViewer ReportService="@_reportService" ReportName="@_report" > </ReportViewer >
</div>
 
 
@code {
    private ReportServiceSettings _reportService = new ReportServiceSettings() { Url = "http://localhost:5000" };
    private string _report = "Financial Reports - CashFlowReport.rdlx";
}

Add the link to the newly created page into the Shared\NavMenu.razor component:

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="arviewer">
                <span class="oi oi-list-rich" aria-hidden="true"></span> ArViewer
            </NavLink>
        </div>

Set the BlazorReportingApp as the Startup Project, run it, and click on the ARViewer item in the menu. Here is the expected result:

Ready to get started with ActiveReports .NET? Download a free trial today!