Rendering PDF in a modal popup – asp.net mvc

Recently, I had to display a PDF (a pdf report, sent to my app as a byte stream) in a popup window. In asp.net MVC, using bootstrap, I was able to create a modal popup to CONTAIN the pdf. The problem was – how do I initiate the PDF streaming to the popup window (in other words, what ACTION will start sending the bytestream from the parent view to the popup view)?

Enter the OBJECT tag – a life saver. Basically, the object tag can host any binary object (in this case, a pdf file). All I had to do was call a URL action (GeneratePDF) from within this tag as shown below.

            <object id=‘pdfbox’ style=“width: 500px; height: 600px; overflow: hidden” type=“application/pdf” data=“@Url.Action(“GeneratePDF“, “Results“, new { id= @ViewBag.ID })”></object>

The controller needs to return a FILE object (created from the PDF byte stream). The object tag is smart enough to figure out that this is a PDF file (if you have pdf reader on your box) – and render it as such. Here are the different snippets of code to make this work.

Controller (PDF Generator)

  public ActionResult GeneratePDF(string id)
        {
           // This is just how I retrieved the pdf from a web service api. This could be a filesystem read for your use case 
            var api = new ResultsApi(http://……api/);
            dynamic apiResultPdf = null;
            try
            {
                apiResultPdf = api.QueryResultsPostDynamic(ConstructPdfLookupQuery(id));
            }
            catch (Exception e)
            {
                @ViewBag.Message = "The result service timed out!";
                return View("Error");
            }
            var deserializedResult = JsonConvert.DeserializeObject(apiResultPdf.ToString());


          // return a File action to the object tag
            return File(deserializedResult.pdf, "application/pdf");
        }

Index.cshtml

<input type='button' data-toggle=\'modal\' url='GetPdfResult?id=#=ID#' class='btn btn-primary' value='Pdf' data-modal-id='popupwindow' />




<script>  $(document).on('click', '#resultsgrid .btn-primary', function (e) {
      var foo;
      var origFocus = document.activeElement;
      e.preventDefault();
      var btn = $(this);

      btn.text('Fetching...');

      var url = $(this).attr('url');

      if (url.indexOf('#') == 0) {
          $(url).modal('open');
      } else {
          $.get(url, function (data) {
               foo = $('<div class="modal fade" id="modalfade" aria-hidden="true" tabindex="-1" role="dialog">' + data + '</div>').modal();
          }).success(function () { $('input:text:visible:first').focus(); });
      }

  });
  </script>



Popup.cshtml 

<style>
    /*.row {
        line-height:24pt;
        border: solid 1px black;
    }*/


    .modal-body {
        width: 600px;
        margin: 0 auto;
    }

    #pdfbox {
        width: 700px;
        height: 700px;
        border: 5px solid #ccc;
    }
</style>

<div class="modal-dialog" id="application-attribute-modal-edit">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×;</button>
 
            <h4 class="modal-title">Report ID = @ViewBag.ID</h4>
        </div>

        <div class="modal-body row">
            <object id='pdfbox' style="width: 500px; height: 600px; overflow: hidden" type="application/pdf" data="@Url.Action("GeneratePDF", "Results", new { id= @ViewBag.ID })"></object>
        
        </div>
    </div>
</div>

Anuj holds professional certifications in Google Cloud, AWS as well as certifications in Docker and App Performance Tools such as New Relic. He specializes in Cloud Security, Data Encryption and Container Technologies.

Initial Consultation

Anuj Varma – who has written 1214 posts on Anuj Varma, Hands-On Technology Architect, Clean Air Activist.

---