We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Unable to get PDFViewer to work


I'm trying to use the PDF Viewer for a project I'm working on, and am unable to get it to work on an Asp.Net MVC 4 application. Below is the code for the view:

    <div id="pdfDiv">
        @(Html.EJ().PdfViewer("pdfviewer").ServiceUrl("../NewForm").ServerActionSettings(s => s.Load("../Load?Id=10")))

And below is the code for the controller (I have highlighted the problematic part):

        public class pdfViewerJsonResult
            public string controlId { get; set; }
            public string id { get; set; }
            public Boolean isInitialLoading { get; set; }
            public string pageIndex { get; set; }
            public string viewerAction { get; set; }

        public ActionResult NewForm(int Id = -1)
            return View(ViewPath);

        public string Load(pdfViewerJsonResult jsonResultObj)
            PdfViewerHelper helper = new PdfViewerHelper();
            Dictionary<string, string> jsonResult = jsonResultObj.GetType()
                                                        .GetProperties(BindingFlags.Instance | BindingFlags.Public)
                                                        .ToDictionary(prop => prop.Name, prop => prop.GetValue(jsonResultObj, null).ToString());
            if (jsonResult.ContainsKey("isInitialLoading"))

            object obj = helper.ProcessPdf(jsonResult);
            string str = JsonConvert.SerializeObject(helper.ProcessPdf(jsonResult));
            return str;
I have verified that the file that I'm referencing exists under the FormPDFs directory. I have also verified that when the helper.Load() is called, the DocumentStream of the PdfViewerHelper contains data (it's about 67KB which is roughly the size of the document).

Problem is, when the ProcessPdf method is called, it returns an empty object. Upon calling JsonConvert.SerializeObject(), it get an empty JSON string {}. I'm not using WebAPI - instead, I need to make this work with a regular AspNet Mvc controller method - because of this I'm defining a specific type called pdfViewerJsonResult  that mimics the jsonResult that is being passed into the method. I then convert the pdfViewerJsonResult into a Dictionary<string, string> for use by the PdfViewerHelper.

Not sure what I'm doing wrong here, can you please help.

3 Replies

KK Karthik Krishnaraj Syncfusion Team November 19, 2018 12:15 PM UTC

Hi Saurabh, 
Greetings from Syncfusion, 
On analyzing the provided code we found that you have missed to declare some of the Json data fields, so the ProcessPdf() returns empty object. We have shared the sample and the modified code in the below, 
Code Snippet: 
        public ActionResult Load(jsonObjects results) 
            PdfViewerHelper helper = new PdfViewerHelper(); 
            var jsonResult = JsonConverterstring(results); 
            //load the multiple document from client side  
            if (jsonResult.ContainsKey("newFileName")) 
                var name = jsonResult["newFileName"]; 
                var pdfName = name.ToString() + ".pdf"; 
                helper.Load(HttpContext.Server.MapPath("~/Data/" + pdfName)); 
                //Initially load the PDF document from the data folder. 
                if (jsonResult.ContainsKey("isInitialLoading")) 
                    helper.Load(HttpContext.Server.MapPath("~/Data/F# Succinctly.pdf")); 
            return Content(JsonConvert.SerializeObject(helper.ProcessPdf(jsonResult))); 
        public Dictionary<string, string> JsonConverterstring(jsonObjects results) 
            Dictionary<string, object> resultObjects = new Dictionary<string, object>(); 
            resultObjects = results.GetType().GetProperties(BindingFlags.Instance | BindingFlags.Public) 
                .ToDictionary(prop => prop.Name, prop => prop.GetValue(results, null)); 
            var emptyObjects = (from kv in resultObjects 
                                where kv.Value != null 
                                select kv).ToDictionary(kv => kv.Key, kv => kv.Value); 
            Dictionary<string, string> jsonResult = emptyObjects.ToDictionary(k => k.Key, k => k.Value.ToString()); 
            return jsonResult; 
    //Json fields 
  public class jsonObjects 
        public string viewerAction { get; set; } 
        public string pageindex { get; set; } 
        public string controlId { get; set; } 
        public string isInitialLoading { get; set; } 
        public string id { get; set; } 
        public string isPageScrolled { get; set; } 
        public string Download { get; set; } 
        public string uploadedFile { get; set; } 
        public string newFileName { get; set; } 
        public string savedFields { get; set; } 
        public string enableOfflineMode { get; set; } 
        public string savetextMarkupAnnotation { get; set; } 
        public string existingAnnotations { get; set; } 
        public string signatureFields { get; set; } 
        public string signatureValues { get; set; } 
        public string newFileID { get; set; } 
        public string isPrinting { get; set; } 
        public string file { get; set; } 
        public string password { get; set; } 
Please try the sample and let us know if you have any concerns on this. 

SD Saurabh D November 24, 2018 12:33 AM UTC


Thanks a lot for the sample - I was finally able to get it to work, but with one caveat. When I render the page, the toolbar is covering the entire page, and the PDF document loads in a small area at the bottom of the page. I have attached an image of how it is rendering as a sample. Can you please help?


Attachment: Capture_8f5442cb.zip

KK Karthik Krishnaraj Syncfusion Team November 26, 2018 08:54 AM UTC

Hi Saurabh, 
We were unable to reproduce the issue with the sample which we shared earlier. We suspect that issue might occur when CSS files not referred properly. Can you please share us the sample to replicate the issue? It will be helpful for us to analyze further and provide better solution. 

Live Chat Icon For mobile
Up arrow icon