New to Telerik UI for ASP.NET Core? Start a free 30-day trial Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a cshtml file and a cshtml.cs file (by design, the two files have the same name).
You can seamlessly integrate the Telerik UI PDFViewer for ASP.NET Core in Razor Pages applications.
This article describes how to configure the PDFViewer component in a Razor Pages scenario.
For the complete project, refer to the PDFViewer in Razor Pages example .
Starting with version 2024 R4, the PDFViewer requires PDF.js version 4+. For more information, refer to the PDF.js processing documentation .
The following example demonstrates how to initialize the PDFViewer in RazorPage project by using PDF.JS :
Program.cs HtmlHelper TagHelper PageModel
builder. Services. AddKendo ( x => x. RenderAsModule = true ) ; @page
@model Telerik.Examples.RazorPages.Pages.PDFViewer.PDFViewerIndexModel
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<h1>PDFViewerPDFJSProcessing</h1>
@(Html.Kendo().PDFViewer()
.Name("pdfviewer")
.PdfjsProcessing(pdf => pdf.File(Url.Content("~/sample.pdf")))
.Height(1200)
) @page @model Telerik. Examples. RazorPages. Pages. PDFViewer. PDFViewerIndexModel < scriptsrc = " https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type = " module" > </ script> < scriptsrc = " https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type = " module" > </ script> < scriptsrc = " https://code.jquery.com/jquery-3.7.1.min.js" type = " module" > </ script> < scriptsrc = " https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type = " module" > </ script> < scriptsrc = " https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type = " module" > </ script> @inject Microsoft. AspNetCore. Antiforgery. IAntiforgery Xsrf @ Html. AntiForgeryToken ( ) < h1> </ h1> < kendo-pdfviewerheight = " 1200" name = " pdfviewer" > < pdfjs-processingfile = " @ Url. Content ( "~/sample.pdf" ) " /> </ kendo-pdfviewer> public class PDFViewerIndexModel : PageModel {
public void OnGet ( )
{
}
} The following example demonstrates how to initialize the PDFViewer by using the Telerik Document Processing library :
HtmlHelper TagHelper PageModel
@page
@model Telerik.Examples.RazorPages.Pages.PDFViewer.PDFViewerDPLModel
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<h1>PDFViewerDPLProcessing</h1>
@(Html.Kendo().PDFViewer()
.Name("pdfviewer")
.DplProcessing(dpl =>
{
dpl.Read(r=>r.Url("/PDFViewer/PDFViewerDPL?handler=Read"));
})
) < kendo-pdfviewername = " pdfviewer" > < dpl-processing> < readurl = " /PDFViewer/PDFViewerDPL?handler=Read" /> </ dpl-processing> </ kendo-pdfviewer> public class PDFViewerDPLModel : PageModel {
private IHostingEnvironment _hostingEnvironment;
public PDFViewerDPLModel ( IHostingEnvironment environment)
{
_hostingEnvironment = environment;
}
public void OnGet ( )
{
}
public IActionResult OnGetRead ( int ? )
{
string = Path. Combine ( _hostingEnvironment. WebRootPath, "sample.pdf" ) ;
FileStream stream = new FileStream ( filePath, FileMode. Open, FileAccess. Read) ;
JsonResult jsonResult;
FixedDocument doc = FixedDocument. Load ( stream) ;
if ( pageNumber == null )
{
jsonResult = new JsonResult ( doc. ToJson ( ) ) ;
}
else
{
jsonResult = new JsonResult ( doc. GetPage ( ( int ) pageNumber) ) ;
}
return jsonResult;
}
}