In this article I will explain with an example, how to display List of files from Folder (Directory) on Server's Disk in View in ASP.Net Core Razor Pages.
The Files can also be downloaded from Folder (Directory) in ASP.Net Core Razor Pages.
Folder (Directory) Location
The Folder (Directory) is located within the Project inside the wwwroot folder. Below is the screenshot of the Solution Explorer window where you can see the Folder (Directory) i.e. Files and it containing three files.
Model
Following is a Model class named FileModel with one property i.e. FileName.
public class FileModel
{
public string FileName { get; set; }
}
Namespaces
You will need to import the following namespaces.
using System.IO;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc.RazorPages;
Razor PageModel (Code-Behind)
The IndexModel class consists of two Handler methods.
Handler method for handling File Display operation
Inside the Handler method that handles the GET calls, the list of all files in the Files Folder (Directory) (present in the wwwroot Folder) is fetched using the IHostingEnvironment interface into a String Array using the GetFiles method of the Directory class.
Later, the values of the Array are copied to a Generic List collection consisting objects of FileModel class and then returned to the Razor Page.
Handler method for handling File Download operation
This Handler method handles the File Download operation and when the Download Link is clicked, the name of the File to be downloaded is sent to this method.
Note: The following Handler method performs File Download and hence the return type is set to FileResult.
First, the File is read as Binary Data into a Byte Array object using the ReadAllBytes method of the File class.
And then the Byte Array object is sent for download using the File function.
public class IndexModel : PageModel
{
public List<FileModel> Files { get; set; }
private IHostingEnvironment Environment;
public IndexModel(IHostingEnvironment _environment)
{
this.Environment = _environment;
}
public void OnGet()
{
//Fetch all files in the Folder (Directory).
string[] filePaths = Directory.GetFiles(Path.Combine(this.Environment.WebRootPath, "Files/"));
//Copy File names to Model collection.
this.Files = new List<FileModel>();
foreach (string filePath in filePaths)
{
this.Files.Add(new FileModel { FileName = Path.GetFileName(filePath) });
}
}
public FileResult OnGetDownloadFile(string fileName)
{
//Build the File Path.
string path = Path.Combine(this.Environment.WebRootPath, "Files/") + 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);
}
}
Razor Page (HTML)
The HTML of Razor Page consists of an HTML Table.
Displaying the Files
Using a FOR loop iteration over the Model, the HTML Table rows with the File records are added to the HTML Table.
Downloading the File
The HTML Table contains an HTML Anchor Link for downloading the File.
The URL of the Anchor Link is set using the @Url.Page method which accepts the following three parameters:
1. Name of the PageModel class.
2. Name of the Handler method.
3. The name and the value of the Parameters to be passed to the Handler method.
When the Download link is clicked, the DownloadFile Handler method is called and the File is downloaded.
Note: In the Razor PageModel, the Handler method name is OnGetDownloadFile but here it will be specified as DownloadFile when calling from the Razor HTML Page.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model Razor_File_Download.Pages.IndexModel
@using Razor_File_Download.Models
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<table>
<tr>
<th>File Name</th>
<th></th>
</tr>
@foreach (FileModel file in Model.Files)
{
<tr>
<td>@file.FileName</td>
<td><a href="@Url.Page("Index", "DownloadFile", new { fileName = file.FileName })">Download</a></td>
</tr>
}
</table>
</body>
</html>
Screenshot
Downloads