ASP.NET MVC利用PagedList分页（二）PagedList+Ajax+JsRender

（原文）

　　昨天在ASP.NET MVC利用PagedList分页（一）的 最后一节提到，一个好的用户体验绝对不可能是点击下一页后刷新页面，所以今天来说说利用Ajax+PagedList实现无刷新（个人绝对局部刷新更准确 些）的分页。其实在PagedList.Mvc中早已经为我们提供好了Ajax分页的各种东东，但是这里我要自己写下。

　　实现思想：

　　　　1、客户端发送Ajax请求。2、服务器端响应请求并将响应结果回传给客户端。3、客户端接收响应结果并进行数据绑定。

　　实现方案:

　　大多数人都知道这个思想，但是面对一个陌生的环境，我不得不理一下思路然后再 讨论实现方案：1、利用Jquery Ajax发送分页请求。2、进行数据划分并利用SataticPagedList<T>（我个人比较喜欢这个，也可以用 ToPagedList）绑定。3、利用Jquery Ajax接收数据并进行数据绑定。ok，实现方案出炉，下面直接上代码：

//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接收强类型对象，后头有机会慢慢谈下。)

 　　在写“接收数据（data）并绑定之前”我还在天真的想，personAdIPagedList不会回吧HasPreviousPage、HasNextNextPage也传递过来呢？于是我用Fillder服务器端到底会传递什么回来，结果如下：

　　挂了，貌似他至传回了persons的json数据，那分页咋办呢？原来在IPagedList<T>中有个GetMetaData，他会返回一个PagedListMetaData对象，在这里进行了分页导航相关属性的分装：

　　添加分页导航

　　good，这下我可以完善我的代码了。 如下：

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, pager = personsAsIPageList.GetMetaData() }, JsonRequestBehavior.AllowGet); }

 

　　可以看到这里PagedList传回了所有的分页信息。所以可以做分页导航了：

//创建分页导航
                var pager = data.pager;
                html = ""; if (pager.HasPreviousPage) { html += "<a href='#' οnclick='getPersonByAjax(" + (pager.PageNumber - 1) + ");return false;'>&lt;&lt;</a> <a href='#' οnclick='getPersonByAjax(1);return false;'>&lt; Prev</a>"; } else { html += "&lt;&lt; &lt; Prev"; } html += " "; if (pager.HasNextPage) { html += "<a href='#' οnclick='getPersonByAjax(" + (pager.PageNumber + 1) + ");return false;'>Next &gt;</a> <a href='#' οnclick='getPersonByAjax(" + pager.PageCount + ");return false;'>&gt;&gt;</a>"; } else { html += "Next &gt; &gt;&gt;"; } $("#pager").html(html);

 　　将上面代码插入success中，分页就创建好了。当我正在高兴的时候我大概忘记了刚刚做字符串拼接的辛苦。冷静下来后我和PagedList提供的实例(好像忘了给地址，给一个：https://github.com/TroyGoode/PagedList)进行了对比，对比结果是我无比蛋疼。在其提供实例中用到了jquery.tmpl.js，原来我们真的不用做如此多的字符处啊拼接工作。

　　优化绑定

　　jquery.tmpl.js是一个模板插件，能够用对象或数据等对模板（包含html、css等标签和绑定表达式。）进行渲染，举个例子："<li class='XXX' id='liTemplate'>${name}</li>"这就是一个模板，包含html、css和绑定表达式（${name}），现在我们只需利用：$.template("templateName",$('#liTemplate').html());$.tmpl(templateName，list).appendTo('#liContainer');将模板渲染(tmpl)然后插入容器(liContainer)展示即可。第一句将liTemplate标记为一个模板，名称为templateName。第二句利用list将templateName进行渲染，然后插入到liContainer中。list可以使一个数据，也可以是一个对象，例如：var  list = {"name":"hello world","name":"heihei"}。总之，tmpl可以让我们不用在写字符串连接，它的可见性太差了，极其难维护。同时，利用tmpl需要三要素：模板，容器，数据。利用数据渲染模板，将结果插入容器中我们便可以轻松完成js中的数据绑定。

　　事后，我在其官网（https://github.com/jquery/jquery-tmpl）上查阅了相关治疗，发现jquey.tmpl还停留在测试期，并且不再提供升级，被jquery放弃了。。。下一代jquery 模板由JsRender和JsViews承担，相关资料可以去官网上看（JsRender：https://github.com/BorisMoore/jsrender;JsViews:https://github.com/BorisMoore/jsviews）。JsRedner和tmpl差不多，但是据介绍说，JsRender的渲染速度比tmpl快很多很多，到底快多少我也不知道，而且给我的直观感受就是，JsRedner比tmpl的语法简单的写。。这个我喜欢。JsRender强调纯粹的基于字符串的渲染，而且可以不需要dom和jquery的支持，上面我们可以看到tmpl是需要的:$.template("templateName",$('#liTemplate').html());；而JsViews则是建立在JsRender上更高层次的封装，他强调建立交互式的数据驱动视图，具体的貌似我目前还不是很了解。

　　ok，废话少说，关于JsRender相关的东东在后头我在慢慢整理出来，下面看看它在项目中间的运用，当时我真的大吃一惊，修改View:Views/Person/Ajax代码如下：

//View:Views/Person/Ajax
......
//绑定模板
<script type="text/x-jsrender" id="personListTemplate"> {{for persons}} <tr> <td>{{:FirstName}}</td> <td>{{:LastName}}</td> <td> <a href="/Person/Edit/{{:PersonID}}">Edit</a> | <a href="/Person/Details/{{:PersonID}}">Details</a> | <a href="/Person/Delete/{{:PersonID}}">Delete</a> </td> </tr> {{/for}} </script> //分页模板 <script type="text/x-jsrender" id="pagerTemplate"> {{if HasPreviousPage}} <a href="#" οnclick="getPersonByAjax(1);return false;">&lt;&lt;</a> <a href="#" οnclick="getPersonByAjax({{:PageNumber - 1}});return false;">&lt; Prev</a> {{else}} &lt;&lt;&nbsp;&lt; Prev {{/if}} &nbsp; {{if HasNextPage}} <a href="#" οnclick="getPersonByAjax({{:PageNumber + 1}});return false;">Next &gt;</a> <a href="#" οnclick="getPersonByAjax({{:PageCount}});return false;">&gt;&gt;</a> {{else}} Next &gt;&nbsp;&gt;&gt; {{/if}} </script> ........ <script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="/Scripts/jsrender.js"></script> <script type="text/javascript"> $(function () { getPersonByAjax(1); }); var getPersonByAjax = function (pageNumber) { $.getJSON("/Person/AjaxJsRenderPage", { "page": pageNumber }) .success(function (data) { $("#personList").empty(); 　　　　　　　　　　//JsRender渲染、渲染结果（字符串）插入容器 
　　　　　　　　　 $("#personList").append($("#personListTemplate").render(data)); $("#pager").html($("#pagerTemplate").render(data.pager)); }) .error(function (textStatus) { alert("msg:" + textStatus.statusText); }) .complete(function (jqXHQ) { jqXHQ = null; }); } </script>

 　　少去了太多的连接字符串代码（codeless），而且可见性很强，非常容易维护。ok，ajax分页就这么完成了。后头我们在慢慢谈下PagedList的分页思想和整理下JsRender相关的知识。 

　　补充

　　前面的代码在后来发现了两个问题：

　　　　第一、分页时如何定位到具体页？

　　　　第二、当数据为空时候的处理？

　　第二个问题很简单，判断data.persons.length是否为0既可解决，第二个问题要用到window.location.hash。其实就是锚，不过我可以用“window.location.hash = XX”设置标签值和使用“window.location.hash”来获取标签值罢了。下面来看看如何使用location.hash进行分页和页码定位：

$(function () {
        getPerson();
    });

    var getPerson = function () {
        var pageNumber;
        if (arguments[0] == null) { var hash = (window.location.hash); if (hash) pageNumber = hash.slice(1); else { pageNumber = 1; window.location.hash = pageNumber; } } else { pageNumber = arguments[0]; window.location.hash = pageNumber; } getPersonByAjax(pageNumber); }

 　　用上面代码替换$(function () {getPersonByAjax(1);});就ok了。可以看到，这里用window.location.hash来获取页面的页码和根据页码来设置window.location.hash，两只始终一致，这样就解决了ajax分页时的具体页定位问题。