How to use Bold Reports JavaScript ReportViewer with Blazor Server App

Bold Reports JavaScript ReportViewer can be used with Blazor applications using ASP.NET Core Blazor JavaScript interoperability. Refer to the following steps to use Bold Reports JavaScript ReportViewer with Blazor Server App template application.

Refer a scripts and CSS

• Add the following styles and scripts _host.cshtml available in pages folder.

<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/6.3.24/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />

<!-- Report Viewer component dependent script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/6.3.24/scripts/v2.0/bold.report-viewer.min.js"></script>

Adding a ReportViewer

• Add the following method in _host.cshtml to add our JavaScript ReportViewer with element using jQuery. This will be invoked using IJSRuntime from razor pages along with name of the report and element need to be created with ReportViewer.

<script>
        function RenderReportViewer (reportPathInfo, elementID) {
                $("#"+ elementID).boldReportViewer({
                reportServiceUrl: '/api/ReportApi',
                reportPath: reportPathInfo
                });  
        };
</script>

• Create div tag and code with razor page where you want to render the Report Viewer.

@page "/reporting"
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components
@inject IJSRuntime JSRuntime

<div id="reportViewerControl" style="width: 100%;height:800px" />

@code {

    private string reportPathInput = "Report1";

    // You have to call this method based on your need. It can called while loading the page or after selection the report.  
    public async void RenderReport()
    {
      await JSRuntime.InvokeVoidAsync("RenderReportViewer", reportPathInput , "reportViewerControl");
    }

    /// https://docs.microsoft.com/en-us/aspnet/core/blazor-reporting/components?view=aspnetcore-3.0
    /// https://github.com/aspnet/AspNetCore.Docs/tree/master/aspnetcore/blazor-reporting/common/samples/3.x/BlazorSample

    protected override void OnAfterRender(bool firstRender)
    {
        // If you want to load in intialization you can make use of this.
        //RenderReport();
    }
}

Create a Web API service

• The ReportViewer requires a Web API service to process the report files, and you should create ASP.NET Core Web API Service for server interaction and do the processing in API using Report Helper.

Refer ASP.NET Core Web API Service

You can ignore Enable Cross origin topic with documentation. since, the service with Blazor application and there is no need to enable cores.

• Also, ensure the following steps while creating the Web API service.

  1. You should route the API properly for interaction with attribute [Route("api/{controller}/{action}/{id?}")].
  2. [FromBody] should be used for PostReportAction for action method.
  3. [HttpPost] and [HttpGet] attributes should be used in respective report viewer interaction methods.

• You will get compatibility issues with ReportViewer service, which is created from default template. So, following changes required in application StartUp is based on application template type.

  1. By default, this template will not map controller in your application. So, you have to map controller manually using MapControllers() in app end points as follows in startup.cs.

     public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             {
                 if (env.IsDevelopment())
                 {
                     app.UseDeveloperExceptionPage();
                 }
                 else
                 {
                     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.UseRouting();
     
                 app.UseEndpoints(endpoints =>
                 {
                     endpoints.MapControllers();
                     endpoints.MapBlazorHub();
                     endpoints.MapFallbackToPage("/_Host");
                 });
             }