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

时间:2017-12-22 11:31:28

标签: twitter-bootstrap asp.net-mvc-4 asp.net-core-mvc pagedlist

我目前在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;
}

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您必须咨询开发人员和/或任何提供的文档(这些文档看起来并不多)。标记帮助程序(这是您在此处使用的)仅以编程方式构造要呈现给页面的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类型实现的接口。它会为您提供足够的访问权限,例如PageNumberPageCountFirstItemOnPageLastItemOnPageTotalItemCount等您需要的属性来构建您的寻呼机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。在这种情况下,基于类{{1}的<pagination>如果你想要不同的东西,你可以相应地改变类名,或者在你的班级上使用PaginationTagHelper属性(即HtmlTargetElement)。

  • 您还可以使用[HtmlTargetElement("page")]属性来控制标记结构(即开始和结束标记,自动关闭或两者)。如果您将其设置为HtmlTargetElement,那么您可以使用TagStructure.NormalOrSelfClosing<page></page>。在<page />方法中,我已添加代码将标记模式设置回Process,因为TagMode.StartTagAndEndTag需要结束标记。

  • 默认情况下,标记帮助程序上的公共属性(例如此处为nav)可用作属性,从camelcase转换为lower-dash语法。例如,PageList变为PageList。如果您想要不同的内容,可以更改属性名称或使用属性上的page-list属性(即HtmlAttributeName)。