We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
<link rel='nofollow' href="https://cdn.syncfusion.com/4.1.0.25/js/reports/material/ej.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>
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.reporting.common.min.js"></script>
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.reporting.widgets.min.js"></script>
<!--Render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.chart.min.js"></script>
<!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.lineargauge.min.js"></script>
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.circulargauge.min.js"></script>
<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.map.min.js"></script>
<!-- Report Viewer component script-->
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/ej.report-viewer.min.js"></script> |
|
<script>
function RenderReportViewer (reportPathInfo, elementID) {
$("#"+ elementID).ejReportViewer({
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/components?view=aspnetcore-3.0
/// https://github.com/aspnet/AspNetCore.Docs/tree/master/aspnetcore/blazor/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();
}
}
|
|
Balzor Web Assembly App (ASP.NET Core Hosted) template |
You will get the 400 Bad request validation with service interaction due the validation of null values with new version of ASP.NET Core. To avoid this issue, you have to consider to remove [ApiController] attribute from ReportApi servicer otherwise we have to consider to set SuppressModelStateInvalidFilter as true with 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().AddNewtonsoftJson()
.ConfigureApiBehaviorOptions(options =>
{
options.SuppressModelStateInvalidFilter = true;
});
services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
}
Below 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; |
|
Blazor Server App |
Be default this template not map your controller in your application. So, we have to map controller manually using MapControllers() in app end points as like below 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");
});
}
Default Json serialization will not be used by default in the service interaction for this template, we need to consider to add AddNewtonsoftJson() with service as like below. We will not get AddNewtonsoftJson() extension method by default with service , we need to add a package reference Microsoft.AspNetCore.Mvc.NewtonsoftJson to get this extension method.
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
services.AddMvc().AddNewtonsoftJson();
} |
Hi Costa,
Please ignore our previous update,
You can make use of our Report Platform JavaScript package to add the ReportViewer with Blazor application using ASP.NET Core Blazor JavaScript interop and report service can be created in ASP.NET Core using Syncfusion.Reporting.Net.Core package. Refer the below steps to add our ReportViewer with your Blazor application,
- If you creating the application using Blazor Web Assembly App (ASP.NET Core Hosted) template then add the below styles and scripts in client project wwwroot\index.html. If you are creating the application with Blazor Server App template then add the below styale and scripts in _host.cshtml available in pages folder.
- Add the below method in index.html/_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.
- Create div tag and code with razor page where you want to render the ReportViewer.
- The Report Viewer requires a Web API service to process the report files. Refer Create ASP.NET Core WebAPI service to create the ReportViewer supported service for server interaction and do the processing in API using Report Helper. You can ignore Enable Cross origin topic with documentation since we will created service with the Balzor only and there is no need to enable cores. Also, make sure the below while creating the service.
- We should route the Api as proper for interaction with attribute [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.
- We will get compatibility issues with ReportViewer service which is created from default template. So, below changes required the in application StartUp based on application template type.
public void ConfigureServices(IServiceCollection services){services.AddMvc().AddNewtonsoftJson().ConfigureApiBehaviorOptions(options =>{options.SuppressModelStateInvalidFilter = true;});services.AddResponseCompression(opts =>{opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[] { "application/octet-stream" });});}Below 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;
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");});}Default Json serialization will not be used by default in the service interaction for this template, we need to consider to add AddNewtonsoftJson() with service as like below. We will not get AddNewtonsoftJson() extension method by default with service , we need to add a package reference Microsoft.AspNetCore.Mvc.NewtonsoftJson to get this extension method.
public void ConfigureServices(IServiceCollection services){services.AddRazorPages();services.AddServerSideBlazor();services.AddSingleton<WeatherForecastService>();services.AddMvc().AddNewtonsoftJson();}
Blazor Server App Sample : https://www.syncfusion.com/downloads/support/forum/147283/ze/ReportViewerServerApp-1602143609.zipBlazor Web Assembly App Sample : https://www.syncfusion.com/downloads/support/forum/147283/ze/ReportViewerClientServerApp-926813653.zip
Note: This sample and steps explained using the Blazor application template of Visual Studio 2019 version 16.3 Preview 3.
Regards,Lingaraj S.
Hi Frank,
We were not able to reproduce the mentioned “Object reference not set to an instance of an object” issue when rendering the report in Report Viewer using Blazor. So, could you please share your issue reproducible report file and client-side code to check how you are specifying the Report Viewer control to validate the mentioned problem at our end.
Regards,Vinoth S.
Hi again,
I have migrated my project to Blazor's latest version (updated Bold Reports at the same time), using the techniques I learned in this topic, but I'm getting this error:
What can be a possible workaround to fix this? Attached to this message there is my migrated project.
Do you have a Blazor Server Side RDLC example?
Thanks,
Dave
Hi Manoranjan ,
Did you have the complete VS Project sample code for Blazor Server + Bold report + RDLC ? I follow the help page but got the exception Unknown Error with Report Intialization .
Thanks!
Jacky
|
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
string basePath = _hostingEnvironment.WebRootPath;
reportOption.ReportModel.ProcessingMode = ProcessingMode.Local;
FileStream inputStream = new FileStream(basePath + @"\resources\" + reportOption.ReportModel.ReportPath + ".rdlc", System.IO.FileMode.Open, System.IO.FileAccess.Read);
} |
Hi Vinoth ,
It's work , Thank for your fast reply.
I think follows help may miss the assign : reportOption.ReportModel.Stream
Regards.
Jacky
