MVC+JSON 无限滚动翻页


public
partial class News { public int ID{ get; set; } public int Title{ get; set; } }

 

///控制器 返回JSON 格式化JSON我用了第三方的:Newtonsoft.Json 
public string List(int page=1) {
  Response.ContentType = "application/Json";   List
<News> J= db.News.OrderByDescending(p => p.ID).Skip(10 * page).Take(10).ToList();   return JsonConvert.SerializeObject(J); }

 

<div class="content">
    <ul class="list" id="container">
    </ul>
    <div style="text-align:center;padding:10px;" id="load">点击显示数据</div>
</div>

 

javascript 需要jquery支持

    var i = 1;
    function JsonLoad() {
        LoadJsonDate(i);
    }

    function LoadJsonDate(pageindex) {
        i++;
        $.get("/json/List", { page: pageindex}, function (data) {
            if (data.length > 0) {
                var jsonObj = JSON.parse(data);
                AddDate(jsonObj);
            } else {
                $("#load").html("没有了...");
            }
        });
    }

    function AddDate(jsondate) {
        var html = '';
        for (var j = 0; j < jsondate.length; j++) {
            html += "<li><a href=\"View/" + jsondate[j].ID + "\">" + jsondate[j].title + "</a></li>";
        }
        $("#container").append(html);

        if (j < 10) {
            $("#load").html("没有了...");
        }
    }


    $(function () {

        JsonLoad();//打开页面就加载


        //点击底部加载区就加载//为防止某些低版本手机滚动条事件不稳定
        $("#load").click(function () {
            $("#load").html("<img src=\"load.gif\" alt=\"正在加载\"/>");
            setTimeout("JsonLoad()", 500);//延时加载
        });


       
        var winH = $(window).height();
        var scrollHandler = function () {
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop();
            var h = (pageH - winH - scrollT) / winH;
            $("#load").html("点击显示下10条");
            if (h <= 0) {
                $("#load").html("<img src=\"load.gif\" alt=\"正在加载\"/>");
                setTimeout("JsonLoad()", 500);//延时加载
            }
        }

        $(window).scroll(scrollHandler);

    });

 

 

 

 

转载于:https://www.cnblogs.com/chr1219/p/3696004.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值