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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Report Viewer in Blazor Server App

Thread ID:

Created:

Updated:

Platform:

Replies:

149462 Sep 5,2019 07:43 AM UTC Mar 26,2020 08:08 AM UTC Report Platform 18
loading
Tags: General
Costa
Asked On September 5, 2019 07:43 AM UTC

Hi. It's possible to use ReportViewer in Blazor Server App?

Thank you.

Vinoth Srinivasan [Syncfusion]
Replied On September 5, 2019 10:56 AM UTC

Hi Costa, 
 
Thanks for your interest in Syncfusion components. 
 
We don't have ReportViewer control in Blazor components suite at the moment. We considered this as a feature request and logged on this in our feedback portal. You can keep track of this from the link below. 
 
 
If you have any more specifications to add to this feature, please share them in the comments section. 
 
Regards, 
Vinoth S. 


Costa
Replied On September 5, 2019 12:27 PM UTC

ReportViewer from "Essential JS 1 for ASP.NET Core" cannot be used in Blazor?

Vinoth Srinivasan [Syncfusion]
Replied On September 9, 2019 06:16 AM UTC

Hi Costa, 

Thanks for the update, 

Tag helpers available with Essential JS1 for ASP.NET Core is not supported with Blazor to add our ReportViewer component with Razor page. So, as of now we don’t have option to make use of our Essential JS1 for ASP.NET Core with Blazor for using our ReportViewer. 

Regards, 
Vinoth S. 


Lingaraj S [Syncfusion]
Replied On September 13, 2019 01:13 PM UTC

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, 

  1. 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.
 
    <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> 
 
  1. 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.
 
<script> 
        function RenderReportViewer (reportPathInfo, elementID) { 
                $("#"+ elementID).ejReportViewer({ 
                reportServiceUrl: '/api/ReportApi', 
                reportPath: reportPathInfo 
                }); 
        }; 
</script> 

  1. 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/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(); 
    } 
} 


  1. 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.
    1. We should route the Api as proper 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.
 
  1. 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.
 
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(); 
        } 


Note: This sample and steps explained using the Blazor application template of Visual Studio 2019 version 16.3 Preview 3. 

Regards, 
Lingaraj S. 


Costa
Replied On September 21, 2019 02:59 AM UTC

Thanks! It works)
But how to pass parameters to Reportviewer? (Blazor Server App Sample)

Lingaraj S [Syncfusion]
Replied On September 23, 2019 02:18 PM UTC

Hi Costa, 
 
Thanks for the update. 
 
You can make use of the parameters member to pass the report parameters value. Please find the modified sample in below link along with parameters, 
 
Regards, 
Lingaraj S. 


Frank Sebastian Franco Hernandez
Replied On November 26, 2019 04:16 PM UTC

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, 

  1. 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.
 
    <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> 
 
  1. 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.
 
<script> 
        function RenderReportViewer (reportPathInfo, elementID) { 
                $("#"+ elementID).ejReportViewer({ 
                reportServiceUrl: '/api/ReportApi', 
                reportPath: reportPathInfo 
                }); 
        }; 
</script> 

  1. 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/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(); 
    } 
} 


  1. 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.
    1. We should route the Api as proper 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.
 
  1. 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.
 
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(); 
        } 


Note: This sample and steps explained using the Blazor application template of Visual Studio 2019 version 16.3 Preview 3. 

Regards, 
Lingaraj S. 


Hello. Is there any way to replicate the WebAssembly sample in Visual Studio 16.3.10 (the project structure is different from the one shown in 16.3 Preview 3)? 

I tried to include the NuGet Package Syncfusion.Reporting.(Asp)Net.Core in my test app, showing me a warning on installation, and when I try to run the application, I get a compilation error, because the target isn't .NET Framework (WebAssembly compiles to .NET Standard).

Thanks in advance. 

Vinoth Srinivasan [Syncfusion]
Replied On November 27, 2019 11:04 AM UTC

Hi Frank/Costa, 

Sorry for the inconvenience. 

As per our plan of rebranding our Report Platform, we were introduced Bold Reports from Syncfusion. Based on this migration, we have unlisted the nuget packages of Report Platform and will not have the further feature updates with Syncfusion Report Platform from now onwards. So, you need to consider migrating the reporting components with Bold Reports libraries with changes in namespace and declarations for getting new feature updates. Please find the below documentations for migrating to Bold Reports. 


We have modified the previously shared samples with Bold Reports and it can be downloaded from below location. 


Regards, 
Vinoth S. 


Frank Sebastian Franco Hernandez
Replied On November 27, 2019 01:42 PM UTC

I mean, my WebAssembly Blazor project looks like the one attached in this message. What do I need to include for make the BoldReports NuGet package work? A Blazor server app?

Thanks in advance.

Attachment: BlazorTestSyncfusion_48f2f07d.zip

Vinoth Srinivasan [Syncfusion]
Replied On November 27, 2019 03:32 PM UTC

Hi Frank, 

Thanks for the update. 

It looks you have created Blazor WebAssembly App without ASP.NET Core hosted. As of now, our ReportViewer component can used in Blazor WebAssembly App by using ASP.NET Core hosted combination only. 

 

Regards, 
Vinoth S. 


Frank Sebastian Franco Hernandez
Replied On November 29, 2019 03:24 PM UTC

I made the changes needed on the project, but I've got "Object reference not set to an instance of an object" when I called my report without parameters, and I couldn't set any parameter inside the report. What can I be doing wrong?

Thanks in advance. 

Vinoth Srinivasan [Syncfusion]
Replied On December 2, 2019 07:18 AM UTC

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. 


Frank Sebastian Franco Hernandez
Replied On December 3, 2019 04:49 PM UTC

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. 


Good morning Vinosh,

The zipped file below contains the project with the report viewer control (and the RDL report) which gives me error. 

Thanks in advance for the assistance.

Attachment: BlazorTestSyncfusion_66c1e0d1.zip

Vinoth Srinivasan [Syncfusion]
Replied On December 4, 2019 12:21 PM UTC

Hi Frank, 

We have checked the mentioned issue with your shared report file. The mentioned issue occurs when you render the report with shared datasource. If you are running the local report file, then we need to pass the embedded connections for RDL report. If you want to load the shared datasource with report, then you can run the report from SSRS server in our ASP.NET Core Report Viewer control using blazer. 

Please find the below help documentation for how to pass the credentials for shared datasource. 

Regards, 
Vinoth S. 


Frank Sebastian Franco Hernandez
Replied On December 10, 2019 03:19 PM UTC

I've tried the local report scenario and it worked without any problem, using this code snippet in index.html:

function RenderReportViewer(reportPathInfo, elementID) {
            $("#" + elementID).ejReportViewer({
                reportServiceUrl: '/api/ReportApi',
                reportPath: reportPathInfo
            });
};

And this one in ReportApiController.cs:

public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            string basePath = _hostingEnvironment.WebRootPath;
            FileStream inputStream = new FileStream(basePath + @"\Report\" + reportOption.ReportModel.ReportPath + ".rdl", FileMode.Open, FileAccess.Read);
            reportOption.ReportModel.DataSourceCredentials.Add(new DataSourceCredentials("datasource_name", "datasourceuser", "datasourcepwd"));
            reportOption.ReportModel.Stream = inputStream;
        }


Now I need to connect to a SSRS 2016 report server and did all the things said in the Javascript report viewer tutorial, which is the one that best fits the existing platform in Blazor, but I got this error when I've connected to the report server:

{"inProgress":"completed","isReportLoad":false,"errorInfo":{"Code":"RV0571","Message":"Unhandled exception has occurred during 'report' 'report_name' loading.","Detail":"\r\nCould not connect with the Report Server Service.\r\n   at Syncfusion.Report.Core.Intenal.Server.SqlReportingServer2017.GetReportDefinition(String& exception)\r\n   at BoldReports.Intenal.Server.ServerReportProcessor.GetReportDefinition(String& exception)\r\n   at BoldReports.RDL.Data.ReportModel.ProcessServerReport()\r\n   at BoldReports.RDL.Data.ReportModel.ProcessReport()","Handled":false,"Exception":null},"serviceType":"NETCore"}

Is this related to the disclaimer on top of the .NET Core implementation?

Thanks in advance. 

Vinoth Srinivasan [Syncfusion]
Replied On December 11, 2019 09:42 AM UTC

Hi Frank, 

The Syncfusion ASP.NET Core .Net Core framework Report Viewer supports to load the SQL 2017 Reporting services API reports only. Because Microsoft has provided needed API Service access for only SSRS 2017 in ASP.NET core platform. Due to restrictions in API, the lower version of SSRS API Services are not accessible fully in ASP.NET Core platform. 

Regards, 
Vinoth S. 


Frank Sebastian Franco Hernandez
Replied On March 25, 2020 04:56 PM UTC

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. 


Attachment: BlazorTestSyncfusion3.2_de1c549b.7z

Vinoth Srinivasan [Syncfusion]
Replied On March 26, 2020 08:08 AM UTC

Hi Frank, 
 
We have validated the shared Blazor sample at our end and found that you have not passed the report stream to our ReportViewer for rendering the report. Due to this error has been occurred while initializing the report. We have modified your sample based on this and it can be downloaded from below location. 
 
Please find the below screenshot for your reference. 
 
 
Regards, 
Vinoth S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon