MVC3: Awaiting File Download with Progress Indicator

After completing my research and looking through similar threads, I still haven't found a satisfactory answer to my problem.

I am currently working with MVC3, C#, and the Razor View Engine.

The situation I'm dealing with is quite straightforward. I have a view that contains a link which triggers an action on a controller. This action generates a file dynamically, a process that can take anywhere from 1 to 10 seconds. During this time, I would like to lock the UI and display a "Please Wait" message.

In my initial attempt, I tried using the following code:

@Ajax.ActionLink("my test link", "myAction", new { Controller = "myController" }, new AjaxOptions { OnBegin = "ajaxStart", OnComplete = "ajaxStop" }) 

The ajaxStart and ajaxStop functions were supposed to utilize the jQuery blockUI script to block and unblock the UI while displaying the "Please Wait" message. Although this method showed the message, it failed to initiate the file download. Further investigation revealed that I couldn't use Ajax to trigger a file download. If I've misunderstood this, please clarify.

Therefore, I reverted back to a regular ActionLink. It allows me to download the file successfully. I can even capture the .click event to block the UI and show the waiting message. However, the challenge lies in determining when to unblock the UI. How can I detect when the file save/open dialog box appears? If I could capture that event, I might be able to unblock the UI at the appropriate time.

I have come across other suggestions recommending a more intricate solution involving splitting the file generation/download into separate functionalities. I am keen on avoiding options that involve saving the file on the server or polling the server for completion status. The desired solution should be relatively simple.

If anybody has any insights or ideas, please share them with me.

Thank you, Tony

Answer №1

Some time ago, there was a discussion on this topic on SO: Detecting when the browser receives a file download

A resource mentioned in the post is:

The method essentially involves sending a cookie (generated in C#) along with the file being downloaded to the client. Once the client has the cookie (presumably after the file download), JavaScript will verify its presence and, if found, unblock the UI.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting: WordPress failing to launch Bootstrap Modal

I recently transformed my PHP website into a WordPress theme, but unfortunately, I am facing an issue with my Bootstrap modal not opening in WordPress. ***Header.php*** <a id="modal_trigger" href="#modal" class="sign-in-up"><i class="fa fa-user ...

Every time the page is refreshed, the value stored in React localStorage gets

After adding a new item to the list, the local storage gets updated. However, upon page refresh, I noticed that the key remains but the value is reset to an empty array. import { useState, useEffect } from 'react'; function App() { const [data ...

What is the preferred method for converting IEnumerable to a List?

I have a query regarding a specific scenario. My data repository provides me with all the data of type IEnumerable<Customer>. Within my business logic, there are times when I require lists to be able to add items, for example. When I receive the IE ...

Exploring the magic of Hover effects using CSS and JQuery

I am exploring ways to enhance the display of an element when hovering over it. I have implemented a button and my objective is for the first click to activate the hover effect, while the second click will reset it. However, I am facing an issue where the ...

What could be the reason behind the validation failure of this Javascript code?

After implementing your recommendation, this is my current status: <script> function tick() { const React.element = ( '<div><marquee behavior="scroll" bgcolor="lightyellow" loop="-1" width="100%"> <i> <font color ...

"Troubleshooting null values in an Angular form submission handled by a C# MVC

Having issues sending data from AngularJS to a C# MVC controller. Even though the data is collected properly (confirmed by viewing them with console.log), they are not being received correctly in the C# controller, resulting in null values being stored in ...

Is there a method in CSS animations that allows for endlessly repeating successive animations in a specified sequence?

While working with CSS animations, I encountered a challenge of making two animations occur successively and repeat infinitely without merging keyframes. Is there a way to achieve this using only CSS? If not, how can I accomplish it using JavaScript? I a ...

What is the best way to incorporate flags in a nodejs application when using npm run-script?

I have a NodeJS file that I execute using an "npm" command. I've been attempting to display all arguments (including flags). When the file is executed by directly calling the node executable, it functions correctly. However, when I use the npm command ...

When utilizing $resource, Protractor experiences a timeout while trying to synchronize with the page

Currently, I am testing Protractor with a small AngularJS application. Here is the test scenario: describe('Testing Protractor', function() { var draftList; it('should count the number of drafts', function() { browser.get(&ap ...

Personalized labels for your JQuery Mobile sliders

Struggling to make this work correctly, I aim to introduce tick marks and custom labels into jQuery Mobile's slider widget. My goal is to add tick markers at 0, 25, 50, 75, and 100 with a unique string above each tick. Additionally, I want these label ...

Exporting an ASP.NET Panel using iTextSharp

I have recently downloaded the most recent version of the iTextSharp DLL from here. I am using this to export a simple Panel tag in C# to a PDF. <asp:Panel ID="views" runat="server"> <fieldset style="margin-left: 50px"> <legend ...

Error encountered while attempting to login to the Winston Logger in the /var/log directory

After hours of attempts, I am still struggling to get Winston to log in my /var/log directory on my Fedora system. I conducted a test project using Express and found that logging works fine within the project directory. However, when attempting to log any ...

How can I transfer a response from one function to another function using AJAX in Django's HTML?

When a user searches for a flight and selects an offer, a dictionary of flight data is generated. I want to pass this flight data in the URL without allowing the user to read or modify it. Currently, I have used the following code to pass the flight data: ...

Activate the JavaScript loader while data is being fetched

I'm currently working on incorporating a loader into my website that should remain visible throughout the entire loading process. For example, if the load time is around 6.8 seconds (with 6.3 seconds of waiting and 0.4 seconds of downloading), I want ...

Breaking Down the Process of Exporting a Next.js Static Website into Manageable Parts

I am facing memory issues while building my website using Next.js's Static HTML Export. The site has a large number of static pages, approximately 10 million. Is it feasible to export these pages in batches, like exporting 100k pages in each build ite ...

How do I specify the default checked value for a checkbox in Redux Form?

Within our Redux Form 5.3 application (not version 6.x), the goal is to display an <input type="checkbox" /> in this manner: // Sometimes, fieldHelper.checked starts off as undefined. When a checkbox is // clicked by the user, fieldHelper.checked is ...

Utilizing Scrollify for seamless section scrolling with overflow effects

I have been experimenting with the Scrollify script (https://github.com/lukehaas/Scrollify) and facing an issue where my sections are longer than the user's screen, requiring them to scroll down to view all content. However, Scrollify doesn't al ...

Svelte's feature prevents users from inputting on Mapbox

My goal is to prevent user input when the variable cssDisableUserInput is set to true. Here's what I have within my main tags: <div id=userinput disabled={cssDisableUserInput}> <div id="map"> </div> Within my CSS, I&a ...

Rails Navigation Issue: JQuery Confirmation Not Functioning Properly

Having a Rails app, I wanted to replicate the onunload effect to prompt before leaving changes. During my search, I came across Are You Sure?. After implementing it on a form, I noticed that it only works on page refreshes and not on links that take you a ...

Executing Cascading Style Sheets (CSS) within JQuery/Javascript

I've been encountering a problem with my website. I have implemented grayscale filters on four different images using CSS by creating an .svg file. Now, I'm looking to disable the grayscale filter and show the original colors whenever a user clic ...