Hi,
Based upon your sample shown here Download File using jQuery AJAX in ASP.Net I made another sample to make it more real.
What I did is: add an extra textbox and validate it as a required field and put the file's name as a hiddenfield.
The code works fine but the jquery console comes up with an error.
The issues seems to point at $("body").remove(a);
jquery.min.js:2 Uncaught TypeError: n.replace is not a function
at Function.nt.matchesSelector (jquery.min.js:2)
at Function.filter (jquery.min.js:2)
at init.remove (jquery.min.js:2)
at Object.success (VB.aspx:103)
at l (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at T (jquery.min.js:2)
at XMLHttpRequest.r (jquery.min.js:2)
Here is my page
<body>
<form runat="server">
<asp:HiddenField ID="hFilename" runat="server" ClientIDMode="Static" Value="Sample.pdf" />
<asp:TextBox ID="txtName" runat="server" ValidationGroup="gr1"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="RequiredFieldValidator" ValidationGroup="gr1"></asp:RequiredFieldValidator>
<asp:Button ID="btnNew" runat="server" Text="Button" OnClientClick="if (Validate()) { DownloadFile()}" ValidationGroup="gr1" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function Validate() {
if (Page_ClientValidate()) {
return true;
}
return false;
}
</script>
<script type="text/javascript">
function DownloadFile() {
var fileName = $('#<%=hFilename.ClientID%>').val();
$.ajax({
type: "POST",
url: "VB.aspx/DownloadFile",
data: '{fileName: "' + fileName + '",txtName:"' + $('#<%=txtName.ClientID%>').val() + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
//Convert Base64 string to Byte Array.
var bytes = Base64ToBytes(r.d);
//Convert Byte Array to BLOB.
var blob = new Blob([bytes], { 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);
}
}
});
};
function Base64ToBytes(base64) {
var s = window.atob(base64);
var bytes = new Uint8Array(s.length);
for (var i = 0; i < s.length; i++) {
bytes[i] = s.charCodeAt(i);
}
return bytes;
};
</script>
</form>
</body>
In my real live sample the txtName is being inserted in a db alongside several other fields, but this isn't the scope of my question.
<WebMethod()>
Public Shared Function DownloadFile(ByVal fileName As String, ByVal txtName As String) As String
'Set the File Folder Path.
Dim path As String = HttpContext.Current.Server.MapPath("~/Files/")
'Read the File as Byte Array.
Dim bytes As Byte() = File.ReadAllBytes(path & fileName)
'Convert File to Base64 string and send to Client.
Return Convert.ToBase64String(bytes, 0, bytes.Length)
End Function
