为分页自定义列表渲染

Question

我正在尝试在 Orchard 中实现无限滚动，并进行最小的更改。

我使用的脚本需要用jquery选择器完美识别pager的下一页链接。

目前标准的果园寻呼机以这种方式呈现：

<li><a href="/OrchardLocal/ricette?page=2">&gt;</a></li>

理想的渲染是：

<li class="next"><a href="/OrchardLocal/ricette?page=2">&gt;</a></li>

我尝试了很多方法来覆盖 Pager_Next 模板，但没有任何乐趣。 寻呼机是一个列表，列表是由代码完成的。没有简单的方法来覆盖。

一篇很棒的文章应该解释如何错过一些基本部分（例如覆盖整个列表）： http://weblogs.asp.net/bleroy/overriding-the-pager-rendering-in-orchard

现在我的解决方法是更改​​ Orchard 源 CoreShapes.cs 以添加以下两行进行列表渲染：

if (itemTag != null) {
  if (index == 0)
    itemTag.AddCssClass("first");
  if (index == count - 1)
    itemTag.AddCssClass("last");

  //new lines
  if (index == 1 && count > 2)
    itemTag.AddCssClass("previous");
  if (index == count - 2 && count > 2)
     itemTag.AddCssClass("next");

到目前为止它有效，但我不喜欢它

1）它改变了果园来源，这很糟糕

2) 它会更改所有列表（而不仅仅是寻呼机）

那么“我怎样才能覆盖 JUST 我的主题和 JUST 寻呼机的列表，以便在 Page_Next li 标记处自动添加一个类？”

谢谢

Answer 1

在您的 Pager.Next.cshtml 备用视图中尝试这样的操作：

@using System.Web.Routing;
@{
    string text = Model.Value.ToString();
    string action = Model.RouteValues["action"].ToString();
    RouteValueDictionary routeValues = (RouteValueDictionary)Model.RouteValues;
}

<span><a class="next" href="@Url.Action(action, routeValues)">@text</a></span>

Answer 2

我不确定 joshb 的回答是否足以满足您的需求。 否则我会说几乎一样的话。

更改您主题中的 Pager.Next.cshtml 和 Pager.Previous.cshtml，并简单地添加一种方式让您识别链接。

使用jQuery将你需要的类添加到父级。

这绝不是一个优雅的解决方案，但它会在不更改核心且不影响其他列表的情况下完成您的要求。

我的测试看起来像这样，仅用于测试，仅用于下一个，但您明白了。

（显然不要使用 id，因为它会给你重复的 id，这只是一个快速而肮脏的例子）

Pager.Next.cshtml：

@{
    var RouteValues = (object)Model.RouteValues;
    RouteValueDictionary rvd;
    if (RouteValues == null) {
        rvd = new RouteValueDictionary();
    }
    else {
        rvd = RouteValues is RouteValueDictionary ? (RouteValueDictionary)RouteValues : new RouteValueDictionary(RouteValues);
    }
}
<a id="pagination-pager-next" href="@Url.Action((string)rvd["action"], rvd)"><i class="fa fa-angle-right"></i></a>

并在 Pager.cshtml 的末尾添加了这个，但你可能有一个更好的地方：

<script>
    $(document).ready(function () {
        $("#pagination-pager-next").parent().addClass("next");
    });
</script>