Client-side error is found. Check the custom headers in the AjaxRequestSettings and ServerActionSettings.

[Eric]

Hi,

Having a problem using the PDF viewer on a Razor page; full error is:

Client-side error is found. Please check the custom headers provided in the AjaxRequestSettings property and web action methods in the ServerActionSettings property.

I've basically just copied the code from the Custom Toolbar demo, with the changes:

• removed @section ControlsSection - crashed with 'InvalidOperationException: The following sections have been defined but have not been rendered by the page'
• Changed the file to mine in window.onload: pdfViewer.load("~/assets/PDF/ExistingSitePlanPlanning.pdf", null);

My _layout.cshtml has the following:

in header

Loading the javascript and css from the CDN.

   

in body

@RenderBody() @await RenderSectionAsync("Scripts", required: false)

I've also added @addTagHelper *, Syncfusion.EJ2 to _ViewImports.cshtml.

I tried putting the following into the page, and this renders an empty viewer successfully.

<ejs-pdfviewer id="container" style="height:600px" serviceUrl="/api/PdfViewer">ejs-pdfviewer>

Controller code is simply 'return View()', as per the demo.

I've also unsuccessfully tried the code here: https://www.syncfusion.com/kb/11063/how-to-create-the-pdf-viewer-web-service-application-in-net-core-3-0-and-above-version

but ended up commenting out the following as GetAnnotations() isn't defined - retuned an empty string instead.

string jsonResult = pdfviewer.GetAnnotations(jsonObject)

To be honest, I didn't understand the code on that page at all :)

Version used is 19.1.0.56

Attachment: ExistingSitePlan_52fdd143.zip

[Eric]

Update:

I've had some success, I can get to the PDFViewer load method in PostMan, which runs through the method and finds my file, loads it into a stream etc.

I in the body section, I put the following in 'Raw' and set content type to Json.

{

  "document": "/assets/PDF/ExistingSitePlanPlanning.pdf",

  "isFileName": "true"

}

I've changed the service URL assignment to window.location.origin + '/PdfViewer'. When it fails in the MVC application, I can copy this URL into PostMan with the above data

and settings and it hits the Load action, through the MVC app I get a 400 error message.

Looked through the documentation and found AjaxRequestSettings and ServerActionSettings, but no idea how to set them or what to set them to.

[Vasugi Sivajothi]

Hi Eric, 

 

Thanks for contacting Syncfusion support. 

 

Please find the details, 

 

Query	Details
Having a problem using the PDF viewer on a Razor page; full error is: Client-side error is found. Please check the custom headers provided in the AjaxRequestSettings property and web action methods in the ServerActionSettings property.  I've basically just copied the code from the Custom Toolbar demo, with the changes:  removed @section ControlsSection - crashed with 'InvalidOperationException: The following sections have been defined but have not been rendered by the page' Changed the file to mine in window.onload: pdfViewer.load("~/assets/PDF/ExistingSitePlanPlanning.pdf", null);My _layout.cshtml has the following: in header      Loading the javascript and css from the CDN.  in body                  @RenderBody()              @await RenderSectionAsync("Scripts", required: false)                   I've also added @addTagHelper *, Syncfusion.EJ2 to _ViewImports.cshtml.  I tried putting the following into the page, and this renders an empty viewer successfully.  <ejs-pdfviewer id="container" style="height:600px" serviceUrl="/api/PdfViewer">ejs-pdfviewer>  Controller code is simply 'return View()', as per the demo.  I've also unsuccessfully tried the code here: https://www.syncfusion.com/kb/11063/how-to-create-the-pdf-viewer-web-service-application-in-net-core-3-0-and-above-version  but ended up commenting out the following as  GetAnnotations() isn't defined - retuned an empty string instead.  string jsonResult = pdfviewer.GetAnnotations(jsonObject)   To be honest, I didn't understand the code on that page at all :)  Version used is 19.1.0.56 Attachment: ExistingSitePlan_52fdd143.zip	Sorry for the Inconvenience.    We have modified the content of export annotation method in the latest version of our PDF Viewer control. Kindly modify the below code snippet in PDF Viewer controller file to resolve the reported issue in your end. We have shared the sample for your reference, please refer to the below sample,     Code Snippet:      public IActionResult ExportAnnotations([FromBody] Dictionary<string, string> jsonObject)          {              PdfRenderer pdfviewer = new PdfRenderer(_cache);              string jsonResult = pdfviewer.ExportAnnotation(jsonObject);              return Content(jsonResult);          }          Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CORESA~11694388424      We will update in our documentation and will let you once it has refreshed.     Please let us know if you have any concerns about this,
I've had some success, I can get to the PDFViewer load method in PostMan, which runs through the method and finds my file, loads it into a stream etc. I in the body section, I put the following in 'Raw' and set content type to Json.  {    "document": "/assets/PDF/ExistingSitePlanPlanning.pdf",    "isFileName": "true"  }  I've changed the service URL assignment to  window.location.origin + '/PdfViewer'. When it fails in the MVC application, I can copy this URL into PostMan with the above data  and settings and it hits the Load action, through the MVC app I get a 400 error message.  Looked through the documentation and found AjaxRequestSettings  and ServerActionSettings, but no idea how to set them or what to set them to.	We can include the Authorization token in the PDF Viewer AJAX request using the ajaxRequest headers properties available in AjaxRequestSettings and it will be included in every AJAX request send from PDF Viewer.     We can access the web action settings using ServerActionSettings API. Please refer to the below documentation,  Documentations:   https://ej2.syncfusion.com/documentation/api/pdfviewer/ajaxRequestSettingsModel/    https://ej2.syncfusion.com/documentation/api/pdfviewer/serverActionSettingsModel/

 

 

Regards, 

Vasugi 

[Juan Marin]

Hi Syncfusion team.

Can you provide me an example with PdfViewer in ASP.NET MVC5 for load , print and display a pdf from url?

I have licensed the 18.1.0.46 version.

This is part of my code:

Razor page:


@using Syncfusion.EJ2;
@{

    Layout = null;
    var nonce = ViewBag.Nonce as string;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PdfViewer</title>


    <!-- External CSS -->
    <link rel='nofollow' href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link rel='nofollow' href="~/Content/ej2/fabric.css" rel="stylesheet" />
    <link rel='nofollow' href="~/Content/open-sans-light.css" rel="stylesheet" />


    <script src="@Url.Content("~/Handlers/JavaScriptPublicActionsHandler.ashx")" type="text/javascript"></script>
    <script src="@Url.Content("~/Handlers/JavaScriptResourcesHandler.ashx")" type="text/javascript"></script>
    <script src="@Url.Content("~/Handlers/JavaScriptCustomTextHandler.ashx")" type="text/javascript"></script>
</head>
<body>
    <div class="container">
            <form id="documentManagedForm">

                <!-- PDF Viewer -->
                <div id="pdfViewer"></div>
            </form>

    </div>



    <!-- External Scripts -->
    <script nonce="@nonce" src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script nonce="@nonce" src="~/Scripts/ej2/ej2.min.js"></script>
    <script nonce="@nonce" src="~/Scripts/documentManaged.js"></script>
    <script nonce="@nonce">
       // Inicializar el PdfViewer

       var pdfViewer = new ej.pdfviewer.PdfViewer({
           documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf '
           serviceUrl: '/PdfViewer/Load'
       });
       pdfViewer.appendTo('#pdfViewer');
    </script>
    <!-- Syncfusion ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>
</html>

Controller
using System.IO;
using System.Net;
using System.Web.Mvc;
using System.Windows.Documents;
using Syncfusion.EJ2.PdfViewer;


public class PdfViewerController : Controller
{
    // Servicio para cargar el archivo PDF
    [HttpPost]
    public ActionResult Load(string document)
    {
         PdfRenderer pdfViewer = new PdfRenderer();


        if (string.IsNullOrEmpty(document))
        {
            return Content("Documento no encontrado");
        }


        // Descargar el archivo PDF desde la URL proporcionada
        try
        {
            WebClient webClient = new WebClient();
            byte[] pdfBytes = webClient.DownloadData(document); // Descargar el archivo desde la URL


            MemoryStream stream = new MemoryStream(pdfBytes);
            stream.Position = 0;


            // Llamar al servicio de Syncfusion para cargar el PDF
            var result = pdfViewer.Load(stream);


            return Json(result, JsonRequestBehavior.AllowGet);
        }
        catch (WebException ex)
        {
            return Content("Error al descargar el archivo PDF: " + ex.Message);
        }
    }
}

Best  Regards!

Juan

[Umamageshwari Shanmugam]

Hi Juan Marin,

We kindly request that you upgrade to the latest version of the PDF Viewer (v27.1.52), as version 18.1.0.46 is outdated. As per your request, we have provided an MVC sample and the relevant documentation using the latest version. Please refer to the sample, and feel free to reach out if you have any questions or need further assistance.

Sample link - SampleLink

Documentation link - https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started-with-server-backed