Hello,
I have an ASP.NET MVC web application with several modules.
I would like to add a new statistics module contains multiple reports and only use the view part in this application (Telerik MVC HTML5 Report Viewer)
Another solution includes the REST service for report generation and also the definition of reports using the Standalone designer.
In the first application, this is my link to myModule in _Layout.cshtml
@Html.ActionLink("Account List", "AccountList", "Home", null, new { @class = "sidebar-link", id = "AccountListSide" })
this is the call of my action method in HomeController.cs:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace FirstApp.Controllers{ public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult AccountList() { return View(); } }}
this is my report Viewer: Home/AccountList.cshtml
@using Telerik.Reporting@using Telerik.ReportViewer.Mvc@{ Layout = null;}<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Telerik MVC HTML5 Report Viewer</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <script src="~/Scripts/jquery-3.5.1.min.js"></script> <link href="~/Content/kendo/2020.3.915/kendo.common.min.css" rel="stylesheet" /> <link href="~/Content/kendo/2020.3.915/kendo.blueopal.min.css" rel="stylesheet" /> <style> #reportViewer1 { position: relative; width: 1300px; height: 900px; font-family: Verdana, Arial; } </style> <!--If Kendo is used it should be added before the report viewer.--> <script src="@Url.Content("http://localhost:59374/api/reports/resources/js/telerikReportViewer-15.0.21.120.min.js/")"></script></head><body> @(Html.TelerikReporting().ReportViewer() .Id("reportViewer1") .ServiceUrl(Url.Content("http://localhost:59374/api/reports")) .ReportSource(new UriReportSource() { Uri = "ListAccountReport.trdp" }) .ViewMode(ViewMode.Interactive) .ScaleMode(ScaleMode.Specific) .Scale(1.0) .PersistSession(false) .PrintMode(PrintMode.AutoSelect) .EnableAccessibility(false) )</body></html>
In my second asp.net mvc application, i created the REST Service ReportController.cs
namespace SecondApp.Controllers{ using System.IO; using System.Web; using Telerik.Reporting.Cache.File; using Telerik.Reporting.Services; using Telerik.Reporting.Services.WebApi; //The class name determines the service URL. //ReportsController class name defines /api/reports/ service URL. public class ReportsController : ReportsControllerBase { static ReportServiceConfiguration configurationInstance; static ReportsController() { //This is the folder that contains the report definitions //In this case this is the Reports folder var appPath = HttpContext.Current.Server.MapPath("~/"); var reportsPath = Path.Combine(appPath, "Reports"); //Add resolver for trdx/trdp report definitions, //then add resolver for class report definitions as fallback resolver; //finally create the resolver and use it in the ReportServiceConfiguration instance. var resolver = new UriReportSourceResolver(reportsPath) .AddFallbackResolver(new TypeReportSourceResolver()); //Setup the ReportServiceConfiguration configurationInstance = new ReportServiceConfiguration { HostAppId = "Html5App", Storage = new FileStorage(), ReportSourceResolver = resolver, // ReportSharingTimeout = 0, // ClientSessionTimeout = 15, }; } public ReportsController() { //Initialize the service configuration this.ReportServiceConfiguration = configurationInstance; } }}
and under the second solution the Reports directory contains the definition of my report "ListAccountReport.trdp"
Another detail is activate CORS to access the service REST, I add in the 2nd app this snippet of code in web config:
<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> <add name="Access-Control-Allow-Credentials" value="true" /> </customHeaders></httpProtocol>
using only one solution, all works fine but separating the two parts in different solutions it throws me this error:
Unable to get report parameters.
Access to XMLHttpRequest at 'http://localhost:59374/api/reports/clients/6d5ac5243ca/parameters' from origin 'http://localhost:57654' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
jquery-3.5.1.min.js:2 POST http://localhost:59374/api/reports/clients/6d5ac5243ca/parameters net::ERR_FAILED
Thanks for replying
1 Answer, 1 is accepted
Rank 1
Veteran
Iron
Well, I solved my own problem..
I created a new project "Telerik Reporting REST Service R1 2021".. updating all packges in my REST Service Solution, install "Microsoft.AspNet.WebApi.Cors", making some changes in my web.config file to enable CORS and by adding
[EnableCors(origins: "*", headers: "*", methods: "*")] in my ReportController
<handlers> <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" /> <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" /> <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" /> <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> </handlers
I added my report definition (ListAccountReport.trdp) under Reports directory.
And from the other application, I made the call to my TelerikReporting().ReportViewer() component.
I refer to this post REST with CORS Settings
Glad to see things are working finally.
Regards,