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>

The post Rendering PDF in a modal popup – asp.net mvc appeared first on Anuj Varma, Hands-On Technology Architect, Clean Air Activist.