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

guangqiang

浏览: 400462 次
性别:
来自: 青岛

最近访客更多访客>>

a450065208

qijojo

李虎强

hlbejy

博主相关

博客

微博

相册

留言

关于我

博客专栏

: wordpress步步高
浏览量：76364

: Web前端开发之路
浏览量：92999

: Flex/ActionSc...
浏览量：64179

: Android/IOS 开...
浏览量：35497

: PHP项目实战
浏览量：24578

文章分类

社区版块

存档分类

博客分类：

Asp.net /.Net MVC

asp.net asp net MVC load

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

Progress-4-ajax.rar (2.5 MB)
下载次数: 42

0
顶

0
踩

分享到：

国外 Android资源大集合和个人学习androi ... | 程序员必备软件集合！代替windows 自带软件 ...

2013-01-14 10:45
浏览 3135
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论