Blazor组件分页

Question

我正在开发Blazor应用程序，并且有一个组件显示记录列表(从实体框架实体检索)，我想知道什么是实现组件分页的最佳和最简单的方法。

任何帮助都将不胜感激。

Answer 1

在Blazor中，您可以像在MVC中一样传递页面。

对于一个非常简单的示例，对FetchData.razor进行以下更改：

@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.有一些组件可以完成大部分标记和逻辑，google用于"Blazor Pager组件“。我很快就找到了这一个。

Answer 2

在Blazor中，您可以完全控制DOM。由于您使用的是EF，所以您可以简单地执行跳过和取分页：

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;}

如果您想使用泛型列表，请查看模板上下文参数

Answer 3

我开发了一个通用分页组件，它使用HTML表，并且易于重用。将其保存在它自己的名为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>&laquo;</button>
        <button disabled>&lsaquo;</button>
      }
      else
      {
        <button @onclick="@MoveFirst" title="Move First">&laquo;</button>
        <button @onclick="@MoveBack" title="Move Back">&lsaquo;</button>
      }
      <span>@CurrentPage of @TotalPages() </span>
      @if (!AtLastPage())
      {
        <button @onclick="@MoveNext" title="Move Next">&rsaquo;</button>
        <button @onclick="@MoveLast" title="Move Last">&raquo;</button>
      }
      else
      {
        <button disabled>&rsaquo;</button>
        <button disabled>&raquo;</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 => ...)
  }
}