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

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

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

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

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

<link href="~/Content/kkpager_blue.css" rel="stylesheet" />
<script src="~/Content/kkpager.js"></script>

<table id="result" class="posts block"></table> 
<nav id="kkpager" class="posts block pagination"></nav>
<script type="text/javascript">  
    $(function ()  
    {  
        GetArticlesData(1);  
    });  
    function getParameter(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
  
    function GetArticlesData(pageIndex)  
    {  
        var ajaxUrl = '/TestDataDB/AjaxPaging?pageIndex=' + pageIndex;
        var ajaxType = 'post';  
        var ajaxDataType = 'text';  
        var sucFun = function (data, status)  
        {
            if (data == null && status != "success")  
            {  
                alert("获取数据失败！");  
                return false;  
            }  
            else  
            {  
                $("#result").html(data);
                //定义分页样式  
                var totalCount = parseInt('@ViewBag.TotalCount');
                var pageSize = parseInt('@ViewBag.PageSize');  
                var pageNo = getParameter('pno');//该参数为插件自带，不设置好，调用数据的时候当前页码会一直显示在第一页
                if (!pageNo) {
                    pageNo = 1;
                }
                var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1);  
                kkpager.generPageHtml({
                    pno: pageNo,
                    total: totalPages,
                    totalRecords: totalCount,
                    mode: 'click',
                    click: function (n) {
                        this.selectPage(n);//插件自带的方法，手动调用某一页码
                        searchPage(n);
                        return false;
                    }
                });
            }  
        };    
        //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>  

2、分部视图代码

@model IEnumerable<Test13.Models.TestDataDB>
@{
    ViewBag.Title = "AjaxFenbuView";
}
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Uid) 
      </th>
        <th>
            @Html.DisplayNameFor(model => model.Uname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Upwd)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Udata)
        </th>
        <th></th>
    </tr>
@foreach (Test13.Models.TestDataDB item in Model)
{
        <tr>
            <td>@item.Uid</td>
            <td>@item.Uname</td>
            <td>@item.Upwd</td>
            <td>@item.Udata</td>
            <td>
                @Html.ActionLink("编辑", "Edit", new { id=item.ID }) |
                @Html.ActionLink("查看详细", "Details", new { id=item.ID }) |
                @Html.ActionLink("删除", "Delete", new { id=item.ID })
            </td>
        </tr>
}

3、控制器获取数据代码

 private readonly int pageSize =1;
        public ActionResult AjaxFenYe()
        {
            ViewBag.PageSize = pageSize;
            ViewBag.TotalCount = db.TestDataDBS.Count();
            return View();
        }
        public ActionResult AjaxPaging(int pageIndex = 1)
        {
            var persons = (from p in db.TestDataDBS orderby p.ID descending select p).Skip((pageIndex - 1) * pageSize).Take(pageSize);
            return PartialView("AjaxFenbuView", persons.ToList());
        }  

最后上个效果图：