我正在开发Blazor应用程序,其中有一个组件显示记录列表(从实体框架实体检索),想知道在该组件上实现分页的最佳和最简单的方法是什么。
任何帮助都将不胜感激。
我正在开发Blazor应用程序,其中有一个组件显示记录列表(从实体框架实体检索),想知道在该组件上实现分页的最佳和最简单的方法是什么。
任何帮助都将不胜感激。
在Blazor中,您可以完全控制DOM。由于您正在使用EF,因此可以轻松执行Skip和Take进行分页:
private int pageSize = 100;
private int pageNumber = 1;
在 HTML 中:
for(int p = 1; p<= list.Count() / pageSize ; p++) {
<button type="button" @onclick="(e=>HandleChangePage(p))">@p</button>
}
处理更改页面:
void HandleChangePage(int p) {
pageNumber = p;
var page = list.Skip((p-1) * pageSize).Take(pageSize);
}
这是最简单的分页方式,
现在您可以创建您的分页列表组件
现在您需要将您的列表作为参数传递给组件
[Parameter]
public List<ClassName> list {get;set;}
@page "/fetchdata"
@page "/fetchdata/{PageNumber:int}"
... the HTML for the table...
<div>
@for (int i = 1; i <= 5; i++)
{
<span><a href="fetchdata/@i"> @i </a>|</span>
}
</div>
@code {
[Parameter]
public int PageNumber { get; set; }
private WeatherForecast[] forecasts;
protected override async Task OnParametersSetAsync()
{
if (PageNumber < 1) PageNumber = 1;
// adapt the service to take pageIndex, pageSize
forecasts = await ForecastService.GetForecastAsync(PageNumber-1, 5);
}
}
分页器非常简单,仅有1..5。有一些可用的组件可以完成大多数标记和逻辑,可以在谷歌上搜索“Blazor分页器组件”。我很快找到了这个。
我开发了一个通用的分页组件,它使用HTML表格并且易于重复使用。请将其保存在自己的组件razor中,命名为PagedList.razor:
@typeparam TItem
@if (!ListQuery.Any())
{
<div class="none-indicator">(none)</div>
}
else
{
@if (TotalPages() > 1)
{
<div class="pager-display">
@if (CurrentPage == 1)
{
<button disabled>«</button>
<button disabled>‹</button>
}
else
{
<button @onclick="@MoveFirst" title="Move First">«</button>
<button @onclick="@MoveBack" title="Move Back">‹</button>
}
<span>@CurrentPage of @TotalPages() </span>
@if (!AtLastPage())
{
<button @onclick="@MoveNext" title="Move Next">›</button>
<button @onclick="@MoveLast" title="Move Last">»</button>
}
else
{
<button disabled>›</button>
<button disabled>»</button>
}
</div>
}
<table class="table table-striped">
<thead>
@HeaderDisplay
</thead>
<tbody>
@foreach (TItem item in CurrentDisplay)
{
@ItemDisplay(item)
}
</tbody>
</table>
}
@code {
[Parameter]
public IQueryable<TItem> ListQuery { get; set; }
[Parameter]
public RenderFragment HeaderDisplay { get; set; }
[Parameter]
public RenderFragment<TItem> ItemDisplay { get; set; }
[Parameter]
public int ItemsPerPage { get; set; } = 10;
private int CurrentPage = 1;
private List<TItem> CurrentDisplay;
private int TotalCount;
protected override void OnParametersSet()
{
UpdateDisplay();
TotalCount = ListQuery.Count();
}
private void UpdateDisplay()
{
CurrentDisplay = ListQuery.Skip((CurrentPage - 1) * ItemsPerPage).Take(ItemsPerPage).ToList();
}
private bool AtLastPage()
{
return CurrentPage >= TotalPages();
}
private int TotalPages()
{
return Convert.ToInt32(Math.Ceiling(TotalCount / Convert.ToDecimal(ItemsPerPage)));
}
private void MoveFirst()
{
CurrentPage = 1;
UpdateDisplay();
}
private void MoveBack()
{
CurrentPage--;
UpdateDisplay();
}
private void MoveNext()
{
CurrentPage++;
UpdateDisplay();
}
private void MoveLast()
{
CurrentPage = TotalPages();
UpdateDisplay();
}
}
这是一个使用示例:
<PagedList ListQuery="People">
<HeaderDisplay>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Title</th>
</tr>
</HeaderDisplay>
<ItemDisplay>
<tr>
<td><a href="People/Edit/@(context.ID)">Edit</a></td>
<td>@context.FirstName</td>
<td>@context.LastName</td>
<td>@context.Title</td>
</tr>
</ItemDisplay>
</PagedList>
@code {
private IQueryable<Person> People;
protected override void OnInitialized()
{
People = DatabaseContext.Person.Where(p => ...)
}
}
list.Count() / pageSize
,你应该使用Convert.ToInt32(Math.Ceiling(list.Count() / Convert.ToDecimal(pageSize)))
。 - Stef Heyenrath