How To Create A Paginated List In Umbraco

Displaying lists on a website is another requirement of almost every website, website search, blog posts, latest news, the list could go on and on. If you find yourself wanting to create a list in Umbraco and need some advice, then read on.

Front-end Vs Back-end

As I write this it's 2017 and over the past few years, the growth of frontend technologies, like Angular, Jquery etc.. have grown significantly. One of the first questions you need to ask yourself will be, should I render the list via an API, or should I do it server side?  There are many different reasons to choose one or the other and below I will present the two biggest factors, from my experience. One of the biggest issues I encounter when I start a new project is having to re-write a lot of code simply because it's so coupled to the website code. MVC and CORE definitely help to mitigate this risk, however, a lot of developers don't have enough experience to grasp theses concepts yet and still add too much logic into their controllers. When you use an API in a separate class library if you ever need to rewrite the project, using a front-end approach you can simply lift and shift more code, from old to new. Another key decision should be how many sources will use your data. Do you have a mobile app and a website? Will you require other people to consume your data later? Caching, using a client-side framework to generate dynamic content, while caching the server-driven outer HTML framework, if architected in the right way can make your website more performant. 90% of the projects out there won't need that level of caching, however, if you have a very high traffic website, then this could help you scale it better.

How To Build Your Pagination

For the rest of this tutorial, I'm going to assume you have weighed up your options and you decided to render your list server-side (like this website). My approach to development is to not re-invent the wheel too much. Following that principle, I'd recommend using MVC.PagedList. It's a NuGet package, that does all the hard work for you. It also comes with some CSS to make it look pretty if you don't want to style it yourself. In Visual Studio, right-click on your solution, select 'Manage NuGet Packages For Solution'. Type in 'PagedList' and install the MVC version. To get some form of pagination working within your project, you will need three things some frontend Razor code and a controller. In these examples, I'm using route-hijacking within Umbraco. Route Hijacking will allow you to work with MVC controllers within Umbraco. I won't cover this topic here, but if you want to learn more I suggest you read, What Is Route Hijacking In Umbraco.
public class SearchResult
    {
       public string Url { get; set; }

       public string Name { get; set; }
    }
First, we'll need a class to store our search result data, in this example mine looks like the above. Next, we need a controller.
public class SearchPageController : RenderMvcController
    {
        private readonly int NUMBER_OF_RESULTS_PER_PAGE = 10;

        public ActionResult Index(RenderModel model, string searchTerm, int page = 1)
        {
            List<data> results = GET YOUR DATA HERE
            var data = new PagedList<SearchResult>(result, page, NUMBER_OF_RESULTS_PER_PAGE);
            return CurrentTemplate(data);
        }
    }
I won't go into the standard MVC stuff, the important part for you to understand is the 'page' parameter being passed to the action and the use of the PageList class. The PagedList class is where the magic happens. It will deal with all the paging figuring out what results to display etc.. all you need to do is give it a list of objects, the current page you want to display and the number of results you want to display per page. After, creating this, simply send it back to your view to render it.
@using PagedList.Mvc;
@using PagedList;


                @foreach (var result in Model.SearchResults)
                {
                    
<article class="search-result">
                            
<div class="col-md-11">
                                <a title="@result.Name" href="@result.Url" >
                                    @result.Name
                                </a>
                            </div>

                    </article>

                }

                
<div class="pagination-area">
                    @Html.PagedListPager(Model.SearchResults, page => "htt://www.yourwebsiteurl" + HttpContext.Current.Request.QueryString["p"])
                </div>


The important part in this is the Html.PagedListPager, this is the thing that will display your pagination control at the bottom of your page. You can then render your results using the SearchResults. When you run your website, as long as you reference the stylesheet correctly (or you use Bootstrap anyway), you should see a pagination display that looks similiar to the one above.

Takeaway

I have to admit whoever invented Nuget and packages, has made all of our lives a lot easier. Back in the days when I used to f=work with web-forms, implementing this type of functionality was very boring and painstaking, simply adding the PagedList control, means you don't need to really worry about the pagination stuff and you can concentrate on other things.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top