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);



    });