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

What You Will Need

• ActiveReports.NET
• Visual Studio 2022

Controls Referenced

• Blazor Report Viewer
• ASP.NET Middleware

Tutorial Concept
Blazor Reporting Tool - Learn how to build a powerful web reporting application using Blazor and a microservices-based reporting tool. This tutorial covers integrating a dynamic reporting engine into your Blazor app, enabling real-time data visualization and customized reporting for end-users.

---

In today’s web development landscape, building flexible and scalable applications is essential. Blazor, a framework from Microsoft, offers a compelling way to create client-facing applications using C#. When combined with microservices architecture, developers can build robust web reporting applications with streamlined maintenance and deployment. This blog delves into building a reporting app using Blazor and ActiveReports.NET, showing how to set up a reporting service as a microservice and integrate it into a Blazor application for enhanced scalability.

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:

<div class="code panel pdl conf-macro output-block" data-hasbody="true" data-macro-name="code">

<div class="codeContent panelContent pdl">

<div>

<div id="highlighter_960963" class="syntaxhighlighter sh-midnight nogutter  c#">

    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();

</div>

</div>

</div>

</div>

*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:

By integrating a Blazor reporting tool with microservices, developers can create a powerful and flexible reporting web application. This approach not only allows for independent service deployment and maintenance but also facilitates reusability across multiple projects. Leveraging Blazor’s capabilities and the modularity of microservices, this method enhances the scalability and versatility of reporting applications, providing a reliable solution for modern web development.