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