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>