在ASP.NET MVC中调用Action方法时，在页面中心显示加载动画 [英] Showing loading animation in center of page while making a call to Action method in ASP .NET MVC

问题描述

我的应用程序多次调用一个Action方法(ASP .NET MVC)，该方法返回一个Json对象.当应用程序正在等待此方法返回其数据时，我想在页面中心显示加载动画.我将如何完成?我知道我应该使用JQuery，但这就是我所知道的.

My application makes several calls to an Action method (ASP .NET MVC) which returns a Json object. When the application is waiting for this method to return its data I want to display a loading animation in the center of the page. How would I accomplish this? I know that I should use JQuery but that's all I know.

推荐答案

我在Site.Master中定义了两个函数:

I defined two functions in 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中定义:

Visual style is defined in 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;
}

这篇关于在ASP.NET MVC中调用Action方法时，在页面中心显示加载动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！