In this article I will explain with an example, how to download files from Folder (Directory) using jQuery in ASP.Net Core Razor Pages.
The files will be downloaded as BLOB using jQuery AJAX and XmlHttpRequest (XHR) and then will be sent for download in the Browser using jQuery.
 
 
Location of Files
The files are stored in a folder named Files inside the project directory.
ASP.Net Core Razor Pages: Download Files from Folder (Directory) using jQuery
 
 
Razor PageModel (Code-Behind)
The PageModel consists of following Handler method.
Handler method for handling GET operation
This Handler method handles the GET calls, for this particular example it is not required and hence left empty.
public class IndexModel : PageModel
{
    public void OnGet()
    {
       
    }
}
 
 
Razor Page (HTML)
The HTML of Razor Page consists of a HTML DropDownList element.
The HTML DropDownList has been assigned with a JavaScript OnChange event handler.
When an Item is selected (changed) in the HTML DropDownList, the DownloadFile JavaScript function is called.
Inside the DownloadFile JavaScript function, the URL of the file is passed as parameter to the jQuery AJAX function.
Inside the jQuery AJAX function, using the XmlHttpRequest (XHR) call, the file is downloaded as Byte Array (Binary Data).
Note: The XmlHttpRequest (XHR) call is only supported in jQuery version 3.0 and higher.
 
Finally, the received Byte Array (Binary Data) is converted to BLOB object and the File is downloaded in Browser.
@page
@model Download_Files_Folder_jQuery_Razor_Core.Pages.IndexModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    Select File:
    <select id="ddlFiles" onchange="DownloadFile(this.value)">
        <option value=""></option>
        <option value="Sample.pdf">Sample.pdf</option>
        <option value="Sample.docx">Sample.docx</option>
        <option value="Sample.xlsx">Sample.xlsx</option>
        <option value="Sample.txt">Sample.txt</option>
        <option value="Sample.jpg">Sample.jpg</option>
    </select>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        function DownloadFile(fileName) {
            //Set the File URL.
            var url = "/Files/" + fileName;
            $.ajax({
                url: url,
                cache: false,
                xhr: function () {
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 2) {
                            if (xhr.status == 200) {
                                xhr.responseType = "blob";
                            } else {
                                xhr.responseType = "text";
                            }
                        }
                    };
                    return xhr;
                },
                success: function (data) {
                    //Convert the Byte Data to BLOB object.
                    var blob = new Blob([data], { type: "application/octetstream" });
 
                    //Check the Browser type and download the File.
                    var isIE = false || !!document.documentMode;
                    if (isIE) {
                        window.navigator.msSaveBlob(blob, fileName);
                    } else {
                        var url = window.URL || window.webkitURL;
                        link = url.createObjectURL(blob);
                        var a = $("<a />");
                        a.attr("download", fileName);
                        a.attr("href", link);
                        $("body").append(a);
                        a[0].click();
                        $("body").remove(a);
                    }
                }
            });
        };
    </script>
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages: Download Files from Folder (Directory) using jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code