Event loading when performing AJAX queries with ASP.NET MVC

Question

Event loading when performing AJAX queries with ASP.NET MVC

Navigation

#1 by (3 votes)
#2 by (2 votes)

5

I would like to know how best to put a Waiting any to identify that the data of a search is being processed, in the case I have a table and I can perform a search filter, when the request is sent I would like to put a warning to the user that the process is running, and as soon as it has a return that warning comes out, which is the best way?

c# ajax asp.net-mvc

asked by anonymous 01.09.2017 / 19:38

2 answers

Declare a Liststring and display in xaml problem cordova-plugin-network-information with inic v3

score 3 · Answer 1

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

Here is an example of how you could put a global loading in your ajax call.

<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();
    }
}

Calling 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);
    }
});

score 2 · Answer 2

You can do as I did in my application:

FirstIcreatedamodalwithasimpleCSSofanimagerunningandaloadingmessage:

<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. Simple as that.