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

作者：袖梨 2022-06-25

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

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

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

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

 
  $(function()
  {
    GetArticlesData(1);
  });
  functiongetParameter(name) {
    varreg =newRegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    varr = window.location.search.substr(1).match(reg);
    if(r !=null)returnunescape(r[2]);returnnull;
  }
  
  functionGetArticlesData(pageIndex)
  {
    varajaxUrl ='/TestDataDB/AjaxPaging?pageIndex='+ pageIndex;
    varajaxType ='post';
    varajaxDataType ='text';
    varsucFun =function(data, status)
    {
      if(data ==null&& status !="success")
      {
        alert("获取数据失败！");
        returnfalse;
      }
      else
      {
        $("#result").html(data);
        //定义分页样式
        vartotalCount = parseInt('@ViewBag.TotalCount');
        varpageSize = parseInt('@ViewBag.PageSize');
        varpageNo = getParameter('pno');//该参数为插件自带，不设置好，调用数据的时候当前页码会一直显示在第一页
        if(!pageNo) {
          pageNo = 1;
        }
        vartotalPages = 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);
            returnfalse;
          }
        });
      }
    }; 
    //ajax参数设置
    varOption =
          {
            url: ajaxUrl,
            type: ajaxType,
            dataType: ajaxDataType,
            cache:false,//设置为 false 将不会从浏览器缓存中加载请求信息。
            async:true,//(默认: true)，所有请求均为异步请求。发送同步请求，请将此选项设置为 false。同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
            timeout: 3600,//设置请求超时时间（毫秒）。此设置将覆盖全局设置。
            error:function() { },
            success: sucFun,
            beforeSend:function() { }
          };
    $.ajax(Option);
    returnfalse;
  } 
  //ajax翻页
  functionsearchPage(n)
  {
    GetArticlesData(n);
  }

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 iteminModel)
{
    
      @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、控制器获取数据代码

privatereadonlyintpageSize =1;
   publicActionResult AjaxFenYe()
   {
     ViewBag.PageSize = pageSize;
     ViewBag.TotalCount = db.TestDataDBS.Count();
     returnView();
   }
   publicActionResult AjaxPaging(intpageIndex = 1)
   {
     var persons = (from pindb.TestDataDBS orderby p.ID descending select p).Skip((pageIndex - 1) * pageSize).Take(pageSize);
     returnPartialView("AjaxFenbuView", persons.ToList());
   }

最后上个效果图：

相关文章

精彩推荐