欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-20 16:32:27
...

在常用的门户社交类网站中 我们往往会注意到在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>