How to properly reference PDF Viewer js and css files from local folder

[Alejandro]

Hello people,

I have the following problem. In projects that use ASP.NET Framework (not core), when I get the Syncfusion.EJ2.JavsScript package from the nuget package manager in Visual Studio, the pm creates a Scripts and a Contents inside the project, so I can reference both the ej2.min.js (from Scripts) and fabric.css (from Content/ej2). 

Now, I have an .net core project, specifically a Razor Pages project. I go to the package manager, download the same Syncfusion.EJ2.JavaScript package, and I see it's added to the Packages node of the solution, but the content files (js and css) aren't anywhere inside the project. They are downloaded to a .nuget folder outside the solution (In may case, it's in E:\.nuget).

The question is, what is the correct way to reference the script and css files in Razor Pages? Because it seems a bit awkward to me if I had to copy manually those files from the .nuget to the project folder. Besides, updating the packages would also be cumbersome.

All the documentation I've seen online shows how to load resources from a CDN, and have a text like "Add client side resource through CDN or local package in the layout page Views/Shared/_Layout.cshtml.​" but it doesn't show how to properly reference those "local package" resources.

To be more precise, I do not want to use a CDN.

Any help will be very appreciated.

Thank you

Alex

[Dhivyabharathi Mohan]

Hi Alejandro, 

 

 

You can refer the ej2.min.js file and material.css file by placing these files in the wwwroot folder inside the project location and then refer these files in the _Layout.cshtml file as like below code snippet instead of using the CDN links. We have shared the sample for your reference. 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2PDFViewer_Core3.0-733503657  

 

 

Code snippet: 

 

 

<link rel="stylesheet" rel='nofollow' href="~/material.css" /> 

    <script src="~/ej2.min.js"></script> 

 

 

 

Kindly try this and revert us, if you have any concerns. 

 

 

Regards, 

Dhivya. 

[Alejandro]

Hello Dhivya, 

Thank you for your reply. The attached project works as expected and I appreciate it.

But I think there was a confusion, because I mentioned the PDF Viewer and the project you sent me indeed uses it but with tag helpers.

What I want to achieve is instantiating the PDF viewer with pure javascript, as the docs show in https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/, that's why I downloaded the EJ2.JavaScript package at first place.

So my questions are these:

1) Does the PDF Viewer library depends upon the EJ2.JavaScript package?

2) As mentioned in my original post, I can reference the Syncfusion.EJ2.JavaScript files (ej2.min.js and related css) by copying them *manually* to the wwwroot/lib subfolder, but this is not -I think- the best way to do so. In classic ASP.NET, when the Syncfusion.EJ2.JavaScript is installed from nuget, the 'Contents' and 'Scripts' subfolders are automatically created inside the project, so referencing them is straightforward, and also, updating the packages is  done in just 2 clicks.

But in a Razor Pages project (.net core), although the SF package SHOWS are a dependency under Dependencies\Packages, no Syncfusion files are installed in the project, instead they seem to be downloaded to a .nuget folder configured system-wide. 

Copying those files manually from the .nuget folder seems counter-intuitive, and if I update the package to a newer version, the manual copy must be done again. Also, what's the point of having a project reference if the files are not installed under the project's folder, and a manual copy must be made? This is what I don't understand.

Is this supposed to be this way, or am I missing something?

3) Do I need to install the package Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows, even if I only want to use the JavaScript libraries?

I hope my questions are more understandable now

Regards

Alex

[Dhivyabharathi Mohan]

Hi Alejandro, 

 

 

PDF Viewer control is client-server oriented. PDF viewer control processes the PDF document on the server-side (developed with the .NET environment – Asp.Net Core and Asp.Net MVC)  and sends the processed PDF data to the client(Javascript, Typescript, Angular, React, Vue) using the web service to render the PDF document and for further operations in PDF viewer.      

    

 

Please find the below UG link to getting started with PDF Viewer,    

    

 

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

    

https://ej2.syncfusion.com/demos/#/material/pdfviewer/default.html  

    

 

We need all the web action methods provided in the below link to rendering the PDF pages and for further operations in PDF Viewer. So, we need to install the Pdf Viewer server NuGet Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows We will send the necessary data through the AJAX request from the source level. You can create the PDF Viewer Web Service project in ASP.NET Core/ ASP.NET MVC with the help of the below links. 

 

 

Server Package: https://www.nuget.org/packages/Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows/  

    

 

ASP.NET Core: https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core 

 

    

ASP.NET MVC: https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service/ 

 

 

Kindly try this and revert us, if you have any concerns. 

 

 

Regards, 

Dhivya.