In this recipe, we will take a look at how you can create and display a pageable set of data. We will also see how we can navigate to the next and previous pages of data.
Because this recipe is not so much about how to run queries as it is about how to display a page of data and navigate to the next and previous pages, we will use NBuilder to mock our data access. We will also continue to use our Product and ProductRepository classes as the data to work with.
- To get started we need to create a new MVC project. As we will be using NBuilder to mock our data access, we will need to add a reference to the NBuilder assembly (in the dependencies directory). You will also want to copy over the
ProductandProductRepositoryclasses from the previous recipes. - Next, we will update our
ProductRepositoryto add the pagination functionality. First, we need to add two parameters to ourGetProductsmethod. We will need aPageparameter to tell us what page of data we need to display, and we will need aRecordCountto tell us how much data to return for each page.Models/ProductRepository.cs:
public List<Product> GetProducts(int page, int recordCount) { ... - Then we need to add a guard clause to the top of the method to make sure that we are operating on at least page 1, working on page 0 would return nothing!
Models/ProductRepository.cs:
public List<Product> GetProducts(int page, int recordCount) { if (Page < 1) Page = 1; - Now we are at the point where we can update the query that we are performing (or mocked query) to return only a set of paged data of the size that we request. This method call will be added just after the
Build()method and before theToList()call.Models/ProductRepository.cs:
... .Build() //skip the appropriate amount of records .Skip((page - 1) * recordCount) .ToList(); ...
- With our
ProductRepositoryupdated, we can now update our controller to work with the newGetProductssignature. We will also specify the default record count to be used by ourProductRepository. We will also pass the page ID down to our view to play with later.Controllers/HomeController.cs:
private int RecordCount = 20; public ActionResult Index(int id = 1) { ViewData["Products"] = new ProductRepository().GetProducts( id, RecordCount); ViewData["id"] = id; return View(); } - With our repository and controller updated, we can now update our view a little. Technically, the display is just another example of iterating through a collection of products, which has been covered to death in this chapter! All that is needed to complete this recipe is to show how we determine the previous page and the next page of data, and how to create the links to get us to the previous and next page of data.
Views/Home/Index.aspx:
<fieldset> <legend>Products</legend> <% int id = (int) ViewData["id"]; int PreviousId = (id - 1) < 1 ? 1 : id - 1; int NextId = id + 1; %> <%= Html.ActionLink("Previous","Index",new {@id=PreviousId}) %> - <%= Html.ActionLink("Next","Index",new {@id=NextId}) %>
The key to this recipe is knowing how big the set of data is you want to work with, and which page you are currently on. Tracking this, as people navigate from one page of data to the next, is all that is really required. Once you have tracked where you are and how big the page set is, you then need a way for your users to go forward and backward within that set of data. Other than that, you need to be able to communicate these needs with your data, be it XML, files, objects, or relational data in a database.