Detecting the return of a file in an ASP.NET view to conceal an image

Is there a way to detect when ASP.NET returns a file? I recently added code to my project to show a loading gif whenever a button is pressed.

<script type="text/javascript>
jQuery('.btn').click(function() {
    jQuery".loader").show();
});

I have successfully set up a loader div and applied CSS to display the GIF. Everything works perfectly when the button triggers controller code that uses RedirectToAction. However, an issue arises when the controller returns a File(). With RedirectToAction, the page reloads, causing the loading gif to disappear. But with a file return, the loading gif remains on the screen.

Does anyone have any suggestions on how to hide the gif when a file is returned or perhaps a more effective way to manage the loading gif overall? I am open to restructuring my approach, so any advice would be appreciated.

Answer №1

One helpful option to consider is utilizing the UpdatePanel and UpdateProgress controls.

Check out UpdatePanel on MSDN for more information.

Learn about UpdateProgress on MSDN here.

In Brief

The UpdatePanel houses your page controls while the UpdateProgress indicates where a loading gif will appear.

Take a look at this example:

<asp:UpdatePanel runat="server" id="updExample">
    <ContentTemplate>
        <asp:Button runat="server" id="btnSubmit" Text="Submit"></asp:Button>
    </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdateProgress runat="server" id="uppExample">
    <ContentTemplate>
        <div class="progress-loader">
            <img src="/App_Themes/Default/Images/loader.gif" />
        </div>
    </ContentTemplate>
</asp:UpdateProgress>

If you follow this setup, the loader gif will be displayed upon clicking the button associated with the form on your page.

We hope this explanation proves useful. Best of luck!

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

Transferring information between container and component with Meteor React

I'm facing a challenge with passing data from a container to a component in the context of Meteor and React. Despite following the steps in the Meteor React tutorial and making some customizations, the code doesn't seem to be working as expected. ...

Using the ElasticSearch NEST .NET library to establish a parent for a child object in ElasticSearch

I am currently working with a basic one to many structure in my project. public class Person { public int PersonId { get; set; } public string Name { get; set; } public List<Skill> Skills { get; set; } } public class Skill{ ...

Unable to insert additional lines into diamond shape generated solely with CSS

Is there anyone out there who can assist me in creating this logo using CSS? View the image of the logo here I initially attempted to make a square with width and height, followed by experimenting with pseudo elements. However, I hit a roadblock because ...

Managing the "Accept Cookies" notification using Selenium in JavaScript

As I use Selenium to log in and send messages on a specific website, I am faced with a cookie popup that appears each time. Unfortunately, clicking the accept button to proceed seems to be quite challenging for me. Here is an image of the cookie popup Th ...

Tips on utilizing ng-switch-when to handle non-empty JSON data?

I am relatively new to using AngularJS and I have a JSON structure within my application. I am looking to implement ng-switch to display content from this JSON when it is not empty (as it is an array). The JSON I am referring to is quite large and I am spe ...

The touch events are not detected on Pixi.js when buttons are placed on a stage that has been both scaled and

Currently, I am developing a game using pixi js. In order to ensure that the game appears consistent on all screens, I have implemented the following scaling logic: this.scale = Math.max(this.viewWidth, this.viewHeight) / (2048 * this.ratio); Additionall ...

Creating an image in JavaScript from PNG data

Sorry if this is a basic question, but I'm still learning about working with images. I have a PHP script that generates a PNG image. The final two lines of the script are header('Content-Type: image/png'); imagepng($image); I am trying to ...

jQuery doesn't seem to be generating the desired output, instead it provides the following results

(function() { var a = document.createElement('a'); var mref = 'http://www.someprivatelink.net'; var linkText = document.createTextNode(title1); var title1 = $('#node-264152').find('.audio-description' ...

"Encountered an issue with loading the file or assembly in the child application related to handlers

My IIS setup includes a parent application (Default Website) with multiple child applications. I am currently working on implementing an HTTP handler in the parent application, which will serve as the gateway for all child applications. However, after depl ...

How to adjust the size of an SVG image on an HTML webpage

I've got an SVG file nestled inside my HTML code, and one of the cool things I've learned about this format is its ability to stay crisp and clear even when zoomed in. Typically, with a JPEG file, you might store it as a small 50 by 50 icon, the ...

Analyzing the Object Property Levels along with the Availability of Optional Properties

I'm in a bit of uncharted territory here, looking for some guidance on whether what I need actually exists... Scenario: I'm working with Firestore to store data and constructing a custom hook (React 16.8) that can be used whenever I want to save ...

Testing a promise with Jasmine unit testing through mocking

I'm struggling with testing my promise unit test. An assertion "expect(scope.test).toBe(12);" has been added to the promise then block in my code. Here is the snippet of code I am attempting to test: $scope.getBudgets = function(){ BudgetServic ...

Create object keys without relying on any ORM or database management systems like mongoose or mongodb

Exploring a Mongoose Object: recipe = { "ingredients": [ { "_id": "5fc8b729c47c6f38b472078a", "ingredient": { "unit": "ml", "name" ...

Why does the for loop function correctly with console.log but not with innerHTML?

Hello! I'm completely new to JavaScript, so please excuse any oversight... Below is the code that runs when a button on the page is clicked: function getNumbers() { var firstValue = document.getElementById("time_one").value; var ...

Using Ajax to send data to a model within another model in ASP.NET Core MVC

I'm new to this platform and I'm curious about sending model data within another model from ajax to controller. Here are my models: public class mfItems { [Key] [Display(Name = "Item ID")] public string ItemID { get; set; } ...

The model binder fails to bind my model class by default

I am facing an issue with utilizing the Default Model Binder functionality in ASP.NET MVC 2 while trying to create a post... Upon clicking the checkout button, I dynamically populate a form using jQuery code and then proceed to submit it to the server. He ...

Modal dismissed, yet the scroll bar fails to reappear

I am currently facing an issue with a Bootstrap 3 modal in my project. When I close the modal using the 'close button' or the 'x' in the top right corner, the page returns to its proper state with a vertical scroll bar showing. However, ...

Issue: setAllcategories function not found

Currently engaged in using Next.js and Sanity as a Headless CMS for the backend. In the code snippet below, I have created a Categories.js file in the components folder to fetch some data. My objective is to extract all the titles from the category Array. ...

The division is refusing to make an appearance

As I embark on creating my very first website, I'm encountering some obstacles in translating my vision into reality. The #invokeryolo div is proving to be elusive and no matter how hard I try, I can't seem to make it appear on the screen. Below ...

Ways to validate code that relies on browser APIs

I am currently utilizing Node to run my unit-tests. There is a JavaScript module that I need to test in the browser. My code is considered "isomorphic", meaning it does not use language features that are unavailable in Node, such as exports. However, it ...