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

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

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

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

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

2、分部视图代码

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

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());
    } 

最后上个效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。