Search code examples
javascriptasp.netasp.net-mvcbootstrap-modal

I want to click on text and display pdf in a modal


Currently I show the name of pdf documents in text and when clicked it calls a controller and then displays the PDF on the screen. I would like to click but instead of opening another screen the pdf file I would like a modal to open with the pdf.

I wanted to know what I can change in my code to do it, I leave below the view and controller that I use.

This is my view where I show the name of the document on the screen and when I click I send as a parameter an ID of the document that I want to show on the screen.

<a href="@Url.Action("GetPDF", "Home", new { Model.Id })">
 Document Name: @Model.documentType 
</a>

The controller receives the file ID and calls via a function get the file information from the database, get the byte of the file and convert it to PDF.

  public async Task<ActionResult> GetPDF(Guid id)
        {

            var vm = new ViewModels.Home.AttachmentViewModel();
            var result = vm.GetServiceAttachment(id));

            //Function to get the file information from DB .

            
            byte[] file;
            foreach (var attachment in result)
            {
              
                  file = attachment.File;

                  byte[] byteArray = file;


               return new FileContentResult(byteArray, "application/pdf");
            }
            return null;
    }


Solution

  • Disclaimer I am not the Author (Mudassar Khan) that is the subject of this download demo https://www.aspsnippets.com/demos/1261/ but this seems to be what you are after. It can be configured according to your required size etc. source is at https://www.aspsnippets.com/Handlers/DownloadFile.ashx?File=96826afb-6258-4d2a-9e75-27593f30bfdb.zip

    enter image description here

    The Problem with using Modals is not knowing a user current screen size. To adjust for an average desktop user I would suggest the modal be wide but not too tall and be scalar by use viewport related 98% settings

    $("#btnShow").click(function () {
                    $("#dialog").dialog({
                        modal: true,
                        title: fileName,
                        width: 1440,
                        height: 800,
                        buttons: {
                            Close: function () {
                                $(this).dialog('close');
                            }
                        },
    

    also alter fixed size to

                            var object = "<object data=\"{FileName}\" type=\"application/pdf\" width=\"98%vw\" height=\"98%vh\">";
    

    To allow for the majority of users as Chromium based (Brave, Chrome, Edge etc.), If you wish to fit the PDF height ("#view=fitV") alter by add into this line

    object = object.replace(/{FileName}/g, "Files/" + fileName + "#view=fitV");
    

    enter image description here