如何自定义PagedList.Core.MVC以形成它的方式？

Question

我目前在MVC视图中有一个寻呼机，它是动态的，并在后台为我做了一切：

 <pager class="pager" list="@Model" options="@PagedListRenderOptions.TwitterBootstrapPager" asp-action="NieuwsOverzicht" asp-controller="Nieuws" />

我能够自定义它的颜色：

CSS

.pager > li > a {
    color: black !Important;
    border-color: white !Important;
    padding: 5px !Important;
}

但我不知道如何单独定制按钮。这就是它目前的样子。我正在使用PagedList.Core.MVC包v1.0.1

https://i.stack.imgur.com/UO5Ht.png

ViewImports cshtml

@using Groep1D
@using PagedList.Core.Mvc
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, PagedList.Core.Mvc

startup.cs中的服务

services.AddSingleton<IActionContextAccessor, ActionContextAccessor>();

这是我想为寻呼机实现的CSS。我需要两个箭头和页码分别设置样式。

  .pager > li > a.right-arrow {
        margin-left: 340px;
        width: 30px;
        border-radius: 50%;
        box-shadow: 0px 0px 5px #9ecaed;
        font-size: 15px;
        padding: 7px;
        line-height: 1;
    }

    .pager > li > a.left-arrow {
        margin-right: 340px;
        width: 30px;
        border-radius: 50%;
        box-shadow: 0px 0px 5px #9ecaed;
        font-size: 15px;
        transform: rotate(180deg);
        padding: 7px;
        line-height: 1;
    }


.number {
    color: black !Important;
    border-color: white !Important;
    padding: 5px !Important;
}

<div class="pager">
<ul class="pager">
<li class="PagedList-skipToPrevious"><a href="/Nieuws/NieuwsOverzicht?page=1" rel="prev">Previous</a>
</li>
<li><a href="/Nieuws/NieuwsOverzicht?page=1">1</a>
</li>
<li class="active"><a>2</a>
</li>
<li class="disabled PagedList-skipToNext"><a rel="next">Next</a>
</li>
</ul>
</div>

Answer 1

您必须咨询开发人员和/或任何提供的文档（看起来不多）。标记助手（这是你在这里使用的）只是以编程方式构造要呈现给页面的HTML。因此，呈现的HTML完全取决于标记帮助程序，并且只能在开发人员提供自定义选项的情况下进行修改。您需要确定实际可用的自定义级别，并查看这些是否可以满足您的需求。

基于我在这里看到的代码，这并不多。看起来你只是得到一个可能的寻呼机的枚举，你得到的是你得到的每一个。因此，我最好的建议是简单地创建自己的标记助手。它实际上非常直接。一个简单的例子是：

public class PaginationTagHelper : TagHelper
{
    // Your paged items list auto-filled via a `page-list` attribute
    public IPagedList PageList { get; set; }

    // Injects the ViewContext (you'll need this access `Request`, build a `UrlHelper`, etc.)
    [HtmlAttributeNotBound]
    [ViewContext]
    public ViewContext ViewContext { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (PagedList.PageCount > 1)
        {
            // Replace the tag helper tag with the main wrapper element
            // In the case of a Bootstrap pager, that's `nav`
            output.TagName = "nav";
            output.TagMode = TagMode.StartTagAndEndTag;
            output.Attributes.SetAttribute("aria-label", "page navigation");
            output.Content.SetHtmlContent(BuildPager());
        }
        else
        {
            // If only one page, don't show the pager
            output.SupressOutput();
        }
    }

    public string BuildPager()
    {
        // craft the HTML you want and return as a string
    }
}

笔记：

• IPagedList是所有实际PagedList类型实现的接口。它将为您提供足够的访问权限，您需要的属性，如PageNumber，PageCount，FirstItemOnPage，LastItemOnPage，TotalItemCount等，以构建您的寻呼机HTML
• 要为每个页面链接构建URL，您需要修改当前页面URL查询字符串以更改页码。这是一个简单的方法：

  private string GetUrlForPage(int page)
  {
      var uri = new Uri(ViewContext.HttpContext.Request.GetEncodedUrl());
      var baseUri = uri.GetLeftPart(UriPartial.Path);
      var query = QueryHelpers.ParseQuery(uri.Query);
      var items = query.SelectMany(x => x.Value, (col, value) => new KeyValuePair<string, string>(col.Key, value)).ToList();
      items.RemoveAll(x => x.Key == "page");
  
      var qb = new QueryBuilder(items);
  
      if (page > 1)
          qb.Add("page", page.ToString());
  
      return baseUri + qb.ToQueryString();
  }

• 默认情况下，标签助手将替换名为类的元素（没有TagHelper。在这种情况下，这将是<pagination>，基于PaginationTagHelper的类名。如果你想要不同的东西，你可以相应地更改类名或在你的班级上使用HtmlTargetElement属性（即[HtmlTargetElement("page")]）。
• 您还可以使用HtmlTargetElement属性来控制标记结构（即开始和结束标记，自动关闭或两者）。如果你把它设置为类似TagStructure.NormalOrSelfClosing，那么你可以使用<page></page>或<page />。在Process方法中，我已经添加了代码来将标记模式设置回TagMode.StartTagAndEndTag，因为nav需要一个结束标记。
• 默认情况下，标记帮助程序（例如PageList）上的公共属性可用作属性，从camelcase转换为较低的破折号语法。例如，PageList成为page-list。如果您想要不同的东西，您可以更改属性名称或使用属性上的HtmlAttributeName属性（即[HtmlAttributeName("myattribute")]）。