How to use JavaScript ReportViewer in Blazor Web Assembly App application

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 Web Assembly App template application.

ReportViewer requires a Web API service for report processing. So, you have to create the Blazor Web Assembly App along with ASP.NET Core Hosted configuration to have the ASP.NET Core back end with Blazor application itself.

Refer a scripts and CSS

• Add the following styles and scripts in client project wwwroot\index.html.

<link href="https://cdn.syncfusion.com/5.4.20/bold-reports/material/bold.reports.all.min.css"  rel="stylesheet" />
<script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js" type="text/javascript"></script>

<!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-circulargauge.min.js"></script>

<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-maps.min.js"></script>

<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.widgets.min.js"></script>

<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/bold.report-viewer.min.js"></script>

Adding a ReportViewer

• Add the following method in index.html 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 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();
    }
}

Create a Web API service

• The Report Viewer 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 ReportViewer 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. 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, you have to remove the [ApiController] attribute from Report API service. Otherwise, you have to set SuppressModelStateInvalidFilter to true in ConfigureApiBehaviorOptions to avoid this bad request. API behavior options need to updated in 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;