How to use EJ2 ASP.NET Core PDF Viewer in Razor pages?

Essential JS 2 PDF Viewer

The Syncfusion® ASP.NET Core PDF Viewer is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular, and touch-friendly. It is also available in other frameworks such as JavaScript, Angular, ASP.NET MVC, and React.

Refer to the following UG link for getting started with the PdfViewerControl.

https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started

Using PDF Viewer in Razor pages.

You can use the PDF Viewer control with Razor pages in ASP.NET Core. The Razor page starts with the @page directive. @page makes the file into an MVC action, which means that it handles requests directly without going through a controller. It must be the first Razor directive on a page. Handler methods in Razor Pages are the methods that are automatically executed as a result of a request.

The PageModel classes are created when you choose the Razor Page (with page model) option when adding a new item. The PageModel class allows separation of the logic of a page from its presentation. It defines page handlers for requests sent to the page and the data used to render the page.

Create Razor Page Application

Step-by-step introduction to configure Essential JS 2 setup and build a simple .NET Core web application with Razor pages using Visual Studio 2017 is explained as follows.

Prerequisites

The official prerequisites to create and run an ASP.NET Core 2.x application on a Windows environment are described on the .NET Core documentation website.

Steps to create an ASP.NET Core web application with Razor pages:

1. Choose File > New > Project in the Visual Studio menu bar.

2. Select Installed > Visual C# > .NET Core and choose the required .NET Framework in the drop-down.
3. Select ASP.NET Core Web Application, change the application name, and click OK.
   Note:

   The Essential JS 2 supports 4.5+ .NET Framework in the ASP.NET Core application that is, the minimum target framework is 4.5 for Syncfusion ASP.NET Core (Essential JS 2).

4. Choose .NET Core with ASP.NET Core 2.0 and select Web Application, and then click OK. Now, the web application project is created with default ASP.NET Core template.

Adding Syncfusion PDF Viewer Packages

After creating the project, add the following dependencies to your application by using the NuGet Package Manager.

• Syncfusion.EJ2.AspNet.Core
• Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows

1. Add the Syncfusion.EJ2.AspNet.Core NuGet package to the new application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.

2. Search for Syncfusion.EJ2.AspNet.Core in the Browse tab and install the Syncfusion.EJ2.AspNet.Core NuGet package in the application.

Integrating PDF Viewer Control

1. Add the following code to initialize the PDF Viewer with Razor pages in Index.cshtml, which is presented under the Pages folder.

   @page "{handler?}"
   @model IndexModel
   @{
       ViewData["Title"] = "Home page";
   }
   @using Syncfusion.EJ2
   <div class="control-section">
       <ejs-pdfviewer id="pdfviewer" serviceUrl="/Index" documentPath="PDF Succinctly.pdf"></ejs-pdfviewer>
   </div>
   

•  serviceUrl defines the service URL of the PdfViewer control.
• documentPath is used to load the PDF document during the PDF Viewer initialization. The name, path, and base64 string of the PDF document can be used to load the PDF document. If the name of the PDF document is only set in the documentPath property, the document must be available in the folder that is specified in the GetDocumentPath() method in the PageModel.

2. Add the following code in the Index.cshtml.cs to render the PDF document in the PDF Viewer.

   private readonly IHostingEnvironment _hostingEnvironment;     
   private IMemoryCache _cache;
           public IndexModel(IHostingEnvironment hostingEnvironment,IMemoryCache cache)
           {
                _hostingEnvironment = hostingEnvironment;
               _cache = cache;
           }
    // Post action for loading the PDF documents
           public IActionResult OnPostLoad([FromBody] Dictionary<string, string> jsonObject)
           {
               PdfRenderer pdfviewer = new PdfRenderer(_cache);
               MemoryStream stream = new MemoryStream();
               object jsonResult = new object();
               if (jsonObject != null && jsonObject.ContainsKey("document"))
               {
                   if (bool.Parse(jsonObject["isFileName"]))
                   {
                       string documentPath = GetDocumentPath(jsonObject["document"]);
                       if (!string.IsNullOrEmpty(documentPath))
                       {
                           byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
                           stream = new MemoryStream(bytes);
                       }
                       else
                       {
                           return this.Content(jsonObject["document"] + " is not found");
                       }
                   }
                   else
                   {
                       byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
                       stream = new MemoryStream(bytes);
                   }
               }
               jsonResult = pdfviewer.Load(stream, jsonObject);
               return Content(JsonConvert.SerializeObject(jsonResult));
           }
         // Post action for processing the PDF documents.
           public IActionResult OnPostRenderPdfPages([FromBody] Dictionary<string, string> jsonObject)
           {
               PdfRenderer pdfviewer = new PdfRenderer(_cache);
               object jsonResult = pdfviewer.GetPage(jsonObject);
               return Content(JsonConvert.SerializeObject(jsonResult));
           }
         // Post action for unloading and disposing the PDF document resources
           public IActionResult OnPostUnload([FromBody] Dictionary<string, string> jsonObject)
           {
               PdfRenderer pdfviewer = new PdfRenderer(_cache);
               pdfviewer.ClearCache(jsonObject);
               return this.Content("Document cache is cleared");
           }
         // Post action for rendering the ThumbnailImages
           public IActionResult OnPostRenderThumbnailImages([FromBody] Dictionary<string, string> jsonObject)
           {
               PdfRenderer pdfviewer = new PdfRenderer(_cache);
               object result = pdfviewer.GetThumbnailImages(jsonObject);
               return Content(JsonConvert.SerializeObject(result));
           }
         // Post action for processing the bookmarks from the PDF documents
           public IActionResult OnPostBookmarks([FromBody] Dictionary<string, string> jsonObject)
           {
               PdfRenderer pdfviewer = new PdfRenderer(_cache);
               object jsonResult = pdfviewer.GetBookmarks(jsonObject);
               return Content(JsonConvert.SerializeObject(jsonResult));
           }
         // Post action for rendering the annotation comments
         public IActionResult OnPostRenderAnnotationComments([FromBody] Dictionary<string, string> jsonObject) 
           {
               PdfRenderer pdfviewer = new PdfRenderer(_cache);           
               object jsonResult = pdfviewer.GetAnnotationComments(jsonObject);
               return Content(JsonConvert.SerializeObject(jsonResult));
           }
         // Post action for exporting the annotations
    
   public IActionResult OnPostExportAnnotations([FromBody] Dictionary<string, string> jsonObject)
           {
               PdfRenderer pdfviewer = new PdfRenderer(_cache);
               string jsonResult = pdfviewer.GetAnnotations(jsonObject);
               return Content(jsonResult);
           }
         // Post action for importing the annotations
            public IActionResult OnPostImportAnnotations([FromBody] Dictionary<string, string> jsonObject)
           {
               PdfRenderer pdfviewer = new PdfRenderer(_cache);
               string jsonResult = string.Empty;
               if (jsonObject != null && jsonObject.ContainsKey("fileName"))
               {
                   string documentPath = GetDocumentPath(jsonObject["fileName"]);
                   if (!string.IsNullOrEmpty(documentPath))
                   {
                       jsonResult = System.IO.File.ReadAllText(documentPath);
                   }
                   else
                   {
                       return this.Content(jsonObject["document"] + " is not found");
                   }
               }
               return Content(jsonResult);
           }
           // Post action for downloading the PDF documents
           public IActionResult OnPostDownload([FromBody] Dictionary<string, string> jsonObject)
           {
               PdfRenderer pdfviewer = new PdfRenderer(_cache);
               string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
               return Content(documentBase);
           }
           // Post action for printing the PDF documents
           public IActionResult OnPostPrintImages([FromBody] Dictionary<string, string> jsonObject)
           {
               PdfRenderer pdfviewer = new PdfRenderer(_cache);
               object pageImage = pdfviewer.GetPrintImage(jsonObject);
               return Content(JsonConvert.SerializeObject(pageImage));     
            }
         // Gets the path of the PDF document
           private string GetDocumentPath(string document)
           {
               string documentPath = string.Empty;
               if (!System.IO.File.Exists(document))
               {
                   string basePath = _hostingEnvironment.WebRootPath;
                   string dataPath = string.Empty;
                   dataPath = basePath + @"/PdfViewer/";
                   if (System.IO.File.Exists(dataPath + document))
                       documentPath = dataPath + document;
               }
               else
               {
                   documentPath = document;
               }
               return documentPath;
           }

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_RazorPages1695721996