Skip to content

Commit 7cbf8eb

Browse files
dnikolov-prgdnikolov-prg
authored
Update using-in-razor-pages-app.md (#1873)
* Update using-in-razor-pages-app.md * Update using-in-razor-pages-app.md * Update using-in-razor-pages-app.md
1 parent 6cb4423 commit 7cbf8eb

File tree

1 file changed

+54
-56
lines changed

1 file changed

+54
-56
lines changed

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

Lines changed: 54 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t
3333

3434
## Manual Configuration in Razor Pages Apps
3535

36-
1. This tutorial uses the `Barcodes Report.trdp` report definitions file that must be located in a `Reports` folder inside the project.
36+
1. This tutorial relies on having already created an **ASP.NET Core Razor Pages** application. If such is not present, follow the [Get started with Razor Pages in ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start) as the first step.
3737
1. Make sure that the app configuration inside the `Configure` method of the `Startup.cs` can serve static files:
3838

3939
````C#
@@ -43,7 +43,7 @@ app.UseStaticFiles();
4343

4444
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.
4545

46-
````C#
46+
````C#
4747
public class ReportSourceModel : PageModel
4848
{
4949
private static readonly JsonSerializerOptions serializerOptions = new JsonSerializerOptions()
@@ -77,62 +77,60 @@ public class ReportSourceModel : PageModel
7777
7878
1. In the razor page's `.cshtml` file, initialize the HTML5 Report Viewer and pass the `ReportSourceModel` from the `@model`:
7979
80-
````HTML
80+
````HTML
8181
@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;
82+
@model ReportSourceModel
83+
@{
84+
ViewData["Title"] = "Telerik HTML5 Report Viewer Demo";
85+
Model.Report = "Barcodes Report.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+
<script src="/api/reports/resources/js/telerikReportViewer"s"></script>
95+
<style>
96+
body {
97+
font-family: Verdana, Arial, sans-serif;
98+
margin: 5px;
99+
}
100+
101+
#reportViewer1 {
102+
position: absolute;
103+
left: 5px;
104+
right: 5px;
105+
top: 50px;
106+
bottom: 5px;
107+
overflow: hidden;
108+
clear: both;
109+
}
110+
</style>
111+
</head>
112+
<body>
113+
<div id="reportViewer1">
114+
loading...
115+
</div>
116+
117+
@{
118+
var reportSourceModel = Html.Raw(Model.Serialize());
111119
}
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-
}
120+
121+
<script type="text/javascript">
122+
$(document).ready(function () {
123+
$("#reportViewer1")
124+
.telerik_ReportViewer({
125+
id: "reportviewer1",
126+
serviceUrl: "/api/reports",
127+
reportSource: @reportSourceModel,
128+
enableAccessibility: false,
129+
});
130+
});
131+
</script>
132+
</body>
133+
}
136134
````
137135

138136

0 commit comments

Comments
 (0)