我一直在使用。net 7的Blazor服务器项目上工作，我希望在我的网站上实现列表分页。目前，我的数据来自api和个人数据库，并存储在各种组件的列表中。我想通过一个可重用的分页组件来分解大量的数据，该组件可以应用于我的所有列表。
目前我正在努力寻找一个现有的分页示例/插件Blazor服务器。我找到的任何指南都不能与。net 7一起工作，或者是为Blazor WASM准备的，我找到的任何插件我都不知道如何正确使用。
我试着遵循这个指南，但它是模糊的，我不能让它工作:https://gunnarpeipman.com/blazor-pager-component/
我尝试了以下插件，这似乎相当过时:https://github.com/villainoustourist/Blazor.Pagination/
我发现/尝试的其他任何东西都意味着Blazor WASM或。net MVC。谁能给我指出一个正确的方向，为Blazor服务器创建一个理想的。net 7分页组件?或者，如果有一个方便的插件，已经存在为我的用例，这也将工作。我不介意创建自己的组件，但我不确定从哪里开始。谢谢你的帮助。
这是我在所有应用程序中使用的组件。CSS是基于Bootstrap 5.2。你可能想改一下。
我的方法是根据页面参数生成HTML并使用重定向。
@if (TotalPages > 1)
{
<nav aria-label="Page navigation">
<ul class="pagination pagination-primary">
@if (CurrentPageNumber > 1)
{
<li class="page-item">
<a class="page-link" href="@GetUrl(1)">
<span aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
</a>
</li>
}
@if (StartPage != MaxPage)
{
@for (int i = StartPage; i <= MaxPage; i++)
{
string subClass = CurrentPageNumber == i ? "active" : string.Empty;
<li class="page-item @subClass"><a class="page-link" href="@GetUrl(i)">@i</a></li>
}
}
@if (CurrentPageNumber < TotalPages)
{
<li class="page-item">
<a class="page-link" href="@GetUrl(TotalPages)">
<span aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
</a>
</li>
}
</ul>
</nav>
}
@code {
[Parameter] public string NavUrl { get; set; } = String.Empty;
[Parameter] public int CurrentPageNumber { get; set; } = 1;
[Parameter] public int ItemsPerPage { get; set; } = 30;
[Parameter] public int TotalItems { get; set; }
public int TotalPages
{
get
{
if (TotalItems == 0 || ItemsPerPage == 0)
{
return 1;
}
return (int)Math.Ceiling((double)TotalItems / (double)ItemsPerPage);
}
}
public int StartPage
{
get
{
int startPage = CurrentPageNumber - 2;
if (startPage < 1)
{
startPage = 1;
}
return startPage;
}
}
public int MaxPage
{
get
{
int maxPage = StartPage + 4;
if (maxPage > TotalPages)
{
maxPage = TotalPages;
}
return maxPage;
}
}
public string GetUrl(int page) => $"{NavUrl}{page}";
}
我可以这样实现分页:
<Pagination TotalItems="YOUR_VARIABLE_WITH_TOTAL_ITEMS_AMOUNT" CurrentPageNumber="YOUR_VARIABLE_FOR_THE_CURRENT_PAGE" NavUrl="YOUR_PAGE/Page/" />
唯一要做的就是为我的页面指定第二条路由，并调用一些东西来用数据填充你的两个变量。
例如:
@page "/Customer"
@page "/Customer/Page/{Page:int}"
@code {
[Parameter] public int Page { get; set; }
public int TotalItems { get; set; }
protected override async Task OnParametersSetAsync()
{
// Do something with your Page here
Filter.Page = Page;
await LoadAsync();
}
private async Task LoadAsync()
{
TotalItems = 100; // CALL FUNCTION HERE TO GET THE NUMBER OF TOTAL ITEMS
}
}
Steve Sanderson最近发布了一个分页组件。这是在他的"。net 7中Blazor的新功能"中展示的。
https://aspnet.github.io/quickgridsamples/paging
这是他关于这个主题的演讲的链接:https://youtu.be/evW4Gj4sHsk?t=415