Sep 10, 2015
Nowadays when we create websites to represent services or products we need to include the correct media so that it can show case the product to its best. One way of doing this is to have a gallery on your website. These galleries can either contain videos, photos or any media you deem fit.
An example of this gallery can look like this:
The problem with this is that there might be way too many photos on one page making the user scroll to get to all of the pictures. To avoid this we can implement paging on our website so that the user has a certain amount of photos per page, this will stop them from scrolling downwards and give them the option to just hit the next or previous button.
An example of this final product will look like this:
To implement your own gallery that uses paging, you can follow these steps. Please take note that the follow steps will use a folder with all the photos stored in it and a local database with the information stored in it. This website will also be created with MVC.
Set up a model to represent the information of the photo. In my case I want to store the following:
- ID: To uniquely identify each individual photo
- URL: This will be the absolute path to where the photo is stored
- Title: Will be a short title of the photo
- Description: A brief description of the product.
The following piece of code shows my model that I have created:
Outlined in yellow is the needed namespaces for the decoration attributes, these will be used to set certain properties in our database. Next, outlined in red will be our primary key in the table marked with the “Key” word and it will take on an “Identity” constrain so that it auto increments the ID value for us. The URL and Title values are both required and the URL has max character length in our table, these are outlined in blue. Finally we have the Description field that will be just a string value.
We will now create our DBcontext class so we can generate the database at the backend. This will require us to install EntityFramework through the NuGet package manager. Once we have that in our project we can go ahead and create our class.
The code for the context class looks like this:
We stick to a very basic implementation of the context class. This needs to inherit from a class called DbContext. Once we inherit from that we define what tables we want to create, to do this you create an object from the IDbSet interface. Since I want photo model to be used my type will be photo and the name for the object will be photos. Also I haven’t specified a constructor for this class, so by default it will create a localdb to save the information in.
Next we will create an initializer class to create the database and add some demo data we can work with. To do this you need to create a new class that will seed the new information into the database and also create it.
When we create this class you will either inherit from a class that will always drop and recreate the database, or alternatively just drop the database if the model changes. In my scenario I will drop and create each time. After we inherit from the specific class we need to override the seed method to add the demo data to our table.
The initializer class will look like the this:
Outlined in yellow we have the namespaces required for this to work, I included the IO namespace cause I will be accessing a directory. This class will then inherit from the DropCreateDatabaseAlways class as seen in purple. Finally we override the seed method that is outlined in blue, in this method we run some logic to iterate through the directory and get back all the files and append information to the database.
At the end of this we still need to configure our application to use the initialiser at startup so we need to modify the Global.asax file and add the following:
This file needs the namespaces outlined in yellow and it needs the piece of code outlined in blue, this code will tell our application to use the context class and the initializer class to build the Database.
That will conclude the steps of setting up the environment, next we will look at how to retrieve the data from the database and then to implement paging on that data. To achieve this you can complete the following steps:
Add a controller class for your photo model, and implement the index action to return your items from the database. The controller will look like this:
There is no paging logic completed as of yet, this will come later. We need to instantiate a new instance of our context class (seen in purple) and then in the “index” action we return a full list of the photos in our database by using the line outlined in blue.
Next we will add a view by right clicking on the ActionResult called “Index” and then clicking on add view. This brings up the following window:
Please make sure you select the list option under template, Photo under model class and Photocontext under the data context class. Once you click add you should see the following html markup.
This is an html file build with razor and will list all the items from the database table. I am now going to modify the file and replace the markup outlined in yellow. The final html markup will look like this:
The following is an example of how it will look like when you run it, take note of all the items on the page. We have to scroll down to see them all.
In this code we add the two namespaces for pagedlist (as outlined in yellow), then we add the code necessary to do the paging. First we modify the Index method to accept a new argument that is int, nullable and called “page”. The reason why we do this is because the first load of the page will have a null value for the argument. The next step is to add “.ToPagedList and provide the variable you are using and then the page number and the amount of items per page.
This step of adding pagination is to update the “web.config” file under the views folder. We just need to add two new namespaces to it. This is outlined in yellow.
The very last part to adding pagination is to update the view we are using. The updated view looks like this:
In this view we first update it to include the two new namespaces and modify the Ienumerable to IpagedList (as outlined in blue). The next step is to modify the heading by including “.first()” inbetween model and property name (as seen in purple). Finally we can add the pager to make sure our users can see the next items.
The “PagedListPager” need the following arguments:
- The model you are using
- The variable to update and assign an action to invoke as part of the variable
Once you have completed all these steps you end of with the following result: