Blazor Server
AppBold 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.
_host.cshtml
available in pages folder.<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/6.3.16/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.16/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.16/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/6.3.16/scripts/v2.0/bold.report-viewer.min.js"></script>
_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>
@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();
}
}
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.
[Route("api/{controller}/{action}/{id?}")]
.[FromBody]
should be used for PostReportAction for action method.[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.
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");
});
}