asp.net Mvc4 uses ajax combined with paging plug-in to achieve refresh-free paging

This article is a demo of using ajax to implement non-refresh paging in mvc4, record it.

Solution idea: The initial loading of page data and page-by-page loading are both performed through ajax. After the page paging link is clicked, ajax technology is used to send the current page number to the back-end controller. The back-end controller Get the data of the corresponding page from the database based on the current page number and the set pageSize. After the backend controller finishes processing, use the PartialView method to return the data to the partial view, and use ViewBag to return the total number of records and pageSize. Ajax loads the partial view content returned by the controller into the main view through the callback function for display.

Note: The specific paging navigation and style use the kkpager plug-in.

1. Main view (used to display data) code

<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 = &#39;/TestDataDB/AjaxPaging?pageIndex=&#39; + pageIndex;
    var ajaxType = &#39;post&#39;; 
    var ajaxDataType = &#39;text&#39;; 
    var sucFun = function (data, status) 
    {
      if (data == null && status != "success") 
      { 
        alert("获取数据失败！"); 
        return false; 
      } 
      else
      { 
        $("#result").html(data);
        //定义分页样式 
        var totalCount = parseInt(&#39;@ViewBag.TotalCount&#39;);
        var pageSize = parseInt(&#39;@ViewBag.PageSize&#39;); 
        var pageNo = getParameter(&#39;pno&#39;);//该参数为插件自带，不设置好，调用数据的时候当前页码会一直显示在第一页
        if (!pageNo) {
          pageNo = 1;
        }
        var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1); 
        kkpager.generPageHtml({
          pno: pageNo,
          total: totalPages,
          totalRecords: totalCount,
          mode: &#39;click&#39;,
          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. Partial view code

@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. Controller acquisition data code

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

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more asp.net Mvc4 using ajax combined with paging plug-in to achieve refresh-free paging related articles, please pay attention to the PHP Chinese website!