Blazor Компонент подкачки

Question

Я работаю над приложением Blazor, и у меня есть компонент, показывающий список записей (извлекаемый из сущности фреймворка сущностей), я хотел бы знать, какой будет лучший и самый простой подход для реализации разбиения на страницы для компонента.

Любая помощь будет оценена.

Answer 1

В Blazor у вас есть полный контроль над DOM. Поскольку вы используете EF, вы можете просто выполнить Skip and 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);
}

Это самый простой способ сделать пейджинг, Теперь вы можете go вперед и создать свой компонент списка подкачки Теперь вам нужно передать свой список компоненту в качестве параметра.

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

Если вы хотите работать со стандартным списком c, посмотрите Параметры контекста шаблона

Answer 2

В 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. Доступны компоненты, которые могут сделать большинство разметки и логики c, Google для "Компонент Blazor Pager". Я нашел этот довольно быстро.