Download Files in Razor Pages without submitting the form (Edit page)

Question

Hi,

I want to download my uploaded files in razor pages edit screen. I dont want to submit the form or refresh the page upon clicking on the download button.
Could anyone please advice me how to acheive this?

Answer 1

Hi @Blooming Developer ,

You can use an <a> tag with the download attribute to download the file. Check the following sample code:

The AppFile model is the database entity, and the FileViewModel model is used to display data in the Edit page,

public class AppFile  
{  
    public int Id { get; set; }  
    public string FileName { get; set; }  
    public byte[] Content { get; set; }  
}  

public class FileViewModel  
{  
    public string FileName { get; set; } //used to display the file name from database.  

    public string FolderFileName { get; set; } //used to display the file name from the folder  
    public string FolderFilePath { get; set; }   //file parth  
    public byte[] FileContent { get; set; }       //the file content in the database.   
    public IFormFile FormFile { get; set; }       // this is used to upload file.  
}  

EditFile.cshtml.cs

public class EditFileModel : PageModel  
{  
    private readonly ApplicationDbContext _dbContext;  
    private readonly IWebHostEnvironment _hostenvironment;  
    public EditFileModel(ApplicationDbContext applicationDbContext, IWebHostEnvironment webHostEnvironment)  
    {  
        _dbContext = applicationDbContext;  
        _hostenvironment = webHostEnvironment;  
    }  


    [BindProperty]  
    public FileViewModel FileUpload { get; set; }  
    public void OnGet()  
    {  
        FileUpload = _dbContext.File.Where(c => c.Id == 1).Select(c => new FileViewModel() { FileName = c.FileName, FileContent = c.Content }).FirstOrDefault();  
        FileUpload.FolderFileName = "Image2.png";  
        FileUpload.FolderFilePath = "uploadfiles/Image2.png";  
    }  

    public FileResult OnGetDownloadFileFromFolder(string fileName)  
    {  
        //Build the File Path.  
        string path = Path.Combine(_hostenvironment.WebRootPath, "uploadfiles/") + fileName;  

        //Read the File data into Byte Array.  
        byte[] bytes = System.IO.File.ReadAllBytes(path);  

        //Send the File to Download.  
        return File(bytes, "application/octet-stream", fileName);  
    }  
    public FileResult OnGetDownloadFileFromDatabase(string fileName)  
    {  
        var bytes = _dbContext.File.Where(c => c.FileName == fileName).FirstOrDefault().Content;  
            
        //Send the File to Download.  
        return File(bytes, "application/octet-stream", fileName);  
    }  
}  

EditFile.cshtml

@page "/editfile"  
@model Core6RazorPage.Pages.Home.EditFileModel  
@{  
}  
<form enctype="multipart/form-data" method="post">  
    <table class="table">  
       <tr>  
           <td></td>  
           <td>FileName</td>  
           <td>Preview</td>  
           <td>Downlaod</td>  
       </tr>  
        <tr>  
            <td>Database</td>  
            <td>   
                @Html.DisplayFor(c=> c.FileUpload.FileName)  
            </td>  
            <td><img src="data:image/jpeg;base64,@Convert.ToBase64String(Model.FileUpload.FileContent)" /></td>  
            <td>  
                <a download href="@Url.Page("EditFile", "DownloadFileFromDatabase", new { fileName = Model.FileUpload.FileName})">Download From Database</a>  
            </td>  
        </tr>   
         <tr>  
             <td>Folder</td>  
            <td>   
                 @Html.DisplayFor(c=> c.FileUpload.FolderFileName)  
            </td>  
            <td><img src="@Model.FileUpload.FolderFilePath" /></td>  
            <td>  
                <a download href="@Url.Page("EditFile", "DownloadFileFromFolder", new { fileName = Model.FileUpload.FolderFileName})">Download From Folder</a>  
            </td>  
        </tr>   
    </table>   
</form>  

The result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion