MVC Html.PagedListPager() - 如何更新当前页面按钮？答案

【问题标题】：MVC Html.PagedListPager() - How to update current page button?MVC Html.PagedListPager() - 如何更新当前页面按钮？
【发布时间】：2015-04-27 18:41:17
【问题描述】：

我有一个使用Html.PagedListPager() 来呈现分页控件的视图。

一切正常，但 Ajax 请求成功完成后当前页面按钮未更新。

与分页按钮关联的 HTML 标记的class 属性应设置为active。

我该怎么做？

这是创建分页控件的代码：

@Html.PagedListPager(
  Model.Items, 
  page => Url.Action("RenderMessageListItems", new { page }), 
  PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
    new PagedListRenderOptions {Display = PagedListDisplayMode.IfNeeded},
    new System.Web.Mvc.Ajax.AjaxOptions {OnSuccess = "OnPageChanged", UpdateTargetId = Model.Name + "Items"}
  )
)

编辑：

也许我应该从包含页码的控制器返回一些 JSON 数据（而不是纯 HTML 页面）。通过这样做，我将能够更新 OnSuccess Ajax 函数中的相关按钮，但没有其他方法吗？

【问题讨论】：

标签： ajax button model-view-controller pagination

【解决方案1】：

我也让控件不刷新当前页面按钮，但在我的例子中，我使用了一个未命名为“page”的变量，它（看起来）是控件正常工作所必需的。

【讨论】：

【解决方案2】：

要么我不了解 PagedList 库，要么其中存在导致其奇怪行为的错误（很可能是因为该库现在已有 3 年历史了）。我的解决方法如下，这使得@Html.PagedListPager() 几乎毫无用处，我本可以在迄今为止所花费的时间内编写自己的代码。

控制器动作

public System.Web.Mvc.ActionResult RenderMessageListItems(int? page)
{
  ...
  System.Linq.IQueryable<Models.Message> lQuery = from m in lDBContext.Messages orderby m.CreateTimestamp select m;

  int lPageNumber = page.HasValue ? page.Value : 1;
  int lPageSize = 5;

  // note: ViewModels.MessageListItems implements IPagedList.IPagedList
  ViewModels.MessageListItems lViewModel = new ViewModels.MessageListItems(lPageNumber, lPageSize, lQuery.Count());

  lQuery = lQuery.Skip(lPageSize * (lPageNumber - 1)).Take(lPageSize);

  foreach (Models.Message lMessage in lQuery)
  {
    ViewModels.MessageListItem lMessageListItem = new ViewModels.MessageListItem();
    lMessageListItem.ID = lMessage.ID;
    lMessageListItem.Date = lMessage.Date;
    lMessageListItem.Caption = lMessage.Caption;
    lMessageListItem.Content = lMessage.Content;

    lViewModel.Add(lMessageListItem);
  }

  return Json(new {page = page, items = RenderRazorViewToString("../Shared/MessageList/Items", lViewModel)}, System.Web.Mvc.JsonRequestBehavior.AllowGet);
}

将视图传递给Json 对象导致序列化时出现循环引用异常，因此调用RenderRazorViewToString()。这个函数的代码已经贴在这里了：https://stackoverflow.com/a/2759898/3936440

部分视图

...

@* the following include is needed to get Html.PagedListPager() working *@
<script src="@Html.ResourceUrl("Script", "jQuery.Ajax.Unobtrusive")"></script>

<script>

  function OnPageChanged(jsonObject, textStatus, jqXHR)
  {
    @* inject new items into message list *@
    $("[name=@{@Model.Name}Items]").html(jsonObject.items);

    @* select all page buttons *@
    var $buttons = $(".pagination li");

    @* get button linked to previous page and... *@
    var $previousButton = $buttons.filter(".active");

    @* remove active indication and... *@
    $previousButton.removeClass("active");

    @* fix missing link attributes of first page button (strangely PagedListPager wont render those) *@
    if ($previousButton.index() == 0)
    {
      var previousPageNumber = $previousButton.index() + 1;

      var $previousLink = $previousButton.find("a");
      $previousLink.attr("data-ajax", true);
      $previousLink.attr("data-ajax-success", "OnPageChanged");
      $previousLink.attr("href", "@Url.Action("RenderMessageListItems")?page=" + previousPageNumber);
    }

    @* set current page button to active *@
    var $currentButton = $buttons.eq(jsonObject.page - 1);
    $currentButton.addClass("active");
  }

</script>

...

@Html.PagedListPager(
  Model.Items, 
  page => Url.Action("RenderMessageListItems", new {page}), 
  PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
    new PagedListRenderOptions {Display = PagedListDisplayMode.IfNeeded, DisplayLinkToNextPage = PagedListDisplayMode.Never},
    new System.Web.Mvc.Ajax.AjaxOptions {OnSuccess = "OnPageChanged"}
  )
)

如您所见，OnPageChanged() 中的代码修复了PagedListPager 的非工作部分。遗憾的是我不能使用像下一页/上一页按钮这样的功能，因为PagedListPager 也没有正确呈现。

【讨论】：