I am working on a Blazor Server app using VS2022, NetCore 7 and Syncfusion Controls, all updated to the latest versions. I included BoldReports using your sample code from here (or also from this link) and it works ok. However, if I just add Syncfusion Blazor (without any control installed) it triggers an error before loading the report. I was able to fix it using your solution from this link here and the error was gone. However, after I installed BoldReports on another Blazor Server app that has a lot of Syncfusion controls, the same error appeared. At this point, it seems like the problem is in my app. So, before I start tearing it apart to find where it is I would like to know if I have done everything correct or if there is anything else that I am missing. Thanks so much.
@using Microsoft.AspNetCore.Components.Web
@namespace RPManager.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base rel='nofollow' href="~/" />
<link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />
<link rel='nofollow' href="css/site.css" rel="stylesheet" />
<link rel='nofollow' href="RPManager.styles.css" rel="stylesheet" />
<link rel='nofollow' href="css/custom.css" rel="stylesheet" />
<link rel='nofollow' href="css/syncfusion.css" rel="stylesheet" />
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
<!-- BEGIN BOLD REPORT VIEWER SCRIPTS -->
<link rel='nofollow' href="https://cdn.boldreports.com/2.2.32/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />
<link rel='nofollow' href="https://cdn.boldreports.com/2.2.32/content/material/bold.theme.compatibility.min.css" rel="stylesheet" />
<link rel='nofollow' href="https://cdn.boldreports.com/2.2.32/content/material/bold.reportdesigner.compatibility.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/2.3.26/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/2.3.26/scripts/common/bold.reports.widgets.min.js"></script>
<!--Used to render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.boldreports.com/2.3.26/scripts/data-visualization/ej.chart.min.js"></script>
<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/2.3.26/scripts/bold.report-viewer.min.js"></script>
<!-- Blazor interop file -->
<script src="~/scripts/boldreports-interop.js"></script>
<!-- END BOLD REPORT VIEWER SCRIPTS -->
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
@RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a rel='nofollow' href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<persist-component-state /> <!-- <== relevant tag helper -->
<script src="_framework/blazor.server.js"></script>
</body>
</html>
An error has occurred. This application may no longer respond until reloaded.
An unhandled exception has occurred. See browser dev tools for details.
The sample code you provided in this link here is missing how to call the script from the report control page.
Hi Ben Junior,
Thanks for contacting Bold Reports support.
We have tested the reported issue with the shared information; you have used the lower script version. Could you please test with the latest Bold Reports script and NuGet version? We have prepared and attached a sample application in .NET 7 Blazor application for your reference. Please check this sample and confirm whether the issue reproduced in your end or not. If the issue is not reproduced with our sample, share the issue reproducible sample with us for further validation.
Regards,
Arumugasami M
Hi Arumugasami M
Everything is working fine now. I also updated the scripts to the latest version of BoldReports using the attached sample. Thanks so much for your assistance
Best regards,
Ben Junior
P.S. The problem that I was having in one of my specific apps that was preventing BoldReports to run was caused by some scripts in the _Host.cshtml that were needed to run a DropDown menu on the Main Page.
Once I got rid of them the BoldReports worked fine.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
Ben Junior,
We are glad to hear that the reported issue has been resolved on your end. If you face any other issues, we suggest you open a new ticket using your account.