Reputation: 6301
I have an ASP.NET MVC app. In my view, I have a button that says "Download". When a user clicks this button, the text changes to "Downloading...". My code for this looks like this:
View.cshtml
<button id="myButton" onclick="downloadClick();"><span>Download</span></button>
function downloadClick() {
$('#myButton').html('<span>Downloading...</span>');
window.location = '/download/latest';
}
This code successfully downloads a file. The controller action located at /download/latest
looks like the following:
MyController.cs
public class MyController {
public ActionResult DownloadLatest() {
var someUrl = "https://my-domain.com/files/latest";
using (var fileClient = new HttpClient())
{
var file = await fileClient.GetStreamAsync(fileUrl);
Response.ClearContent();
Response.ClearHeaders();
Response.AppendHeader("Content-Disposition", "Attachment; Filename=latest.txt");
return new FileStreamResult(file, "txt");
}
}
}
The file successfully downloads. However, I can't figure out how to restore the button text to just "download" after the response is retrieved. How do I do that?
Thank you!
Upvotes: 0
Views: 1564
Reputation: 381
Add a click event to your button that does an AJAX call. Then you can turn the spinner off on return.
$('#adcExportToExcel').click(function () {
$('#adcExportToExcel').spin('small');
var data = $("#adcResult").data('gridData');
data = JSON.stringify(data);
var actionUrl = '@Url.Action("GenerateExcelReport", "ADC")';
var getUrl = '@Url.Action("DownloadExcelReport", "ADC")';
$.ajax(actionUrl, {
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
data: data,
success: function (d) {
if (d.success) {
window.location = getUrl + "?fName=" + d.fName;
}
},
error: function () {
}
}).always(function() {
$('#adcExportToExcel').spin(false);
});
});
Upvotes: 1