Seems easy and looks pretty much simple. One might say : “Hey, just start download, display the image,and then hide it ! That’s it !”.

In a way, that is true. That is the general idea. But there are a couple of hidden surprises. For example, you always trigger the download on the server side. Often, and in many cases, we use Response.End, to close the binary response stream that is letting us download the file. If you want to continue doing something after the download, you will not be able to, because Response.End closes everything, even AJAX success return event, including access to the session state variables in ASP.NET MVC. So avoid it. Just binary write the file, and continue doing whatever you are doing.
Also, cross browser spinner is little bit tricky, because Firefox is very keen on image paths,and Internet Explorer has its own world, and css properties like display: none; get messy when trying to hide the image with JQuery.show() and JQuery.hide() functions.

So let’s start from the user interface. This logic can be applied to any front end pages, nor necessarily ASP.NET MVC and Razor view. HTML, ASP, JSP, and so on.

We will first download free GIF, create Images directory in our ASP.NET MVC app, and add it right there, then right click on that directory and click on Add Existing Item. Select the image and hit ok. This is so that Visual Studio knows about this image in its Solution and Project resources. Safer.

In our _Layout.cshtml, we are going to modify its style, and just add jquery reference, from the folder that Visual Studio has already created for us when creating ASP.NET MVC App in Visual Studio 2017.Below is _Layout.chtml page

Then we switch to our Index.cshtml. And set HTML if-else for Internet Explorer to avoid display:none; and JQuery errors, and add the following Code to show our spinner, which we want it to be at the center of the screen:

Then we need to add a form with a download button, that once clicked on it will trigger the download ActionResult:

Now, once we click on the download button, we need the following JQuery function to handle the showing and hiding of spinner. This is where all the action happens:

In the function above, once the form starts to submit, JQuery onSubmit triggers. We first generate our unique front end token:

myGlobalToken = new Date().getTime(); //JavaScript time token

then set the hidden form’s input to this token:

$(‘#spinnerToken’).val(myGlobalToken); // set the hidden input our token value

The next ten lines of code, check the browser or user agent, and if it is IE, set the GIF manually,because JQuery.show() and JQuery.hide() render unexpected results in IE. Here we show the spinner. The line checkSessionState(); calls a function that will check when we need to hide the spinner.

Now, at this stage we are in Code Behind and in our MVC ActionResult
Download, which looks like this:

In the code above, we start timer, to measure how long it took to download, build our HTML string that we will convert it to PDF file later on with the help of PDFSharp and HTMLRenderer, prepare page layout to be Letter, with appropriate sizes, depending on our needs, generate the actual PDF with:

var output = PdfGenerator.GeneratePdf(HTMLstring.ToString(), configurationOptions);

also, we can set Font and Brush to access each generated page individually and draw and change it at runtime, with XFont and XBrush objects, for example. Hint. With those two objects we can set header and footer on each PDF page, but this is not the goal of this article.

Then we stop the timer:

downloadTimer.Stop();

Get the time it took to render our PDF, and set our Session that value:

Session[“timetooktodownload”] = timeTookToDownload;

Also, Set the token we created earlier on and assigned our hidden form field to the session:

Session[“spinnerToken”] = fc[“spinnerToken”].ToString().Trim();

Meanwhile, while we are inside our Download ActionResult, another ActionResult triggers :

public ActionResult CheckForSpinnerSession, with the code below:

From the code above, we return two variables to check them later in JavaScript: FileDownloadOK, and FileDownloadTime. The JS code is below:

It triggers each second, checking for the Session FileDownloadOK, to know when to hide the spinner. If tokens match, we trigger another function : hideSpinner, as seen below:

As you can see, here we also check for Internet Explorer, and if it is we set HTML to empty string, instead of using hide() and show() from JQuery. For the rest of the browsers we use .hide() fucntion .

After we hide the spinner, we show the download statistics, and time, in the following line of code:

The Front end page for our solution with all javascript code is below:

And the Home Controller with all Action Results is below:

Just to mention, that if you insist on using Response.End, and cannot go without it, then use cookies instead of Session State, in ASP.NET MVC or any kind of other we pages.