Skip to content

Commit 1c27b43

Browse files
dnikolov-prgdnikolov-prg
authored
chore: add razor pages articles for html5 viewer (#1871)
* chore: add razor pages articles for html5 viewer * Update using-in-razor-pages-app.md
1 parent 3a7e248 commit 1c27b43

File tree

1 file changed

+144
-0
lines changed

1 file changed

+144
-0
lines changed

‎embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/using-in-razor-pages-app.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
title: Using in Razor Pages
3+
page_title: HTML5 Report Viewer in ASP.NET Core Razor Pages - Telerik Reporting
4+
description: "Learn how to add an HTML5 Report Viewer in an ASP.NET Core Razor web application."
5+
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/using-in-razor-pages-app
6+
tags: how,use,html5,report,viewer,asp.net,core,.net,razor,pages,application
7+
published: True
8+
reporting_area: HTML5
9+
position: 6
10+
---
11+
12+
# Overview
13+
14+
This article guides you on how to add an HTML5 Report Viewer in an [ASP.NET Core in .NET {{site.mindotnetversion}}+ Razor Pages](https://learn.microsoft.com/en-us/aspnet/core/razor-pages) application.
15+
16+
## Prerequisites
17+
18+
The report viewer requires a reference to a running Reporting REST Service. The report viewer can consume reports generated and served by any of the following service implementations:
19+
20+
- A service that runs in another application.
21+
- A service that runs in a Telerik Report Server instance.
22+
- A service that is hosted locally in the same application.
23+
24+
In case you need to host it locally, follow the article [How to Host Reports Service in ASP.NET Core in .NET]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/how-to-host-reports-service-in-asp.net-core-in-.net-5%}).
25+
26+
## Using the Telerik Razor Report Viewer Page Item Templates
27+
28+
The [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%}) can be integrated into [ASP.NET Core in .NET {{site.mindotnetversion}}+ Razor Pages](https://learn.microsoft.com/en-us/aspnet/core/razor-pages) applications with the `Telerik Razor Report Viewer Page {{site.suiteversion}}` template.
29+
30+
If you wish to connect the Report Viewer to a REST service, you can follow the steps outlined in the [How to Use HTML5 Report Viewer with REST Service]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-rest-service%}) documentation article.
31+
32+
If you wish to connect the Report Viewer to a Report Server instance, refer to the article section [Configuring the HTML5 Report Viewer to work with Report Server using Item Templates]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-report-server%}#configuring-the-html5-report-viewer-to-work-with-report-server-using-item-templates).
33+
34+
## Manual Configuration in Razor Pages Apps
35+
36+
1. This tutorial uses the `Barcodes Report.trdp` report definitions file that must be located in a `Reports` folder inside the project.
37+
1. Make sure that the app configuration inside the `Configure` method of the `Startup.cs` can serve static files:
38+
39+
````C#
40+
app.UseStaticFiles();
41+
````
42+
43+
44+
1. Add a new razor page to the **Pages** directory of the *Razor Pages* application, and create a `ReportSourceModel` class in the `.cshtml.cs` file, which will be used to provide the report name and parameters.
45+
46+
````C#
47+
public class ReportSourceModel : PageModel
48+
{
49+
private static readonly JsonSerializerOptions serializerOptions = new JsonSerializerOptions()
50+
{
51+
DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull,
52+
PropertyNamingPolicy = JsonNamingPolicy.CamelCase
53+
};
54+
55+
private readonly ILogger<ReportSourceModel> _logger;
56+
57+
public required string Report { get; set; }
58+
59+
public Dictionary<string, object> Parameters { get; } = new Dictionary<string, object>();
60+
61+
public string Serialize()
62+
{
63+
return JsonSerializer.Serialize(new { this.Report, this.Parameters }, serializerOptions);
64+
}
65+
66+
public ReportSourceModel(ILogger<ReportSourceModel> logger)
67+
{
68+
this._logger = logger;
69+
}
70+
71+
public void OnGet()
72+
{
73+
}
74+
}
75+
````
76+
77+
78+
1. In the razor page's `.cshtml` file, initialize the HTML5 Report Viewer and pass the `ReportSourceModel` from the `@model`:
79+
80+
````HTML
81+
@page
82+
@model ReportSourceModel
83+
@{
84+
ViewData["Title"] = "Telerik HTML5 Report Viewer Demo";
85+
Model.Report = "SampleReport.trdp";
86+
//Model.Parameters.Add("ParameterName", ParameterValue);
87+
}
88+
89+
@section Scripts {
90+
<head>
91+
<title>Teleirk HTML5 Report Viewer in ASP.NET Core Razor Pages App</title>
92+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
93+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css" />
94+
95+
<script src="/api/reports/resources/js/telerikReportViewer"s"></script>
96+
97+
<style>
98+
body {
99+
font-family: Verdana, Arial, sans-serif;
100+
margin: 5px;
101+
}
102+
103+
#reportViewer1 {
104+
position: absolute;
105+
left: 5px;
106+
right: 5px;
107+
top: 50px;
108+
bottom: 5px;
109+
overflow: hidden;
110+
clear: both;
111+
}
112+
</style>
113+
</head>
114+
<body>
115+
<div id="reportViewer1">
116+
loading...
117+
</div>
118+
119+
@{
120+
var reportSourceModel = Html.Raw(Model.Serialize());
121+
}
122+
123+
<script type="text/javascript">
124+
$(document).ready(function () {
125+
$("#reportViewer1")
126+
.telerik_ReportViewer({
127+
id: "reportviewer1",
128+
serviceUrl: "/api/reports",
129+
reportSource: @reportSourceModel,
130+
enableAccessibility: false,
131+
});
132+
});
133+
</script>
134+
</body>
135+
}
136+
````
137+
138+
139+
1. Run the application and navigate to the razor page with the [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%}) to verify that it loads successfully.
140+
141+
## See Also
142+
143+
* [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%})
144+
* [YouTube video "Setting up Telerik Html5 Report Viewer with external Telerik Reporting REST Service in .NET 5"](https://www.youtube.com/watch?v=GeCUGTgZziI)

0 commit comments

Comments
 (0)