knockout Ajax异步无刷新分页 Demo +mvc+bootstrap

最近工作中web客户端需要用到knockout,在此记录下一些Demo，以后用到的时候查找起来方便。也希望给新入门的knockout使用者一点经验。knockout官方文档。这儿是一个使用knockout分页的小demo,使用的框架是mvc，javascript框架有jquery,knockout,bootstrap。

先上效果图

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace KnockOutPageDemo.Controllers
{
public class PageListController : Controller
{
// GET: PageList
public ActionResult Index()
{
return View();
}
/// <summary>
/// 异步请求的分页数据，返回一个json对象
/// </summary>
/// <returns></returns>
public ActionResult PageList()
{
//请求的页码
int pageIndex = int.Parse(Request.Form["pageIndex"]);
//每页显示多少条数据
int pageSize = 10;
//取到请求页码的数据
List<News> news = GetNewsData().Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();
//获取总的数据行数
int rowCount = GetNewsData().Count();
//构建数据模型
PageModel pageData = new PageModel()
{
PageIndex = pageIndex,
PagedData = news,
PageCount = rowCount / pageSize

};
//返回数据
return Json(pageData, JsonRequestBehavior.AllowGet);
}
public List<News> GetNewsData()
{
List<News> news = new List<News>();
for (int i = 0; i < 30; i++)
{
news.Add(new News { Title = "天黑黑", Content = "路上小心" });
news.Add(new News { Title = "雨滂滂", Content = "记得带伞" });
news.Add(new News { Title = "人熙熙", Content = "快点回家" });
}
return news;
}
}

//分页数据实体
public class PageModel
{//请求页码的数据
public List<News> PagedData { get; set; }
//请求的页码
public int PageIndex { get; set; }
//页码的大小
public int PageSize { get; set; }
//总页数
public int PageCount { get; set; }
//总行数
public int RowCount { get; set; }
}
//新闻模型
public class News
{
public string Title { get; set; }
public string Content { get; set; }
}
}

View Code

本文地址：/article/5885424.html

博客地址：http://www.cnblogs.com/santian/
转载请以超链接形式标明文章原始出处。