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

Question

Мое приложение выполняет несколько вызовов метода Action (ASP .NET MVC), который возвращает объект Json. Когда приложение ожидает, когда этот метод вернет свои данные, я хочу отобразить анимацию загрузки в центре страницы. Как бы я это сделал? Я знаю, что должен использовать JQuery, но это все, что я знаю.

Answer 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;
}

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

Answer 3

Другое решение, которое похоже на те, что уже были здесь представлены, это одно. Непосредственно перед закрывающим тегом body разместите этот 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 содержимое на лету при каждом событии навигации и включайте #resultloading div, обратите внимание, что оно изначально скрыто.

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, примите во внимание, что размер изображения не важен, поскольку он будет увеличен до 150x150px.

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

Answer 4

Вот как это работает, как заклинание.

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 (секунды)

---

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

---

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

---

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