ASP.NET MVC利用PagedList分页（二）PagedList+Ajax+JsRender
<div id="cnblogs_post_body"> 昨天在ASP.NET MVC利用PagedList分页（一）的最后一节提到，一个好的用户体验绝对不可能是点击下一页后刷新页面，所以今天来说说利用Ajax+PagedList实现无刷新（个人绝对局部刷新更准确些）的分页。其实在PagedList.Mvc中早已经为我们提供好了Ajax分页的各种东东，但是这里我要自己写下。实现思想：
1、客户端发送Ajax请求。2、服务器端响应请求并将响应结果回传给客户端。3、客户端接收响应结果并进行数据绑定。
实现方案:
大多数人都知道这个思想，但是面对一个陌生的环境，我不得不理一下思路然后再讨论实现方案：1、利用Jquery Ajax发送分页请求。2、进行数据划分并利用SataticPagedList<T>（我个人比较喜欢这个，也可以用ToPagedList）绑定。3、利用Jquery Ajax接收数据并进行数据绑定。ok，实现方案出炉，下面直接上代码：
<div class="cnblogs_code">//View:Views/Person/Ajax<link href="/Content/PagedList.css" type="text/css" rel="Stylesheet" />......<script type="text/javascript" src="/Scripts/jquery-1.5.1.js"></script><script type="text/javascript"> $(function () { getPersonByAjax(1); }); //Ajax请求 var getPersonByAjax = function (pageNumber) { $.ajax({ url: "/Person/AjaxPage?page=" + pageNumber, type: "POST", dataType: "json", success: function (data) { //接收数据（data）并绑定 var html = ""; $.each(data.persons, function (i, item) { html += "<tr><td>" + item.FirstName + "</td><td>" + item.LastName + "</td><td><a href='/Person/Edit/" + item.PersonID + "'>Edit</a> | <a href='/Person/Details/" + item.PersonID + "'>Details</a> | <a href='/Person/Delete/" + item.PersonID + "'>Delete</a></td></tr>"; }); $("#personList").html(html); }, error: function (result) { alert(result.statusText); }, complete: function (jqXHR) { jqXHR = null; } }); }</script>//Controller:PersonController
//响应Ajax请求public ActionResult AjaxPage(int? page){ int pageIndex = page ?? 1; int pageSize = 2; int totalCount = 0; var persons = GetPerson(pageIndex, pageSize, ref totalCount); var personsAsIPageList = new StaticPagedList<Person>(persons, pageIndex, pageSize, totalCount); return Json(new { persons = personsAsIPageList},JsonRequestBehavior.AllowGet);}public List<Person> GetPerson(int pageIndex, int pageSize, ref int totalCount){ var persons = (from p in db.Persons orderby p.PersonID descending select p).Skip((pageIndex - 1) * pageSize).Take(pageSize); totalCount = db.Persons.Count(); return persons.ToList();}
(注：这里运用到了Json在服务器和客户端之间传递的知识额...我非常喜欢Json接收强类型对象，后头有机会慢慢谈下。)
页:
[1]