在ASP .NET MVC中调用Action方法时显示在页面中心加载动画

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