asp.net Mvc4 verwendet Ajax in Kombination mit einem Paging-Plug-In, um ein aktualisierungsfreies Paging zu erreichen

Dieser Artikel ist eine Demo zur Verwendung von Ajax zur Implementierung von aktualisierungsfreiem Paging in mvc4. Zeichnen Sie ihn auf.

Lösungsidee: Das anfängliche Laden der Seitendaten und das seitenweise Laden erfolgen beide über Ajax. Nachdem auf den Seiten-Paging-Link geklickt wurde, wird die aktuelle Seitennummer mithilfe der Ajax-Technologie gesendet der Back-End-Controller Der Back-End-Controller Ruft die Daten der entsprechenden Seite basierend auf der aktuellen Seitennummer und der eingestellten Seitengröße ab. Nachdem der Backend-Controller die Verarbeitung abgeschlossen hat, verwenden Sie die PartialView-Methode, um die Daten an die Teilansicht zurückzugeben, und verwenden Sie ViewBag, um die Gesamtzahl der Datensätze und die Seitengröße zurückzugeben. Ajax lädt den vom Controller zurückgegebenen Teilansichtsinhalt in die Hauptansicht, um ihn über die Rückruffunktion anzuzeigen.

Hinweis: Die spezifische Seitennavigation und der Seitenstil verwenden das kkpager-Plug-in.

1. Hauptansichtscode (zur Anzeige von Daten)

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

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

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere verwandte Artikel zu asp.net Mvc4, die Ajax in Kombination mit dem Paging-Plug-In verwenden, um aktualisierungsfreies Paging zu erreichen, finden Sie auf der chinesischen PHP-Website!