In this getting started tutorial, learn how to get started creating powerful reports with Telerik Reporting and ASP.NET Core.
Do you remember Getting Started with Telerik Reporting and ASP.NET 5? Times have changed, and now we all have ASP.NET Core, it’s supported in our products and we’ve even made new developer tools just for it. There is no more MVC6 and ASP.NET5.
Yes, names changed a lot and we have followed suit. Let’s talk about getting started with Telerik Reporting and ASP.NET Core.
To get started with ASP.NET Core we recommend reviewing the official Microsoft documentation available at Introduction to ASP.NET Core (docs.microsoft.com), and the mandatory downloads to prepare your development environment:
Once the machine is ready, we can go on with the settings:
Visual Basic templates for ASP.NET Core are not available. Please pay a special attention to the type of project we are initiating.
You will have to prepare the project for Telerik Reporting.
Open the project.json file. The "frameworks" property should look like this:
"frameworks": { "net461": { } },
The above setting is required since the Telerik Reporting engine needs the full .NET framework. Note, that using multiple target frameworks will force Visual Studio to build your project as if it will run on all frameworks, and ultimately you will not be able to start it.
We are going to add the Reporting REST service in the same project, which means the Reporting engine will be there and it requires a Windows OS machine with .NET 4 Framework or greater.
ASP.NET Core does not support references to assemblies, but instead works with references to NuGet packages. To setup the Reporting REST service you have to reference the latest Telerik.Reporting.nupkg and Telerik.Reporting.Services.AspNetCore.nupkg NuGet packages from the private Telerik NuGet feed. You can learn how to add a NuGet feed here.
You will need your Telerik account credentials for this operation.
C#
namespace
WebApplication1.Controllers
{
using
System.IO;
using
Microsoft.AspNetCore.Hosting;
using
Telerik.Reporting.Cache.File;
using
Telerik.Reporting.Services;
using
Telerik.Reporting.Services.AspNetCore;
public
class
ReportsController : ReportsControllerBase
{
public
ReportsController(IHostingEnvironment environment)
{
var reportsPath =
Path.Combine(environment.WebRootPath,
"Reports"
);
this
.ReportServiceConfiguration =
new
ReportServiceConfiguration
{
HostAppId =
"Html5DemoApp"
,
Storage =
new
FileStorage(),
ReportResolver =
new
ReportFileResolver(reportsPath),
// ReportSharingTimeout = 0,
// ClientSessionTimeout = 15,
};
}
}
}
C#
public
IActionResult Report()
{
ViewBag.Message =
"Your reports page."
;
return
View();
}
Html @Url.Content("~/api/reports/")
@{
Layout = null;
}
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>APS.NET Core HTML5 Report Viewer Demo</
title
>
<
meta
charset
=
"utf-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1, maximum-scale=1"
/>
<
script
src
=
"https://code.jquery.com/jquery-2.2.4.min.js"
integrity
=
"sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin
=
"anonymous"
></
script
>
<
link
href
=
"http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css"
rel
=
"stylesheet"
/>
<!-- the required Kendo subset is located in {Telerik Reporting installation path}\Html5\ReportViewer\js -->
<
script
src
=
"/ReportViewer/js/telerikReportViewer.kendo-x.x.x.x.min.js"
></
script
>
<!--If Kendo CDN is prefered here are the required Kendo widgets and bundles
The minimum required widgets:
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.core.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.data.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.tooltip.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.calendar.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.datepicker.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.listview.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.menu.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.panelbar.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.treeview.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.popup.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.userevents.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.selectable.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.touch.min.js"
></
script
>
Widgets bundle:
kendo.all.min.js can be used instead of the above widget list
-->
<
script
src
=
"/api/reports/resources/js/telerikReportViewer-10.2.16.1025.min.js"
></
script
>
<
style
>
#reportViewer1 {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
overflow: hidden;
font-family: Verdana, Arial;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"reportViewer1"
>
loading...
</
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$("#reportViewer1")
.telerik_ReportViewer({
// The URL of the service which will serve reports.
// The URL corresponds to the name of the controller class (ReportsController).
// For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.
serviceUrl: '@Url.Content("~/api/reports/")',
// The URL for the report viewer template. The template can be edited -
// new functionalities can be added and unneeded ones can be removed.
// For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.
@*templateUrl: '@Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-FA.html")',*@
//ReportSource - report description
reportSource: {
// The report can be set to a report file name
// or CLR type name (report class definition).
report: "Barcodes Report.trdp",
// Parameters name value dictionary
parameters: {}
},
// Specifies whether the viewer is in interactive or print preview mode.
// PRINT_PREVIEW - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.
// INTERACTIVE - Displays the report in its original width and height without paging. Additionally interactivity is enabled.
viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
// Sets the scale mode of the viewer.
// Three modes exist currently:
// FIT_PAGE - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
// FIT_PAGE_WIDTH - The report will be zoomed in or out so that the width of the screen and the width of the report match.
// SPECIFIC - Uses the scale to zoom in and out the report.
scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
// Zoom in and out the report using the scale
// 1.0 is equal to 100%, i.e. the original size of the report
scale: 1.0,
});
});
</
script
>
</
body
>
</
html
>
Html
<li><a asp-area="" asp-controller="Home" asp-action="Report">Report</a></li>
list item to the navigation. It should become like this:
Html
<
li
><
a
asp-area
=
""
asp-controller
=
"Home"
asp-action
=
"Index"
>Home</
a
></
li
>
<
li
><
a
asp-area
=
""
asp-controller
=
"Home"
asp-action
=
"About"
>About</
a
></
li
>
<
li
><
a
asp-area
=
""
asp-controller
=
"Home"
asp-action
=
"Contact"
>Contact</
a
></
li
>
<
li
><
a
asp-area
=
""
asp-controller
=
"Home"
asp-action
=
"Report"
>Report</
a
></
li
>
Telerik Reporting relies on the ConfigurationManager to resolve named connection strings and to configure the reporting engine. Thus if you have any named connectionstrings in your reports or you need to configure Telerik Reporting you have to add app.config configuration file to the project's root. For more information see: Telerik Reporting Configuration Section.
For example:
<
configuration
>
<
connectionStrings
>
<
add
name
=
"AdventureWorks"
connectionString
=
"Data Source=.\mssqlserver2014;Initial Catalog=AdventureWorks;Integrated Security=SSPI"
providerName
=
"System.Data.SqlClient"
/>
</
connectionStrings
>
<
runtime
>
<
gcServer
enabled
=
"true"
/>
</
runtime
>
</
configuration
>
Finally, run the project and navigate to the Report view to see the report.
What we did with Telerik Reporting is to allow previewing Telerik Reports. The processing and rendering mechanisms are bound to Windows OS and its GDI+ API. The good news is that for some years now we have been working on separating preview from document generation.
This means you can host the Reporting REST Service separately on a Windows server and let your HTML5 Viewer run freely in any other environment you have to support.
Ready to give Telerik Reporting a try? You can learn more here or download a free trial at the link below. We always appreciate your feedback (the real world voice) to help us keep making things better.
Stefania Tapela is a technical Support Engineer for Telerik Reporting. You can find her searching online stores for clothing and low cost flights.