.NET MVC 给loading数据加 ajax 等待loading效果

最新推荐文章于 2022-11-13 10:02:19 发布

fengqingxin

最新推荐文章于 2022-11-13 10:02:19 发布

阅读量518

点赞数

Asp.net /.Net MVC 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在常用的门户社交类网站中我们往往会注意到在loading数据的时候会出现一个loading的效果

对我个人来讲，这样的效果有三个好处...

1，让我们知道我们点击了请求这时是有回应的

2，防止用户在loading数据的时候点击别的按钮出现混乱

3，AJax 请求数据更加专业显得我们的网站更加 friendly-UI

闲话少说，我们开始来讲如何在网站中 .Net MVC3中正常运用ajax添加这一效果

<!DOCTYPE html>
<html>
    <head>
        <title>@ViewBag.Title</title>   
        <style type="text/css">
/*后面通过设置position、top、bottom、left和right是它可以遮住整个页面，
并且将其背景设置为黑色。*/
            .hide{display:none }
            .progress{z-index: 2000}
            .mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #000000}
        </style>     
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
       
    </head>
    <body> 
        <div>@RenderBody()</div>
        <img id="progressImgage" class="progress hide" alt="" src="@Url.Content("~/Images/ajax-loader.gif")"/>
        <div id="maskOfProgressImage" class="mask hide"></div>
    </body>
</html>

在这里我用GIF图片和<div>遮罩定义在布局中，并为他们加上相应的css 样式

其中gif图片和遮罩 div的 z-index 分别为2000 & 1000。（只要前者比后者大即可，让gif显示在最上层即可）

接下来，我们通过为jquery定义一个方法ajax2 实现ajax调用

该方法依然调用$.ajax(options)来实现ajax调用

在ajax2方法中我们队options的参数compelte实现封装

让可以显示的gif图片和div隐藏起来，同时覆盖了 options的async属性，

这样总是以异步的方式来执行。

因为这样浏览器才能不被锁住 gif图片才能正常显示。再用$.load（options）进行ajax请求之前我们将gif图片显示出来，并对他们进行相应的设置。

 <script type="text/javascript">
            $(function () {
                $.load= function (options) {
                    var img = $("#progressImgage");
                    var mask = $("#maskOfProgressImage");
                    var complete = options.complete;
                    options.complete = function (httpRequest, status) {
                        img.hide();
                        mask.hide();
                        if (complete) {
                            complete(httpRequest, status);
                        }
                    };
                    options.async = true;
                    img.show().css({
                        "position": "fixed",
                        "top": "50%",
                        "left": "50%",
                        "margin-top": function () { return -1 * img.height() / 2; },
                        "margin-left": function () { return -1 * img.width() / 2; }
                    });
                    mask.show().css("opacity", "0.1");
                    $.ajax(options);
                };
            });
        </script>

最后我们进行ajax调用的时候去call 这个方法即可 $.load。

<a href="#" id="load">Load</a>
<div id="result"></div>
<script type="text/javascript">
    $("#load").click(function () {
        $.ajax2({
            url: '@Url.Action("GetContacts")',
            success: function(result)
            {
                $("#result").html(result);
            }
        });
    });
</script>