最近使用Razor Page显示产品列表,编写了一个简单的分页控件,代码如下:
<nav aria-label="Page navigation example" class="mt-2">
<ul class="pagination">
@if (Model.CurrentPage > 1)
{
<li class="page-item"><a class="page-link" href="/Products/currentpage/@(Model.CurrentPage-1)">Previous</a></li>
}
@for (var i = 1; i <= Model.PageCount; i++)
{
var act = "";
if (i == Model.CurrentPage) act = "active";
<li class="page-item @act "><a class="page-link" href="/Products/currentpage/@i">@i</a></li>
}
@if (Model.CurrentPage < Model.PageCount)
{
<li class="page-item"><a class="page-link" href="/Products/currentpage/@(Model.CurrentPage+1)">Next</a></li>
}
</ul>
</nav>
这段代码基于BootStrap,需要在Razor 页面模型中定义两个变量,CurrentPage(当前页)和PageCount(总页数),在OnGet获取列表数据时设置这两个变量。使用这个控件换页时实际上是将当前页面作为URL参数重新加载页面。
网友评论