Event loading when conducting queries in AJAX with ASP.NET MVC

Question

I’d like to know how to best place a Waiting to identify that the data of a survey is being processed, in case I have a table and can perform a search filter, when the request is sent I would like to put a notice to the user that the process is running, and as soon as it has a return that notice come out, how best ?

Answer 1

Use a loading for ajax requests. This link will help you choose a loading of your choice: https://loading.io/

Here’s an example of how you could put a global loading on your ajax calls.

<div class="load">
    <div class="img/load.gif"></div>
</div>


$(document).ajaxStop(function() {
     Block(false);
});

$(document).ajaxStart(function() {
     Block(true);
});


function Block(status) {
    if (status) {
        $(".load").show();
    } else {
        $(".load").hide();
    }
}

Call of Ajax

Block(true);
$.ajax({
    url: '@Url.Action("", "")',
    data: {
        id: id
    },
    type: 'POST',
    success: function(response) {
        Block(false);
    },
    error: function(jqXHR, exception) {
        var msg = '';
        if (jqXHR.status === 0) {
            msg = 'Not connect.\n Verify Network.';
        } else if (jqXHR.status === 404) {
            msg = 'Requested page not found. [404]';
        } else if (jqXHR.status === 500) {
            msg = 'Internal Server Error [500].';
        } else if (exception === 'parsererror') {
            msg = 'Requested JSON parse failed.';
        } else if (exception === 'timeout') {
            msg = 'Time out error.';
        } else if (exception === 'abort') {
            msg = 'Ajax request aborted.';
        } else {
            msg = 'Uncaught Error.\n' + jqXHR.responseText;
        }
        console.log(msg);
    }
});

Answer 2

You can do as I did on my application:

First I created a modal with a simple CSS of a running image and a loading message:

<div class="processandoMensagem">
  <div class="loader"></div>Processando
</div>

<style>
  .processandoMensagem
  {
    margin-top:10px;
    text-align: center;
    line-height: 100%;
    height: 100%;
    width: auto;
  }

  .loader {
    display: inline-block;
    border: 3px solid #f3f3f3; /* Light grey */
    border-top: 3px solid #de7006; /* Blue */
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 2s linear infinite;
    margin-right: 15px;
  }

@@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

</style>

At the beginning of your request you can call this modal and at the conclusion of it you close the modal. So simple.