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

總結

以上是生活随笔為你收集整理的MVC+JSON 无限滚动翻页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。