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

本身写了个采用asp.net mvc框架的Demo，分页功能采用的是jQuery+Ajax实现的无刷新分页。

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

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

控制器代码

using _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);
        }
    }
}

视图代码

<!--文章列表-->
    <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>
    <!--分页-->

分部视图代码

@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代码

<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>