title: How to display .pdf file in modal window?
body: <p>I have <code>.pdf</code> and <code>.html</code> file on the server. I want to display<code>.pdf</code> file in modal window. Currently, my .html file is working fine.</p>
  
  <p><code>@item.ExampleUrl</code> gives me <code>.pdf</code> and <code>.html</code> file.</p>
  
  <p>Please suggest me how to populate <code>.pdf</code> in the modal.</p>
  
  <p>Please have a look on <code>.pdf</code> file in the screenshot</p>
  
  <p><a href="https://i.stack.imgur.com/gp4a5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gp4a5.png" alt="enter image description here"></a></p>
  
  <p>Script</p>
  
  <pre><code> $(document).ready(function () {
              $('.openExamplefile').on('click', function () {
                  debugger;
                  var url = $(this).attr("data-url"); //page url  
                  if (url == "/files/examples/" || url == "/files/examples/ ") {
                      alert("There is no html file exists!")
                  }
                  else {
                      $("#PedigreesSireRacingModal").load(url, function () {
                        $("#PedigreesSireRacing").modal({ show: true });
                      });
                  }
  
              });
  
          });
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>public FileResult Download(string FileName)
  {           
              return File("~/files/examples/" + FileName, MimeMapping.GetMimeMapping(FileName),FileName);
  }
  </code></pre>
  
  <p>My modal</p>
  
  <pre><code>&lt;button id="ButtontoLink" type="button" class="openExamplefile" 
       data-url="/files/examples/@item.ExampleUrl"&gt;Example&lt;/button&gt;
  
  &lt;div class="modal" id="PedigreesSireRacing" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog" style="width:1250px;"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;&lt;label id="ProductName"&gt;&lt;/label&gt;  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="PedigreesSireRacingModal" class="modal-body racing"&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>