Глобальное уведомление «Загрузка» с вызовами ASP.NET MVC Ajax

Question

Я заинтересован в том, чтобы предоставить общее уведомление "Я делаю вызов ajax" ... аналогично тому, как большинство служб Google имеют небольшое красное уведомление о загрузке, когда он занят вызовом. Есть ли способ глобально подключиться к какому-либо событию, которое я могу использовать, чтобы показать / скрыть это уведомление, если есть активный вызов?

Мы не используем jQuery ajax apis, мы используем материал MVC Ajax ... такой как Ajax.BeginForm или Ajax.ActionLink.

Answer 1

Я не уверен, почему был принят предыдущий ответ, но вы можете просто использовать параметр LoadingElementId в ваших AjaxOptions , указав идентификатор элемента на вашей странице, который имеет display свойство CSS, установленное на none .

new AjaxOptions { UpdateTargetId = "somebox", LoadingElementId = "status-waiting" }

MVC сделает всю остальную работу за вас: когда запрос инициируется, DIV будет показан, а после его завершения - снова скрыт. Все, что вам нужно сделать, это оформить рамку (расположить ее, предоставить изображение для загрузки и т. Д.).

Answer 2

Если вы используете JQuery для совершения вызовов AJAX , вы можете использовать что-то между строк:

jQuery.ajax({
    url: 'url_to_send_ajax_request_to',
    beforeSend: function(XMLHttpRequest) {
        jQuery('#id_of_some_div_that_contains_loading_text').show();
    },    
    complete: function(XMLHttpRequest, textStatus) {
        jQuery('#id_of_some_div_that_contains_loading_text').hide();
    }
});

Обработчик beforeSend можно использовать для отображения скрытого div, содержащего загружаемый текст или изображение, тогда как обработчик complete будет использоваться для его скрытия (независимо от того, успешен ли вызов или нет ).

Или, если вы хотите настроить его глобально для всех запросов AJAX, вы можете использовать функцию ajaxSetup :

jQuery.ajaxSetup({
    beforeSend: function(XMLHttpRequest) {
        jQuery('#id_of_some_div_that_contains_loading_text').show();
    },    
    complete: function(XMLHttpRequest, textStatus) {
        jQuery('#id_of_some_div_that_contains_loading_text').hide();
    }
});