Pagination

Pagination is used to divide content, usually lists, into separate pages. For example, when scaffolding a List view, the default scaffolding template generates a table that contains a row for each item in the collection you pass into the view. This is fine for small amounts of data, but if the list contains hundreds of items, your page will take a very long time to load. Ideally, you would like to split your list view into a manageable 5 to 10 items per page view.

In the first edition of this book we used the PagedList.Mvc NuGet package to make paging using Bootstrap 3 easier. This package is no longer maintained, but there is a drop-in replacement library available on NuGet called X.PagedList.

Unfortunately, neither NuGet Packages would work, because of their dependencies on System.Web, which was removed from ASP.NET Core. In the following example we'll use an open source library called cloudscribe.Web.Pagination to create a paged list using Bootstrap 4.

To create the paged list, follow these steps:

  1. Open the project.json file, and add the following to the dependencies section: "cloudscribe.Web.Pagination": "1.0.2-*" Visual Studio will download the required dependencies. Next, open the ProductController.cs class file, add a new action called Index, and change its code to the following:
            public IActionResult Index(int? page)
         {
          int pageSize = 10;
          var currentPageNum = page.HasValue ? page.Value : 1;
          var offset = (pageSize * currentPageNum) - pageSize;
          var model = new ProductPagingViewModel();
          model.Products = GetProducts()
          .Skip(offset)
          .Take(pageSize).OrderBy(p=>p.Name)
          .ToList();
         model.Paging.CurrentPage = currentPageNum;
         model.Paging.ItemsPerPage = pageSize;
         model.Paging.TotalItems = GetProducts().Count;
         return View(model);
         }
    Pagination

    In the preceding code, a new action method called Index was created that accepts an integer parameter called page. This parameter is used to indicate which page of the list the user is currently viewing. A list of products is retrieved and ordered by the Name property.

    The pageSize variable is used to set the number of items each page should display. The list of products is then returned as a ProductPagingViewModel. The code for the ProductPaginViewModel is as follows:

              public class ProductPagingViewModel 
          { 
            public ProductPagingViewModel() 
            { 
                Paging = new PaginationSettings(); 
            } 
 
            public string Query { get; set; } = string.Empty; 
 
            public List<ProductModel> Products { get; set; } = null; 
 
            public PaginationSettings Paging { get; set; } 
          }
  2. Next, open the Startup.cs file and add the following code to the ConfigureServices method:
               services.AddCloudscribePagination();

    If the project's View folder does not already contain a _ViewImports.cshtml file, add it and change its content to the following:

            @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 
        @addTagHelper "*, cloudscribe.Web.Pagination"
  3. You need to add the preceding code, because TagHelpers are opt-in. TagHelpers are discussed in Chapter 5, Creating MVC Bootstrap Helper and Tag Helpers.
  4. Add a new view, called Index.cshtml, to the ViewsProduct folder.
  5. Add the following to the Index.cshtml file:
            @model Chapter3.Models.ProductPagingViewModel 
 
        <div class="container" style="padding-top: 10px;"> 
            <h1> 
                Products  
            </h1> 
 
            <table class="table table-striped table-bordered"> 
                <thead> 
                <tr> 
                    <th> 
                        Product Name 
                    </th> 
                    <th> 
                        Unit Price 
                    </th> 
                    <th> 
                        Units in Stock 
                    </th> 
                    <th> 
                        Discontinued 
                    </th> 
                </tr> 
                </thead> 
                <tbody> 
                @foreach (var item in Model.Products) 
                { 
                    <tr class="@item.Status"> 
                        <td>@item.Name</td> 
                        <td>@item.UnitPrice</td> 
                        <td>@item.UnitsInStock</td> 
                        <td>@item.Discontinued</td> 
                    </tr>} 
                </tbody> 
            </table> 
            <div> 
                <cs-pager cs-paging-pagesize="@Model.Paging.ItemsPerPage" 
                          cs-paging-pagenumber="@Model.Paging.CurrentPage" 
                          cs-paging-totalitems="@Model.Paging.TotalItems" 
                          cs-pagenumber-param="page" 
                          cs-show-first-last="true" 
                          cs-suppress-empty-nextprev="true" 
                          cs-suppress-inactive-firstlast="true" 
                          cs-first-page-text="First" 
                          cs-last-page-text="Last" 
                          cs-pager-li-current-class="active" 
                          cs-pager-li-non-active-class="disabled">
                </cs-pager> 
            </div> 
        </div>

    In the preceding HTML/Razor markup, the model for the view is declared as a ProductPaginViewModel object containing a list of ProductModel objects.

    At the bottom of the <table> element a custom TagHelper is used to render the paging for the table. The TagHelper is part of the cloudscribe.Web.Pagination library added earlier.

The cloudscribe.Web.Pagination library was created to support Bootstrap 3. In order for it to work with Bootstrap 4, you can change the source code of the library directly by following these steps:

  1. Open the PagerTagHelper.cs file, located inside the cloudscribe.Web.Pagination project in the Visual Studio Solution Explorer.
  2. Locate the following line inside the Process method. It should be at line number 211:
            var li = new TagBuilder("li");
  3. The Bootstrap 4 pagination component requires its <li> elements to have a class name of .page-link. Change this by adding the following line below the line mentioned in the previous step:
            li.AddCssClass("page-item");
  4. Bootstrap 4 also requires that <a> elements used for pagination have a class name of .page-link. In order to make the PagerTagHelper work with Bootstrap 4, change the following code in the Process method (line 224):
            var a = new TagBuilder("a"); 
        a.AddCssClass("page-link");
  5. You do not need to change the source code of the Cloudscribe.Web.Pagination library, you can also achieve the correct Bootstrap 4 styling for the pagination component by adding the following JavaScript code to your page:
            $(document).ready(function () { 
            $('ul.pagination > li').addClass('page-item'); 
            $('li.page-item > a').addClass('page-link'); 
            $('li.active').empty(); 
            $('li.active').append('<a class="page-link" href="#">' +                  @Model.Paging.CurrentPage + ' <span class="sr-only">(current)</span>
        </a>'); 
        });

All that is left to do is to build the project and open the page action of the product controller in your browser. You should see a paged table with a Bootstrap 4 styled pagination component divided into pages containing five products each:

Pagination
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.144.59