DataPager

@inherits ControlComponent
@inject HttpClient Http

<table>
                                            <tr>
                                            <asp.ListView @ref="this.listView" ID="ListView1" DataSourceID="FreeDataSource1">
                                            <ItemTemplate TItem="Sample">
                                            <td>
                    Description: <br />
                                            @context.StringValue
                                            <br />
                    Percent: @string.Format("{0:P2}", @context.CurrencyValue)
                                            <br />
                                            <asp.Image AlternateText="Product picture"
                                            ImageUrl="@("img/" + context.ImageValue)" />
                                            </td>
                                            </ItemTemplate>
                                            </asp.ListView>
                                            </tr>
</table>

<asp.FreeDataSource ID="FreeDataSource1" PaginationControlID="Pagination1"
                                            OnExecuteSelected="sender => this.data" />

<asp.Pagination ID="Pagination1" PagerControlID="DataPager1"
                                            OnSelectedPageChanging="this.Pagination_SelectedPageChanging" />

<br />

<asp.DataPager ID="DataPager1" PageSize="2">
                                            <Fields>
                                            <asp.NextPreviousPagerField ButtonType="ButtonType.Image"
                                            ShowFirstPageButton="true"
                                            ShowNextPageButton="false"
                                            ShowPreviousPageButton="false"
                                            FirstPageImageUrl="img/first.png" />
                                            <asp.NumericPagerField ButtonCount="3" />
                                            <asp.NextPreviousPagerField ButtonType="ButtonType.Image"
                                            ShowLastPageButton="true"
                                            ShowNextPageButton="false"
                                            ShowPreviousPageButton="false"
                                            LastPageImageUrl="img/last.png" />
                                            </Fields>
</asp.DataPager>

@code {
                                            private Sample[] data;
                                            private ListView listView;

                                            protected override async Task OnInitializedAsync()
    {
        data = await Http.GetFromJsonAsync<Sample[]>("sample-data/sample.json");
    }

                                            private void Pagination_SelectedPageChanging(object sender, PaginationEventArgs e)
    {
        listView.DataBind();
    }

                                            public class Sample
    {
                                            public int IntegerValue { get; set; }

                                            public string StringValue { get; set; }

                                            public double CurrencyValue { get; set; }

                                            public string ImageValue { get; set; }
    }
}