Отображение загрузки анимации в центре страницы при вызове метода Action в ASP.NET MVC

Ответ 1

Я определил две функции в Site.Master:

    <script type="text/javascript">
    var spinnerVisible = false;
    function showProgress() {
        if (!spinnerVisible) {
            $("div#spinner").fadeIn("fast");
            spinnerVisible = true;
        }
    };
    function hideProgress() {
        if (spinnerVisible) {
            var spinner = $("div#spinner");
            spinner.stop();
            spinner.fadeOut("fast");
            spinnerVisible = false;
        }
    };
</script>

И специальный раздел:

    <div id="spinner">
        Loading...
    </div>

Визуальный стиль определяется в CSS:

div#spinner
{
    display: none;
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    background:url(spinner.gif) no-repeat center #fff;
    text-align:center;
    padding:10px;
    font:normal 16px Tahoma, Geneva, sans-serif;
    border:1px solid #666;
    margin-left: -50px;
    margin-top: -50px;
    z-index:2;
    overflow: auto;
}

Ответ 2

Вы можете сделать это, показывая div (если вы хотите сделать это модально, вы можете использовать blockUI - или один из многие другие модальные диалоговые плагины там) до запроса, а затем только до тех пор, пока обратный вызов не завершится успешно, вы можете использовать $.getJSON следующим образом (вы можете использовать .ajax, если хотите добавить правильную обработку ошибок)

$("#ajaxLoader").show(); //Or whatever you want to do
$.getJSON("/AJson/Call/ThatTakes/Ages", function(result) {
    //Process your response
    $("#ajaxLoader").hide();
});

Если вы делаете это несколько раз в своем приложении и хотите централизовать поведение для всех вызовов ajax, вы можете использовать глобальные события AJAX: -

$("#ajaxLoader").ajaxStart(function() { $(this).show(); })
               .ajaxStop(function() { $(this).hide(); });

Использование blockUI аналогично, например, с отметкой типа: -

<a href="/Path/ToYourJson/Action" id="jsonLink">Get JSON</a>
<div id="resultContainer" style="display:none">
And the answer is:-
    <p id="result"></p>
</div>

<div id="ajaxLoader" style="display:none">
    <h2>Please wait</h2>
    <p>I'm getting my AJAX on!</p>
</div>

И используя jQuery: -

$(function() {
    $("#jsonLink").click(function(e) {
        $.post(this.href, function(result) {
            $("#resultContainer").fadeIn();
            $("#result").text(result.Answer);
        }, "json");
        return false;
    });
    $("#ajaxLoader").ajaxStart(function() {
                          $.blockUI({ message: $("#ajaxLoader") });
                     })
                    .ajaxStop(function() { 
                          $.unblockUI();
                     });
});

Ответ 3

Так оно и было, как шарм.

CSS

#loader {
position:fixed;
left:1px;
top:1px;
width: 100%;
height: 100%;
z-index: 9999;

background: url('../images/ajax-loader100X100.gif') 50% 50% no-repeat rgb(249,249,249);
}  

в файле _layout внутри тега body, но вне контейнера div. Каждый раз, когда страница загружается, отображается загрузка. После загрузки страницы JS fadeout (второй)

<div id="loader">
</div>

JS внизу файла _layout

<script type="text/javascript">
// With the element initially shown, we can hide it slowly:
 $("#loader").fadeOut(1000);
</script>  

Ответ 4

Другое решение, похожее на то, что уже показано здесь, - это одно. Перед тегом закрытия тега разместите этот html:

<div id="resultLoading" style="display: none; width: 100%; height: 100%; position: fixed; z-index: 10000; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto;">
    <div style="width: 340px; height: 200px; text-align: center; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; z-index: 10; color: rgb(255, 255, 255);">
        <div class="uil-default-css">
            <img src="/images/loading-animation1.gif" style="max-width: 150px; max-height: 150px; display: block; margin-left: auto; margin-right: auto;" />
        </div>
        <div class="loader-text" style="display: block; font-size: 18px; font-weight: 300;">&nbsp;</div>
    </div>
    <div style="background: rgb(0, 0, 0); opacity: 0.6; width: 100%; height: 100%; position: absolute; top: 0px;"></div>
</div>

Наконец, замените .loader-text element's на лету на каждое событие навигации и включите div #resultloading, обратите внимание, что он изначально скрыт.

var showLoader = function (text) {
    $('#resultLoading').show();
    $('#resultLoading').find('.loader-text').html(text);
};

jQuery(document).ready(function () {
    jQuery(window).on("beforeunload ", function () {
        showLoader('Loading, please wait...');
    });
});

Это можно применить к любому проекту на основе html с jQuery, где вы не знаете, какие страницы вашей области администрирования займет слишком много времени, чтобы завершить загрузку.

Изображение gif - 176x176px, но вы можете использовать любую прозрачную анимацию gif, пожалуйста, учтите, что размер изображения не важен, так как он будет максимальным до 150x150 пикселей.

Кроме того, функция showLoader может быть вызвана щелчком элемента для выполнения действия, которое будет перенаправлять страницу, поэтому ей предоставляется отдельная функция. Надеюсь, это тоже поможет.