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

解决方案思想：页面数据的初始加载和按页加载都是通过ajax来进行，页面分页链接点击后利用ajax技术发送当前页码到后端控制器，后端控制器根据当前页码和设置的pageSize从数据库中取出对应页的数据。后端控制器处理完后利用PartialView方法把数据返回到分部视图中，利用ViewBag来返回当前页码和总记录数和pageSize。ajax通过回调函数把控制器返回的视图加到页面中。说明：分页具体的分页导航和样式使用了插件。
控制器代码
[csharp] view plain copyusing _116.Models;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
  
namespace _116.Controllers  
{  
    public class HomeController : Controller  
    {  
        private DataContext db = new DataContext();  
  
        private readonly int pageSize = 3;  
        //  
        // GET: /Home/  
          
        public ActionResult Index()  
        {  
            ViewBag.PageSize = pageSize;  
            ViewBag.TotalCount = db.Articles.Count();  
            return View();  
        }  
  
        /// <summary>  
        /// 文章列表，ajax分页  
        /// </summary>  
        /// <param name="pageIndex"></param>  
        /// <returns></returns>  
        public ActionResult AjaxPaging(int pageIndex = 1)  
        {  
            IQueryable<ArticleModels> articles = db.Articles.OrderByDescending(a => a.ObjectID).Skip((pageIndex - 1) * pageSize).Take(pageSize);  
  
            ViewBag.PageIndex = pageIndex;  
              
            return PartialView("IndexArticleList", articles);  
        }  
    }  
}  
视图代码[html] view plain copy<!--文章列表-->  
    <section id="articleList" class="posts block"></section>  
<!--分页-->  
    <script src="~/common/scripts/kkpager.js"></script>  
    <link href="~/common/pluginCss/kkpager.css" rel="stylesheet" />  
    <nav id="kkpager" class="posts block pagination"></nav>  
    <!--分页-->  

分部视图代码[html] view plain copy@model  IEnumerable<_116.Models.ArticleModels>  
  
@foreach (var item in Model)  
{  
    <article class="post block">  
        <!--标题-->  
        <h2 class="h2">  
            <small><a href="/Article/Details/@item.ObjectID">@Html.DisplayFor(modelItem => item.ObjectTitle)</a></small>  
        </h2>  
        <!--发表时间-->  
        <div class="meta">  
            <time>@item.CreateTime.ToString("yyyy-MM-dd")</time>  
            <i class="glyphicon glyphicon-eye-open eye"></i>  
            <span>(@item.VisitedCount)</span>  
        </div>  
        <!--摘要-->  
        <div class="content">  
            <p>@Html.DisplayFor(modelItem => item.ObjectSummary)</p>  
        </div>  
        <!--详细内容链接-->  
        <div class="readMore"><a href="/Article/Details/@item.ObjectID">[继续阅读]</a></div>  
    </article>  
}  
<!--分页参数-->  
<input id="pageIndex" type="hidden" value="@ViewBag.PageIndex" />  
Ajax代码[javascript] view plain copy<script type="text/javascript">  
    $(function ()  
    {  
        //初始加载文章列表数据  
        GetArticlesData(1);  
    });  
  
    //ajax获取文章列表并分页  
    function GetArticlesData(pageIndex)  
    {  
        var ajaxUrl = '/Home/AjaxPaging?pageIndex=' + pageIndex;  
        var ajaxType = 'post';  
        var ajaxDataType = 'text';  
        var sucFun = function (data, status)  
        {  
            if (data == null && status != "success")  
            {  
                alert("获取数据失败！");  
                return false;  
            }  
            else  
            {  
                $("#articleList").html(data);  
  
                //移除列表最后一项的底部阴影  
                $("#articleList").find("article").last().removeClass("block");  
  
                //分页  
                var totalCount = parseInt('@ViewBag.TotalCount');  
                var pageSize = parseInt('@ViewBag.PageSize');  
                var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1);  
                pagecutforsearch(totalPages, totalCount, $("#pageIndex").val());  
            }  
        };  
  
        //ajax参数设置  
        var Option =  
                    {  
                        url: ajaxUrl,  
                        type: ajaxType,  
                        dataType: ajaxDataType,  
                        cache: false, //设置为 false 将不会从浏览器缓存中加载请求信息。  
                        async: true, //(默认: true)，所有请求均为异步请求。发送同步请求，请将此选项设置为 false。同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。  
                        timeout: 3600, //设置请求超时时间（毫秒）。此设置将覆盖全局设置。  
                        error: function () { },  
                        success: sucFun,  
                        beforeSend: function () { }  
                    };  
        $.ajax(Option);  
        return false;  
    }  
  
    //ajax翻页  
    function searchPage(n)  
    {  
        GetArticlesData(n);  
    }  
</script>