How to use Bold Reports^® JavaScript ReportViewer with Blazor Server Application

To use the Bold Reports^® JavaScript Report Viewer in a Blazor Server application, refer its scripts and styles in _host.cshtml, render it through ASP.NET Core Blazor JavaScript interoperability, and create an ASP.NET Core Web API service to process reports. Use the following steps with the 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/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 Server application?

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

Why does the JavaScript Report Viewer need a Web API service in a Blazor Server 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 report viewer 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. By default, this template will not map controller in your application. So, you have to map controller manually using MapControllers() in application 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");
                 });
             }