3 steps to Paging in ASP .NET | Blog part 3

Adding paging to your asp .NET site can be simple. All we need to do is add a few simple nuget packages, and edit the controller and View. Lets get started!

The Nuget packages

We're going to need a few packages to implement paging easily. The easy one is X.PagedList (find it here) but you'll also need X.PagedList.Mvc.Core for the MVC functionality, and X.PagedList.Web.Common for styling.

Adding logic to our controller.

In the controller for the view that requires paging (mine is my home index, but it could be elsewhere depending on the project) we need some variables to determine pages. First off, lets add a nullable int to the parameters called page. To handle the case where it is null, we use the null coalescing operator to default to page 1. Our page size will determine how many elements (in my case: blogs) go on each page, 5 is probably a good number for me, but choose what fits your site the best.

Once we retrieve posts from the database, we'll order the posts by when they were created (you can take this part of Linq out if it doesn't make sense for your project) and then make a paged list using our new function. I'm then passing the blogs into my view.

public async Task<IActionResult> Index(int? page)
        {
            //handles case of no page given, in that case give it the first page.
            var pageNumber = page ?? 1;
            var pageSize = 5;

            var pagedBlogs= await _context.Blog.OrderByDescending(b=>b.Created).ToPagedListAsync(pageNumber,pageSize);
            return View(pagedBlogs);
        }

Once you add any missing directives, that takes care of the controller.

Handling our view

Over in the view (mine is index) at the bottom of your page, lets add a line that shows the user which page they are on, and how many total pages there are. Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount will work, assuming you followed the same naming conventions. Feel free to customize the Text to match the nature of your project, but leave the Model attributes the same.

After that, we'd like have a navigation element that lets users go to the previous or next page. You'll need the directive @using X.PagedList.Mvc.Core as well as the related nuget package (which you should have installed in part 1). The line to do this is @Html.PagedListPager(Model, page => Url.Action("Index", new { page = page })) and you're done!

Its functional, but it looks hideous. This is why we need the X.PagedList.Web.Common, Adding a parameter to our @Html element allows us to change a few options and make it pretty with some bootstrap classes.

@Html.PagedListPager(Model, page => Url.Action("Index", new { page = page }),
                    new PagedListRenderOptions
                    {
                        LiElementClasses = new string[] { "page-item"},
                        PageClasses = new string[] {"page-link"}
                    } 
               )

Mine ended up looking like this:

Now you have a beautiful paged layout. Comment below with your ideas for styling the Elements and page classes. I'm using some of the most basic bootstrap elements.

Thanks for reading

With your new paged layout, users don't have to load all of your content at once, and can navigate back and forth. My next step is to add this kind of functionality to my posts for each blog. What kind of project are you using this on?