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=)
{
Response.ContentType = "application/Json";
List<News> J= db.News.OrderByDescending(p => p.ID).Skip( * page).Take().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); });
MVC+JSON 无限滚动翻页的更多相关文章
- [置顶] ios 无限循环翻页源码例子
原创文章,转载请注明出处:http://blog.csdn.net/donny_zhang/article/details/9923053 demo功能:ios 无限循环翻页源码例子.iphone 6 ...
- 自己定义 ViewGroup 支持无限循环翻页之三(响应回调事件)
大家假设喜欢我的博客,请关注一下我的微博,请点击这里(http://weibo.com/kifile),谢谢 转载请标明出处,再次感谢 ################################ ...
- ★android开发--ListView+Json+异步网络图片加载+滚动翻页的例子(图片能缓存,图片不错乱)
例子中用于解析Json的Gson请自己Google下载 主Activity: package COM.Example.Main; import java.util.HashMap; import ja ...
- 手机APP上下滚动翻页效果
//页面初期加载时 $(document).ready(function () { //加载第一页 LoadList(); //滚动换页 $( ...
- WPF解决当ScrollViewer中嵌套ItemsControl时,不能使用鼠标来滚动翻页
1. ScrollViewer:滚动条容器,当内容超过指定的长度和宽度后,就会出现滚动条,而且可以使用鼠标中键来滚动, 简单例子如下: <Window x:Class="Connect ...
- 使用switchPage.js插件jQuery全屏滚动翻页
1. 先引入jquery.js,再引入switchPage.js 文件地址:点击打开链接 <script src="jquery.min.js"></script ...
- 滚动翻页vue
<template> <div class="home"> <div style="height:100%; width:100%;&quo ...
- 10 个 jQuery 的无限滚动的插件:
很多社交网站都使用了一些新技术来提高用户体验,而无限滚动的翻页技术就是其中一项,当你页面滑到列表底部时候无需点击就自动加载更多的内容. 下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. ...
- 【Android】无限滚动的HorizontalScrollView
这是一个很简单的功能,作为新手,做一下笔记.也给其它有需要的人提供一个参考. 首先HorizontalScrollView都知道用途了.它可以实现类似“桌面程序”左右切换页的效果.一般情况下里面的页数 ...
随机推荐
- sql server sys.object表字段说明
列名 数据类型 说明 name sysname 对象名. object_id int 对象标识号. 在数据库中是唯一的. principal_id int 如果不是架构所有者,则为单个所有者的 ID. ...
- http://www.cnblogs.com/fczjuever/archive/2013/04/05/3000680.html
http://www.cnblogs.com/fczjuever/archive/2013/04/05/3000680.html
- 初学swift笔记字典、数组(四)
import Foundation //字典 元素顺序是无序的 //1.字典元素是键值对 (key:value) //key 一定是可哈希的 string\int\bool var dic1=[&qu ...
- asp.net mvc4中model与Model的区别
@model模型定义 使用@model关键字可以定义一个Action里所对应的一个模型(经常可以叫他实体类), 其实是对动态变量进行实例化,这样就可以直接在cshtml文件中调用“Model”变量. ...
- ERS卫星
http://www.esa.int/Our_Activities/Operations/ERS-2 ERS-2 ROLE Earth observation (EO) LAUNCH DATE 21 ...
- jQuery粘性跟随滚动条滚动的导航栏源代码下载
jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...
- chroot_local_user和chroot_list_enable含义
很多情况下,我们希望限制ftp用户只能在其主目录下(root dir)下活动,不允许他们跳出主目录之外浏览服务器上 的其他目录,这时候我就需要使用到chroot_local_user,chroot_l ...
- wxpython 树形控件全选和取消全选
#encoding:utf-8 import wx import wx.lib.agw.customtreectrl as CT class MyFrame(wx.Frame): def __init ...
- Xcode7.3.1真机调试ios10
如果自己的ios测试机不小心升级到比Xcode更高的ios系统, 那么这时候是无法使用真机来进行调试的. 但是我们可以通过拷贝与测试机一样版本的系统来解决这个问题. 去下载一个Xcode8,然后安装, ...
- android 基本控件使用
http://tech.it168.com/a2012/0321/1327/000001327704.shtml Android_ListView_用代码控制ListView的位置 有三种方法 mli ...