Showing Loading window on Submit and Retriving Data

Question

I'm just new to these ASP.NET developments and still studying and developing things.

So for my project I'm using a ADMIN LTE theme.

Here It has a loading page, Whenever I click to a page this loading screen shows up and then load the page.

<div class="preloader flex-column justify-content-center align-items-center">
  <img class="control-sidebar-animate" src="~/Addons/dist/img/AbdThub.png" alt="PAS Logo" height="80" width="100">
</div>

This code is on the Layout Page.

I want to know When clicking on a submit button on view, or Retrieving data I want to show this waiting image.

How can I use this on those actions?

Answer 1

for submit if you don't use ajax as explained here https://stackoverflow.com/a/21521228/11143288 :

$('form').submit(function () {
     $("#loader").show();;// Call (Show) loading box by default.
    if (Page_ClientValidate() != null) //Check if there is a validation on page.
        {
        if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
            $("#loader").hide();
        } 
    }
});

and for ajax calls :

$(document).ajaxStart(function(){
  // Show image container
  $("#loader").show();
});
$(document).ajaxComplete(function(){
  // Hide image container
  $("#loader").hide();
});