我目前在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>
&#13;
答案 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
类型实现的接口。它会为您提供足够的访问权限,例如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
。在这种情况下,基于类{{1}的<pagination>
如果你想要不同的东西,你可以相应地改变类名,或者在你的班级上使用PaginationTagHelper
属性(即HtmlTargetElement
)。
您还可以使用[HtmlTargetElement("page")]
属性来控制标记结构(即开始和结束标记,自动关闭或两者)。如果您将其设置为HtmlTargetElement
,那么您可以使用TagStructure.NormalOrSelfClosing
或<page></page>
。在<page />
方法中,我已添加代码将标记模式设置回Process
,因为TagMode.StartTagAndEndTag
需要结束标记。
默认情况下,标记帮助程序上的公共属性(例如此处为nav
)可用作属性,从camelcase转换为lower-dash语法。例如,PageList
变为PageList
。如果您想要不同的内容,可以更改属性名称或使用属性上的page-list
属性(即HtmlAttributeName
)。