pagination du composant Blazor

Question

Je travaille sur une application Blazor et j'ai un composant qui affiche une liste d'enregistrements (récupérés à partir de l'entité framework entity), je voulais savoir quelle serait la meilleure approche et la plus simple pour mettre en œuvre la pagination sur le composant.

Toute aide serait appréciée.

Answer 1

Dans Blazor, vous avez un contrôle total sur votre DOM. Comme vous utilisez EF, vous pouvez simplement effectuer un Skip and Take pour votre pagination :

private int pageSize = 100;
private int pageNumber = 1;   

en HTML :

for(int p = 1; p<= list.Count() / pageSize ; p++) {
<button type="button" @onclick="(e=>HandleChangePage(p))">@p</button>
}

Page de changement de poignée :

void HandleChangePage(int p) {
  pageNumber  = p;
  var page = list.Skip((p-1) * pageSize).Take(pageSize);
}

C'est la façon la plus simple de faire de la pagination,
Maintenant, vous pouvez aller de l'avant et créer votre composant de liste de pagination.
Maintenant vous devez passer votre liste au composant comme un paramètre

[Parameter]
public List<ClassName> list {get;set;}

Si vous voulez travailler avec une liste générique, regardez à Paramètres du contexte du modèle

Answer 2

Dans Blazor, vous pouvez passer votre page comme vous le feriez dans MVC.

Pour un exemple très simple, apportez les modifications suivantes à 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);
    }
}

Le pager est très rudimentaire, juste 1 5. Il y a des composants disponibles qui peuvent faire la plupart du balisage et de la logique, google pour "Blazor Pager component". J'ai trouvé celui-ci assez rapidement.

Answer 3

J'ai développé un composant de pagination générique qui utilise une table HTML et qui est facilement réutilisable. Enregistrez ce composant dans son propre razor nommé 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();
  }

}

Voici un exemple de son utilisation :

<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 => ...)
  }
}