Getting Started with Blazor Pager Component

1 Dec 202512 minutes to read

The Syncfusion^® Blazor Pager component enables navigation through large collections by dividing content into multiple pages. This guide explains how to integrate thePager component in aBlazor WebAssembly application usingVisual Studio orVisual Studio Code.

Prerequisites

System requirements for Blazor components

Create a new Blazor App in Visual Studio

ABlazor WebAssembly App can be created usingVisual Studio with the built-inMicrosoft templates or theSyncfusion^® Blazor Extension.

OpenVisual Studio 2022 (v17.8 or later).
SelectCreate a new project.
ChooseBlazor WebAssembly Standalone App from the list of templates and clickNext.
Configure theproject name,location, andsolution settings, then clickNext.
Select thetarget framework as.NET 8.0 or later (choose the latest installed version available on the system).
ClickCreate to generate the project.

NOTE
For detailed steps, refer toMicrosoft Blazor tooling documentation.

Install Syncfusion^® Blazor NuGet Packages

To integrate the Blazor Pager component, install the required NuGet packages in theBlazor WebAssembly project:

OpenNuGet Package Manager in Visual Studio:
Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
Search and install the following packages:
- Syncfusion.Blazor.Navigations
- Syncfusion.Blazor.Themes
For projects usingWebAssembly orAuto interactive render modes, ensure these packages are installed in theClient project.
Alternatively, use thePackage Manager Console:

Package Manager

Install-PackageSyncfusion.Blazor.Navigations-Version32.1.19Install-PackageSyncfusion.Blazor.Themes-Version32.1.19

NOTE
Syncfusion^® Blazor components are available onnuget.org. For a complete list of packages, refer toNuGet packages.

Prerequisites

System requirements for Blazor components

Create a new Blazor App in Visual Studio Code

ABlazor WebAssembly App can be created usingVisual Studio Code with the built-inMicrosoft templates or theSyncfusion^® Blazor Extension.

OpenVisual Studio Code.
Open theintegrated terminal (Ctrl + `).
Run the following commands to create a newBlazor WebAssembly project:

Blazor WASM App

dotnetnewblazorwasm-oBlazorAppcdBlazorApp

Open theproject folder inVisual Studio Code.

Install Syncfusion^® Blazor NuGet Packages in Visual Studio Code

PressCtrl+` to open the integrated terminal in Visual Studio Code.
Ensure the terminal is in the project root directory where the.csproj file is located.
Run the following commands to install the required NuGet packages:
- Syncfusion.Blazor.Navigations
- Syncfusion.Blazor.Themes

Package Manager

dotnetaddpackageSyncfusion.Blazor.Navigations-v32.1.19dotnetaddpackageSyncfusion.Blazor.Themes-v32.1.19dotnetrestore

NOTE
Syncfusion^® Blazor components are available onnuget.org. For a complete list of packages, refer toNuGet packages.

Register Syncfusion^® Blazor Service

Import the required namespaces in the_Imports.razor file:

~/_Imports.razor

@using Syncfusion.Blazor@using Syncfusion.Blazor.Navigations

Next, register the Syncfusion^® Blazor service in theProgram.cs file:

~/Program.cs

usingMicrosoft.AspNetCore.Components.Web;usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;usingSyncfusion.Blazor;varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");builder.Services.AddScoped(sp=>newHttpClient{BaseAddress=newUri(builder.HostEnvironment.BaseAddress)});builder.Services.AddSyncfusionBlazor();awaitbuilder.Build().RunAsync();....

Add stylesheet and script resources

The theme stylesheet and script files are provided throughStatic Web Assets in the NuGet packages. Include these references in the<head> section of the~/wwwroot/index.html file:

<head>    ....<linkhref="_content/Syncfusion.Blazor.Themes/bootstrap5.css"rel="stylesheet"/><scriptsrc="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"type="text/javascript"></script></head>

NOTE
Refer toBlazor Themes for various methods to reference themes in a Blazor application:

* [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets)* [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference)* [Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)

For script reference options, seeAdding Script References.

Add Blazor Pager component

The Syncfusion^® Blazor Pager component can be integrated with other components to provide page navigation for large datasets. This example demonstrates integrating thePager with theListView component.

@using Syncfusion.Blazor.Navigations<SfPagerPageSize="5"NumericItemsCount="4"TotalItemsCount="25"></SfPager>

1. Render ListView Component

Add theListView component in thePages/Index.razor file and bind it to a collection:

@using Syncfusion.Blazor.Navigations@using Syncfusion.Blazor.Lists<SfListViewDataSource="@ListData"TValue="DataModel"><ListViewFieldSettingsTValue="DataModel"Id="Id"Text="Name"></ListViewFieldSettings></SfListView>@code {    List<DataModel> ListData = new List<DataModel>();    protected override void OnInitialized()    {        base.OnInitialized();        ListData.Add(new DataModel { Name = "Nancy, Berlin, France" });        ListData.Add(new DataModel { Name = "Andrew, Madrid, Germany" });        ListData.Add(new DataModel { Name = "Janet, London, Brazil" });        ListData.Add(new DataModel { Name = "Margaret, Marseille, Belgium" });        ListData.Add(new DataModel { Name = "Steven, Cholchester, Switzerland" });        ListData.Add(new DataModel { Name = "Laura , Tsawassen, Venezuela" });        ListData.Add(new DataModel { Name = "Robert, Tacoma, Austria" });        ListData.Add(new DataModel { Name = "Michael, Redmond, Mexico" });        ListData.Add(new DataModel { Name = "Albert, Kirkland, USA" });        ListData.Add(new DataModel { Name = "Nolan, London, Sweden" });        ListData.Add(new DataModel { Name = "Jennifer, Berlin, Finland" });        ListData.Add(new DataModel { Name = "Carter, Madrid, Italy" });        ListData.Add(new DataModel { Name = "Allison, Marseille, Spain" });        ListData.Add(new DataModel { Name = "John, Tsawassen, UK" });        ListData.Add(new DataModel { Name = "Susan, Redmond, Ireland" });        ListData.Add(new DataModel { Name = "Lydia, Cholchester, Portugal" });        ListData.Add(new DataModel { Name = "Kelsey, London, Canada" });        ListData.Add(new DataModel { Name = "Jessica, Kirkland, Denmark" });        ListData.Add(new DataModel { Name = "Robert, Berlin, Austria" });        ListData.Add(new DataModel { Name = "Shelley, Tacoma, Poland" });        ListData.Add(new DataModel { Name = "Vanjack, Tsawassen, Norway" });        ListData.Add(new DataModel { Name = "shelley, Cholchester, Argentina" });        ListData.Add(new DataModel { Name = "Lydia, Kirkland, Finland" });        ListData.Add(new DataModel { Name = "Jessica, Madrid, Sweden" });        ListData.Add(new DataModel { Name = "Nolan, London, UK" });        ListData.Add(new DataModel { Name = "Jennifer, Redmond, Italy" });    }    public class DataModel    {        public string Name { get; set; }        public string Id { get; set; }    }}

2. Add Pager component

Add thePager component in the same file (Pages/Index.razor) below theListView. Configure the essential properties:

PageSize – defines the number of items displayed per page.
NumericItemsCount – specifies the count of numeric pager buttons.
TotalItemsCount – indicates the total number of records in the data source.

@using Syncfusion.Blazor.Navigations<SfPagerPageSize=5NumericItemsCount=4TotalItemsCount=25></SfPager>

For additional properties ofPager, refer to the API Reference.

3. Integrate Pager with ListView

To enable paging functionality, bind theListView data for the current page by applyingSkip andTake operations on the collection. These operations are based on thePageSize property of the Pager component.

TheItemClick event is triggered when a pager item is clicked. This event updates theSkip andTake values dynamically according to the selected page, ensuring that the correct subset of data is displayed in the ListView.

@using Syncfusion.Blazor.Data@using Syncfusion.Blazor.Navigations@using Syncfusion.Blazor.Lists<divclass="col-lg-12 control-section sb-property-border"> @{    var listData = ListData.Skip(SkipValue).Take(TakeValue).ToList();<SfListView@ref="@List"DataSource="@listData"TValue="DataModel"HeaderTitle="Contacts"ShowHeader="true"><ListViewFieldSettingsTValue="DataModel"Id="Id"Text="Name"></ListViewFieldSettings></SfListView>}<SfPager@ref="@Page"PageSize=5NumericItemsCount=4TotalItemsCount=25ItemClick="Click"></SfPager></div>@code {    SfPager Page;    public SfListView<DataModel> List { get; set; }    public int SkipValue;    public int TakeValue = 5;    List<DataModel> ListData = new List<DataModel>();    protected override void OnInitialized()    {        base.OnInitialized();        ListData.Add(new DataModel { Name = "Nancy, Berlin, France" });        ListData.Add(new DataModel { Name = "Andrew, Madrid, Germany" });        ListData.Add(new DataModel { Name = "Janet, London, Brazil" });        ListData.Add(new DataModel { Name = "Margaret, Marseille, Belgium" });        ListData.Add(new DataModel { Name = "Steven, Cholchester, Switzerland" });        ListData.Add(new DataModel { Name = "Laura , Tsawassen, Venezuela" });        ListData.Add(new DataModel { Name = "Robert, Tacoma, Austria" });        ListData.Add(new DataModel { Name = "Michael, Redmond, Mexico" });        ListData.Add(new DataModel { Name = "Albert, Kirkland, USA" });        ListData.Add(new DataModel { Name = "Nolan, London, Sweden" });        ListData.Add(new DataModel { Name = "Jennifer, Berlin, Finland" });        ListData.Add(new DataModel { Name = "Carter, Madrid, Italy" });        ListData.Add(new DataModel { Name = "Allison, Marseille, Spain" });        ListData.Add(new DataModel { Name = "John, Tsawassen, UK" });        ListData.Add(new DataModel { Name = "Susan, Redmond, Ireland" });        ListData.Add(new DataModel { Name = "Lydia, Cholchester, Portugal" });        ListData.Add(new DataModel { Name = "Kelsey, London, Canada" });        ListData.Add(new DataModel { Name = "Jessica, Kirkland, Denmark" });        ListData.Add(new DataModel { Name = "Robert, Berlin, Austria" });        ListData.Add(new DataModel { Name = "Shelley, Tacoma, Poland" });        ListData.Add(new DataModel { Name = "Vanjack, Tsawassen, Norway" });        ListData.Add(new DataModel { Name = "shelley, Cholchester, Argentina" });        ListData.Add(new DataModel { Name = "Lydia, Kirkland, Finland" });        ListData.Add(new DataModel { Name = "Jessica, Madrid, Sweden" });        ListData.Add(new DataModel { Name = "Nolan, London, UK" });        ListData.Add(new DataModel { Name = "Jennifer, Redmond, Italy" });    }    public void Click(PagerItemClickEventArgs args)    {        SkipValue = (args.CurrentPage * Page.PageSize) - Page.PageSize;        TakeValue = Page.PageSize;    }    public class DataModel    {        public string Name { get; set; }        public string Id { get; set; }    }}

4. Run the Application

PressCtrl+F5 (Windows) or⌘+F5 (macOS) to launch the application. ThePager component will render and enable navigation through the collection.