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;
}
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
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");