Question

我试图在Orchard中实现无限滚动进行微小的更改。

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

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

<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）它会更改所有列表（而不仅仅是寻呼机）

所以＆＃34;我怎样才能覆盖JUST我的主题和JUST寻呼机的列表，以便在Page_Next li标签上自动添加一个类？＆＃34;

由于

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>

自定义分页列表呈现

2 个答案: