How to use JavaScript ReportViewer in a Blazor WebAssembly application

To use the Bold Reports® JavaScript Report Viewer in a Blazor WebAssembly application, refer its scripts and styles in the client wwwroot\index.html, render it through ASP.NET Core Blazor JavaScript interoperability, and process reports in an ASP.NET Core hosted Web API service. Use the following steps with the Blazor Web Assembly App template application.

The Report Viewer requires a Web API service for report processing. Create the Blazor Web Assembly App with the ASP.NET Core Hosted configuration, so that the Blazor application has its own ASP.NET Core back end.

Refer a scripts and CSS

  • Add the following styles and scripts in client project wwwroot\index.html.
<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/15.1.10/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/15.1.10/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

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

How do I add the JavaScript Report Viewer to a Blazor WebAssembly application?

  • Add the following method in index.html to add the JavaScript Report Viewer to an element by using jQuery. Razor pages invoke this method through IJSRuntime with the report name and the element in which to render the Report Viewer.
<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 ReportViewer.
@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();
    }
}

Why does the JavaScript Report Viewer need a Web API service in a Blazor WebAssembly application?

  • The Bold Reports® Report Viewer requires a Web API service to process the report files. Create an ASP.NET Core Web API service for server interaction, and process the reports in the API with the Report Helper.

Refer ASP.NET Core Web API Service.

You can skip the CORS topic in that documentation, because the service runs within the Blazor application and does not need CORS.

  • 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 ReportViewer interaction methods.

  • A Report Viewer service created from the default template has compatibility issues. Make the following changes in the application startup, based on the application template type.

    1. You will get the 400 Bad request with service interaction due to the validation of null values with new version of ASP.NET Core. To avoid this issue, remove the [ApiController] attribute from the Report API service. Otherwise, set SuppressModelStateInvalidFilter to true in ConfigureApiBehaviorOptions to avoid this bad request. Update the API behavior options in the ConfigureServices method in Startup.cs of server project.

      public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc()
            .ConfigureApiBehaviorOptions(options =>
            {
                options.SuppressModelStateInvalidFilter = true;
            });

            services.AddResponseCompression(opts =>
            {
                opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                    new[] { "application/octet-stream" });
            });
        }

    2. The following option will be required to avoid the bad request. If you are making the file download application with your Blazor application using location.rel='nofollow' href.

      options.SuppressConsumesConstraintForFormFileParameters = true;
options.SuppressInferBindingSourcesForParameters = true;