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.

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.

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.

The important part of 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 similar to the one above.

The person who invented Nuget deserves massive props. Nuget 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.