asp.net mvc基于jQuery+Ajax实现无刷新分页

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

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

控制器代码

[csharp]  view plain  copy

1. using _116.Models;  
2. using System;  
3. using System.Collections.Generic;  
4. using System.Linq;  
5. using System.Web;  
6. using System.Web.Mvc;  
7.   
8. namespace _116.Controllers  
9. {  
10.     public class HomeController : Controller  
11.     {  
12.         private DataContext db = new DataContext();  
13.   
14.         private readonly int pageSize = 3;  
15.         //  
16.         // GET: /Home/  
17.           
18.         public ActionResult Index()  
19.         {  
20.             ViewBag.PageSize = pageSize;  
21.             ViewBag.TotalCount = db.Articles.Count();  
22.             return View();  
23.         }  
24.   
25.         /// <summary>  
26.         /// 文章列表，ajax分页  
27.         /// </summary>  
28.         /// <param name="pageIndex"></param>  
29.         /// <returns></returns>  
30.         public ActionResult AjaxPaging(int pageIndex = 1)  
31.         {  
32.             IQueryable<ArticleModels> articles = db.Articles.OrderByDescending(a => a.ObjectID).Skip((pageIndex - 1) * pageSize).Take(pageSize);  
33.   
34.             ViewBag.PageIndex = pageIndex;  
35.               
36.             return PartialView("IndexArticleList", articles);  
37.         }  
38.     }  
39. }  

视图代码

[html]  view plain  copy

1. <!--文章列表-->  
2.     <section id="articleList" class="posts block"></section>  
3. <!--分页-->  
4.     <script src="~/common/scripts/kkpager.js"></script>  
5.     <link href="~/common/pluginCss/kkpager.css" rel="stylesheet" />  
6.     <nav id="kkpager" class="posts block pagination"></nav>  
7.     <!--分页-->  

分部视图代码

[html]  view plain  copy

1. @model  IEnumerable<_116.Models.ArticleModels>  
2.   
3. @foreach (var item in Model)  
4. {  
5.     <article class="post block">  
6.         <!--标题-->  
7.         <h2 class="h2">  
8.             <small><a href="/Article/Details/@item.ObjectID">@Html.DisplayFor(modelItem => item.ObjectTitle)</a></small>  
9.         </h2>  
10.         <!--发表时间-->  
11.         <div class="meta">  
12.             <time>@item.CreateTime.ToString("yyyy-MM-dd")</time>  
13.             <i class="glyphicon glyphicon-eye-open eye"></i>  
14.             <span>(@item.VisitedCount)</span>  
15.         </div>  
16.         <!--摘要-->  
17.         <div class="content">  
18.             <p>@Html.DisplayFor(modelItem => item.ObjectSummary)</p>  
19.         </div>  
20.         <!--详细内容链接-->  
21.         <div class="readMore"><a href="/Article/Details/@item.ObjectID">[继续阅读]</a></div>  
22.     </article>  
23. }  
24. <!--分页参数-->  
25. <input id="pageIndex" type="hidden" value="@ViewBag.PageIndex" />  

Ajax代码

[javascript]  view plain  copy

1. <script type="text/javascript">  
2.     $(function ()  
3.     {  
4.         //初始加载文章列表数据  
5.         GetArticlesData(1);  
6.     });  
7.   
8.     //ajax获取文章列表并分页  
9.     function GetArticlesData(pageIndex)  
10.     {  
11.         var ajaxUrl = '/Home/AjaxPaging?pageIndex=' + pageIndex;  
12.         var ajaxType = 'post';  
13.         var ajaxDataType = 'text';  
14.         var sucFun = function (data, status)  
15.         {  
16.             if (data == null && status != "success")  
17.             {  
18.                 alert("获取数据失败！");  
19.                 return false;  
20.             }  
21.             else  
22.             {  
23.                 $("#articleList").html(data);  
24.   
25.                 //移除列表最后一项的底部阴影  
26.                 $("#articleList").find("article").last().removeClass("block");  
27.   
28.                 //分页  
29.                 var totalCount = parseInt('@ViewBag.TotalCount');  
30.                 var pageSize = parseInt('@ViewBag.PageSize');  
31.                 var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1);  
32.                 pagecutforsearch(totalPages, totalCount, $("#pageIndex").val());  
33.             }  
34.         };  
35.   
36.         //ajax参数设置  
37.         var Option =  
38.                     {  
39.                         url: ajaxUrl,  
40.                         type: ajaxType,  
41.                         dataType: ajaxDataType,  
42.                         cache: false, //设置为 false 将不会从浏览器缓存中加载请求信息。  
43.                         async: true, //(默认: true)，所有请求均为异步请求。发送同步请求，请将此选项设置为 false。同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。  
44.                         timeout: 3600, //设置请求超时时间（毫秒）。此设置将覆盖全局设置。  
45.                         error: function () { },  
46.                         success: sucFun,  
47.                         beforeSend: function () { }  
48.                     };  
49.         $.ajax(Option);  
50.         return false;  
51.     }  
52.   
53.     //ajax翻页  
54.     function searchPage(n)  
55.     {  
56.         GetArticlesData(n);  
57.     }  
58. </script>