asp.net Mvc4 使用ajax结合分页插件实现无刷新分页

本文为在mvc4中使用ajax实现无刷新分页demo，记录一下。

解决方案思想：页面数据的初始加载和按页加载都是通过ajax来进行，页面分页链接点击后利用ajax技术发送当前页码到后端控制器，后端控制器根据当前页码和设置的pageSize从数据库中取出对应页的数据。后端控制器处理完后利用PartialView方法把数据返回到分部视图中，利用ViewBag来返回总记录数和pageSize。ajax通过回调函数把控制器返回的分部视图内容加载到主视图中显示。

说明：分页具体的分页导航和样式使用了kkpager插件。

1、主视图（用于显示数据）代码

[html]  view plain  copy

1. <link href="~/Content/kkpager_blue.css" rel="stylesheet" />  
2. <script src="~/Content/kkpager.js"></script>  
3.   
4. <table id="result" class="posts block"></table>   
5. <nav id="kkpager" class="posts block pagination"></nav>  
6. <script type="text/javascript">    
7.     $(function ()    
8.     {    
9.         GetArticlesData(1);    
10.     });    
11.     function getParameter(name) {  
12.         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");  
13.         var r = window.location.search.substr(1).match(reg);  
14.         if (r != null) return unescape(r[2]); return null;  
15.     }  
16.     
17.     function GetArticlesData(pageIndex)    
18.     {    
19.         var ajaxUrl = '/TestDataDB/AjaxPaging?pageIndex=' + pageIndex;  
20.         var ajaxType = 'post';    
21.         var ajaxDataType = 'text';    
22.         var sucFun = function (data, status)    
23.         {  
24.             if (data == null && status != "success")    
25.             {    
26.                 alert("获取数据失败！");    
27.                 return false;    
28.             }    
29.             else    
30.             {    
31.                 $("#result").html(data);  
32.                 //定义分页样式    
33.                 var totalCount = parseInt('@ViewBag.TotalCount');  
34.                 var pageSize = parseInt('@ViewBag.PageSize');    
35.                 var pageNo = getParameter('pno');//该参数为插件自带，不设置好，调用数据的时候当前页码会一直显示在第一页  
36.                 if (!pageNo) {  
37.                     pageNo = 1;  
38.                 }  
39.                 var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1);    
40.                 kkpager.generPageHtml({  
41.                     pno: pageNo,  
42.                     total: totalPages,  
43.                     totalRecords: totalCount,  
44.                     mode: 'click',  
45.                     click: function (n) {  
46.                         this.selectPage(n);//插件自带的方法，手动调用某一页码  
47.                         searchPage(n);  
48.                         return false;  
49.                     }  
50.                 });  
51.             }    
52.         };      
53.         //ajax参数设置    
54.         var Option =    
55.                     {    
56.                         url: ajaxUrl,    
57.                         type: ajaxType,    
58.                         dataType: ajaxDataType,    
59.                         cache: false, //设置为 false 将不会从浏览器缓存中加载请求信息。    
60.                         async: true, //(默认: true)，所有请求均为异步请求。发送同步请求，请将此选项设置为 false。同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。    
61.                         timeout: 3600, //设置请求超时时间（毫秒）。此设置将覆盖全局设置。    
62.                         error: function () { },    
63.                         success: sucFun,    
64.                         beforeSend: function () { }    
65.                     };    
66.         $.ajax(Option);    
67.         return false;    
68.     }      
69.     //ajax翻页    
70.     function searchPage(n)    
71.     {    
72.         GetArticlesData(n);    
73.     }    
74. </script>    

2、分部视图代码

[html]  view plain  copy

1. @model IEnumerable<Test13.Models.TestDataDB>  
2. @{  
3.     ViewBag.Title = "AjaxFenbuView";  
4. }  
5.     <tr>  
6.         <th>  
7.             @Html.DisplayNameFor(model => model.Uid)   
8.       </th>  
9.         <th>  
10.             @Html.DisplayNameFor(model => model.Uname)  
11.         </th>  
12.         <th>  
13.             @Html.DisplayNameFor(model => model.Upwd)  
14.         </th>  
15.         <th>  
16.             @Html.DisplayNameFor(model => model.Udata)  
17.         </th>  
18.         <th></th>  
19.     </tr>  
20. @foreach (Test13.Models.TestDataDB item in Model)  
21. {  
22.         <tr>  
23.             <td>@item.Uid</td>  
24.             <td>@item.Uname</td>  
25.             <td>@item.Upwd</td>  
26.             <td>@item.Udata</td>  
27.             <td>  
28.                 @Html.ActionLink("编辑", "Edit", new { id=item.ID }) |  
29.                 @Html.ActionLink("查看详细", "Details", new { id=item.ID }) |  
30.                 @Html.ActionLink("删除", "Delete", new { id=item.ID })  
31.             </td>  
32.         </tr>  
33. }  

3、控制器获取数据代码

[html]  view plain  copy

1. private readonly int pageSize =1;  
2.        public ActionResult AjaxFenYe()  
3.        {  
4.            ViewBag.PageSize = pageSize;  
5.            ViewBag.TotalCount = db.TestDataDBS.Count();  
6.            return View();  
7.        }  
8.        public ActionResult AjaxPaging(int pageIndex = 1)  
9.        {  
10.            var persons = (from p in db.TestDataDBS orderby p.ID descending select p).Skip((pageIndex - 1) * pageSize).Take(pageSize);  
11.            return PartialView("AjaxFenbuView", persons.ToList());  
12.        }    

最后上个效果图：