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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Report Platform
  4. Report Viewer with Razor Pages and Razor Page Model
If you became a customer of the Syncfusion Reporting Platform or the Report Viewer, Report Designer, or Report Writer components before October 2019 and have questions related to those products, you can request support through our forum system. However, please note that this support system is only for existing customers who are still using the Syncfusion Reporting Platform or its components and not for new customers looking for reporting products from Syncfusion.

For new customers or those with general reporting questions, we recommend contacting our support team at https://support.boldreports.com/, which is a separate brand created by Syncfusion for its reporting solutions. Our team will be happy to assist you with any questions you may have.

Thank you for choosing Syncfusion for your reporting needs.

Report Viewer with Razor Pages and Razor Page Model

In Thread 139097, a request was made to provide an example of using report viewer with razor pages and not MVC.  However, the example provided used a controller and a view to use report viewer.  I would love to see an example of using report viewer to print a local report using a razor page (example.cshtml) with a razor page model (example.cshtml.cs).  I attempted to use the sample on thread 139097 in a razor page model, but it throws an error "TypeLoadException:  The generic type 'System.Func `2' was used with an invalid instantiation in assembly 'System.Private.CoreLib, Version=4.0.0.0, Culture=neutral...

25 Replies
MM Mageshyadav M Syncfusion Team November 6, 2018 12:47 PM UTC

Hi Rob, 

We have validated the reported query at our end. We have created ASP.NET core standalone sample with razor page, and it can be download from below location, 


Regards, 
Mageshyadav.M 


RO Rob November 6, 2018 12:53 PM UTC

The provided example is once again using MVC.  Your example uses a controller and view.  I would like an example for a Razor page with a razor page model.  No controller and no view.  An asp.net core 2 razor page (razorpage.cshtml) with it's own page model in the same folder (razorpage.cshtml.cs).  Can you provide an example for this type of situation.

MM Mageshyadav M Syncfusion Team November 7, 2018 09:16 AM UTC

Hi Rob, 
 
Sorry for the inconvenience caused. 
 
We have shared the wrong sample in previous update mistakenly. We can create the Razor page for rendering the ReportViewer control as shown in below code snippets. 
 
Index.cshtml: 
@page 
@model IndexModel 
@{ 
    @ViewData["heading"]; 
} 
 
<style> 
    body, html, #reportviewer { 
        overflow: hidden !important; 
        height: 100%; 
        width: 100%; 
    } 
</style> 
 
<ej-report-viewer id="reportviewer1" report-service-url="../ReportApi" processing-mode="Remote" /> 
<ej-script-manager></ej-script-manager> 
 
 
Index.cshtml.cs 
using Microsoft.AspNetCore.Mvc.RazorPages; 
 
namespace ReportViewerCore.Pages 
{ 
    public class IndexModel : PageModel 
    { 
 
        public void OnGet() 
        { 
            ViewData["heading"] = "ReportViewer Sample"; 
        } 
    } 
} 
 
 
ReportApiController.cs: 
ReportViewer needs WebApi controller for rendering the report as shown in below code snippet. 
 
using System; 
using System.Collections.Generic; 
using Microsoft.AspNetCore.Mvc; 
using Syncfusion.EJ.ReportViewer; 
using Microsoft.Extensions.Caching.Memory; 
using Microsoft.AspNetCore.Hosting; 
using System.IO; 
 
namespace ReportViewerCore.API 
{ 
    public partial class ReportApiController : Controller, IReportController 
    { 
        private IMemoryCache _cache; 
        private IHostingEnvironment _hostingEnvironment; 
 
        public ReportApiController(IMemoryCache memoryCache, IHostingEnvironment hostingEnvironment) 
        { 
            _cache = memoryCache; 
            _hostingEnvironment = hostingEnvironment; 
        } 
 
        [HttpPost] 
        public object PostReportAction([FromBody] Dictionary<string, object> jsonResult) 
        { 
            return ReportHelper.ProcessReport(jsonResult, this, this._cache); 
        } 
 
        [ActionName("GetResource")] 
        [AcceptVerbs("GET")] 
        public object GetResource(ReportResource resource) 
        { 
            return ReportHelper.GetResource(resource, this, _cache); 
        } 
 
        [HttpPost] 
        public object PostFormReportAction() 
        { 
            return ReportHelper.ProcessReport(null, this, this._cache); 
        } 
 
        public void OnInitReportOptions(ReportViewerOptions reportOption) 
        { 
            string basePath = _hostingEnvironment.WebRootPath; 
            FileStream reportStream = new FileStream(basePath + @"\ReportRDL\GroupingAgg.rdl", FileMode.Open, FileAccess.Read); 
            reportOption.ReportModel.Stream = reportStream; 
 
        } 
 
        public void OnReportLoaded(ReportViewerOptions reportOption) 
        { 
 
        } 
    } 
} 
 
 
We have prepared the sample with Razor page in ASP.NET Core and it can be downloaded from below location. 
 
Regards, 
Mageshyadav.M 


RO Rob November 7, 2018 10:05 PM UTC

Thank you for the sample.  I cannot get your sample to run correctly.  Using the Google Chrome developer tools it displays the following error.  Failed to load resource: the server responded with a status of 404 (Not Found)  :63302/API/ReportApi/PostReportAction:1.  I am getting the same error when I use you sample code in my own application.  Any help is greatly appreciated.

MM Mageshyadav M Syncfusion Team November 8, 2018 06:24 AM UTC

Hi Rob, 
  
We have checked the mentioned problem with your shared details and the mentioned problem occurs when MapRoute is mismatching with report-service-url in our reportviewer controller. In previously shared sample contains only the controller name so we don’t need to change the MapRoute in startup.cs class file as shown in below code example. 
  
Index.cshtml 
Startup.cs 
<ej-report-viewer id="reportviewer1" report-service-url="../ReportApi" processing-mode="Remote" /> 
            app.UseMvc(routes => 
            { 
                routes.MapRoute( 
                    name: "default", 
                    template: "{controller}/{action=Index}/{id?}"); 
            }); 
  
If we are changing the API reference in report-service-url then we need to specify the MapRoute as shown in below code example. 
  
Index.cshtml 
Startup.cs 
<ej-report-viewer id="reportviewer1" report-service-url="../API/ReportApi" processing-mode="Remote" /> 
app.UseMvc(routes => 
            { 
                routes.MapRoute( 
                    name: "default", 
                    template: "API/{controller}/{action=Index}/{id?}"); 
            }); 
  
Also we need to ensure the controller name is same in both client and Controller side as shown in below code example. 
  
Index.cshtml 
Startup.cs 
<ej-report-viewer id="reportviewer1" report-service-url="../API/ReportApi" processing-mode="Remote" /> 
    public partial class ReportApiController : Controller, IReportController 
    { 
         ......                                                                                                                                    }  
  
If the issue still persist then can you please share your index.cshtml, startup.cs and ReportApiController.cs to validate the mentioned problem at our end. 
  
Regards, 
Mageshyadav.M 


RO Rob November 8, 2018 01:48 PM UTC

Thank you very much!  I know have this working with your assistance.  One final question is passing a querystring to the report parameter.  How is this done with our current sample?  I would like to pass an id to the report parameter.  I read through the documentation and it appears this is done in the OnInitReportOptions, however, the documentation sample does not appear to work for me.

MM Mageshyadav M Syncfusion Team November 9, 2018 09:22 AM UTC

Hi Rob, 
 
Can you please confirm your requirement based on below scenario’s. 
 
  1. Are you trying to pass the Default value for report during ReportViewer control initialization ?
  2. Are you trying to changing the parameter value dynamically after ReportViewer control initialized ?
  3. Are you trying to pass the parameter default values from client side to API Controller side to do some operations and set the parameter in controller side ?
 
Based on your confirmation of your requirement, we will update you modified sample achieving your requirement. 
 
Regards, 
Mageshyadav.M 


RO Rob November 9, 2018 02:32 PM UTC

Thank you for the reply!

I am passing an ID to the report in the URL.  For example http://my.url/PrintLPForm?memid=30664.  The 30664 is the record id of a member in our database.  The report will pull the data for the report based on the record ID.  I have a parameter configured on the report for memid.  I am wanting to know how to do that.  From what I can gather in the forums and on the documentation, this may need to be in the OnInitReportOptions, but I am not sure and was hoping for you advice or sample.  Thank you.

MS Mahendran Shanmugam Syncfusion Team November 13, 2018 12:13 PM UTC

Hi Rob, 

We are able to pass and get the report parameter values with using the “ajaxBeforeLoad” in reportloaded method at controller side(Example: In our sample we are using the CustomerID as parameter). We have prepared a simple sample to load the RDLC report by passing the parameter from client to Report Controller by passing using “ajaxBeforeLoad” event as shown in below code example.  

Index.html 
<div style="height: 525px;width: 100%;"> 
    <ej-report-viewer id="reportviewer1" report-service-url="../Home" processing-mode="Local" rendering-begin="renderingBegin" ajax-before-load="ajaxBeforeLoad" /> 
</div> 
 
<script type="text/javascript"> 
 
    function ajaxBeforeLoad(event) { 
        var parameters = [{ 
            name: 'CustomerID', 
            labels: ['29889'], 
            values: [29889], 
            nullable: false 
        }]; 
        event.data = parameters; 
    }; 
 
</script> 
<ej-script-manager></ej-script-manager> 


HomeController.cs 
public partial class HomeController : Controller, IReportController 
    { 
        private IMemoryCache _cache; 
        private IHostingEnvironment _hostingEnvironment; 
        public string DefaultParam = null; 
 
        public HomeController(IMemoryCache memoryCache, IHostingEnvironment hostingEnvironment) 
        { 
            _cache = memoryCache; 
            _hostingEnvironment = hostingEnvironment; 
        } 
 
        [HttpPost] 
        public object PostReportAction([FromBody] Dictionary<string, object> jsonResult) 
        { 
            if (jsonResult.ContainsKey("CustomData")) 
            { 
                DefaultParam = jsonResult["CustomData"].ToString(); 
            } 
 
            return ReportHelper.ProcessReport(jsonResult, this, this._cache); 
        } 
 
        [ActionName("GetResource")] 
        [AcceptVerbs("GET")] 
        public object GetResource(ReportResource resource) 
        { 
            return ReportHelper.GetResource(resource, this, _cache); 
        } 
 
        [HttpPost] 
        public object PostFormReportAction() 
        { 
            return ReportHelper.ProcessReport(null, this, this._cache); 
        } 
 
        public void OnInitReportOptions(ReportViewerOptions reportOption) 
        { 
            string basePath = _hostingEnvironment.WebRootPath; 
            FileStream inputStream = new FileStream(basePath + @"\ReportsTemplate\Region.rdlc", FileMode.Open, FileAccess.Read); 
            reportOption.ReportModel.Stream = inputStream; 
        } 
 
        public void OnReportLoaded(ReportViewerOptions reportOption) 
        { 
            var parameters = new List<ReportParameter>(); 
            if (DefaultParam != null) 
            { 
                parameters = JsonConvert.DeserializeObject<List<ReportParameter>>(DefaultParam); 
            } 
 
            if (parameters != null && parameters.Count > 0) 
            { 
                reportOption.ReportModel.DataSources.Clear(); 
                reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "StoreSales", Value = StoreSales.GetData(Convert.ToInt32(parameters[0].Values[0])) }); 
            } 
        } 
    } 

We have prepared the sample to get the report parameter from client side to controller side and it can be downloaded from below location. 

Please let us know if you have any clarification. 

Regards, 
Mahendran S. 


RO Rob November 13, 2018 11:50 PM UTC

Again, your example is using MVC.  I am using Razor Pages with a Razor Page Model and a WebAPI.  I am not supplying a new datasource to my report.  My report already has a data source.  I am only passing 1 parameter in the URL, as I mentioned.   Your sample is supplying all of the data in a new datasource.  Can you provide me with a simple example, without adding a new datasource where I am simply passing one parameter to the report?

MM Mageshyadav M Syncfusion Team November 14, 2018 10:32 AM UTC

Hi Rob, 
 
Sorry for the inconvenience caused, 
 
We can able to get the parameter from URL and pass that parameter to report parameter using “ajaxBeforeLoad” event in our ASP.NET Core Razer page as shown in below code example 
 
Index.cshtml 
   <ej-report-viewer id="reportviewer1" report-service-url="../ReportApi" processing-mode="Remote" ajax-before-load="ajaxBeforeLoad" /> 
    <script type="text/javascript"> 
        var parameters = []; 
        params = getParameters(); 
 
        for (var i = 0; i < params.length; i++) { 
            parameters.push({ name: params[i].name, labels: [params[i].value], values: [params[i].value], nullable: "false" });// pass the parameter values  
        } 
 
        function getParameters() { 
            var parameters = window.location.search.substr(1);//get the parameter values from url 
            var listParams = []; 
            if (parameters != "") { 
                var splitValues = parameters.split("&"); 
                for (var i = 0; i < splitValues.length; i++) { 
                    var tempValue = splitValues[i].split("="); 
                    listParams.push({ name: tempValue[0], value: tempValue[1] });// sepearte the name and value of the parameter 
                } 
            } 
            return listParams; 
        } 
 
        function ajaxBeforeLoad(event) { 
            event.model.parameters = parameters; 
        }; 
 
    </script> 
    <ej-script-manager></ej-script-manager> 
 
We have prepared the sample for your reference and it can be downloaded from below location. 
 
Note: Please use the below url’s examples for rendering the report in our sample. 
 
Output snap: 
 
 
Regards, 
Mageshyadav.M 


RO Rob November 16, 2018 11:52 PM UTC

Thanks again for your help.  I have used your example, but now I am getting an error.  Illegal return statement in the PostReportAction.  I am using the code from the sample.

[HttpPost]
        public object PostReportAction([FromBody] Dictionary<string, object> jsonResult)
        {
            return ReportHelper.ProcessReport(jsonResult, this, _cache);
        }  

Any further assistance is greatly appreciated 

MM Mageshyadav M Syncfusion Team November 19, 2018 06:14 AM UTC

Hi Rob, 
 
We are unable to reproduce the issue but we suspect for version mismatch problem. Please ensure the script (ej.web.all.min.js) version and Syncfusion.EJ.ReportViewer.AspNet.Core version referred are same in your application. 
 
 
 
If the issue still persists, can you please share us simple modified sample which reproduces reported issue on your side to validate further and provide solution. 
 
Regards, 
Mageshyadav.M 


RO Rob November 23, 2018 08:57 PM UTC

Thank you.  I have checked my versions as you have mentioned.  I have put this in a sample project and it is attached.  In the sample project, I am still getting the same error.  I look forward to your response.  Thank you.

Attachment: RobTestReport_68c0dac2.zip

MS Mahendran Shanmugam Syncfusion Team November 26, 2018 12:58 PM UTC

Hi Rob, 

We have checked the mentioned problem with your shared files. This issue may occurs when the script and assemblies versions are mismatching as shown in below snap. 
 

In your sample you were referred the 16.3.0.21 for script and Syncfusion.EJ.ReportViewer.AspNet.Core assembly version is 16.3.0.30. So can you please change to 16.3.0.29 version of script and NuGet assemblies in your sample as shown in below snap. 
 

We have modified your sample and it can be downloaded from below location. 

If issue is still persists then can you please share issue snap and it is very helpful finding the root cause at our end. 

Regards, 
Mahendran S. 


RO Rob November 26, 2018 02:16 PM UTC

Thank you for the additional information.  I have made the changes you suggested.  I no longer get an error, however the report does not load.  It only shows a button that says View Report.  When I click the button, it shows a field for my parameter.  When I enter data into the parameter field and hit the View Report button, nothing happens.



MS Mahendran Shanmugam Syncfusion Team November 27, 2018 08:45 AM UTC

Hi Rob, 

We have checked the mentioned problem with your shared file but the sample is working properly with getting the Parameter from URL. So can you please confirm the below attached sample is working or not at your end. 

Note: Please use the below url’s examples for rendering the report in above shared sample.  

If the issue is still persists then can you please revert the above sample with issue reproducible case and also please share the video for this issue to validate the mentioned problem at our end. 

Regards, 
Mahendran S. 


RO Rob November 27, 2018 03:15 PM UTC

The report does not display, although it is putting the correct item in the parameter box.  See the screenshot.



MS Mahendran Shanmugam Syncfusion Team November 28, 2018 07:04 AM UTC

Hi Rob,  
 
A support incident to track the status of report not loaded when passing the Default parameter value has been created under your account. Please log on to our support website to check for further updates.  
   
 
Regards,  
Mahendran S.  


CO Costa replied to Mahendran Shanmugam March 6, 2019 06:34 AM UTC

Hi Rob, 

We have checked the mentioned problem with your shared file but the sample is working properly with getting the Parameter from URL. So can you please confirm the below attached sample is working or not at your end. 

Note: Please use the below url’s examples for rendering the report in above shared sample.  

If the issue is still persists then can you please revert the above sample with issue reproducible case and also please share the video for this issue to validate the mentioned problem at our end. 

Regards, 
Mahendran S. 


Hi. 
1) How to dynamically change report parameters using inputs in page and refresh the report viewer dynamically on input changes?
2) In your example, there are breakpoints in the Javascript code in the Index.cshtml file. If they work for you, please tell me how you achieved it. For me, these breakpoints do not work in Visual Studio 2017.


MM Mageshyadav M Syncfusion Team March 6, 2019 09:49 AM UTC

Hi Rob, 
 
Please find the below response for your queries. 
 
Query 
Response 
1) How to dynamically change report parameters using inputs in page and refresh the report viewer dynamically on input changes? 
We can able to dynamically change the report parameter. Please find the below KB documentation for how to dynamically change the parameters at client side. 
 
 
2) In your example, there are breakpoints in the Javascript code in the Index.cshtml file. If they work for you, please tell me how you achieved it. For me, these breakpoints do not work in Visual Studio 2017. 
 
We need to enable script debugging in VS 2017. Please find the below steps for how to enable the script debugging. 
 
Step 1:Click the Tools tab and click the option button as shown in below snap. 
 
 
 
Step 2: In Options window open the Debugging section and Enable the Script debugging as shown in below snap. 
 
 
 
Regards, 
Mageshyadav.M 


CO Costa March 6, 2019 02:52 PM UTC

Thanks. 
1) Example is helpful.
2) This option already checked, but breakpoints in Javascript in .cshtml is not worked: