asp.net-corepaginationblazorcomponents

Blazor Component paging


I am working on Blazor application and have a component showing list of records (retrieving from entity framework entity), wanted to know what would be best and easiest approach to implement paging on component.

Any help would be appreciated.


Solution

  • In Blazor you can pass your Page just as you would in MVC.

    For a very simple sample, make the following changes to 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);
        }
    }
    

    The pager is very crude, just 1 .. 5. There are components available that can do most of the markup and logic, google for "Blazor Pager component". I found this one pretty quickly.