Introduction

In the next two posts, I’m going to show you how to build a load more button for your page using Asp.Net MVC, you can use it for any various kind of things, but in the case of this tutorial, I’ll use it for my fictitious product list. I’ll try not to complicate things and explain what I’ve done in simple and straightforward manner.

In a nutshell

To put it concisely, the way we are going to implement this feature is that we send a model into a method, this method generate a view and convert it to string and then we attach this string into the DOM, of course we need some code to calculate how many time we’ve clicked Load More button and multiply it with number of products that we want to load, and skip that amount and take the number of products that we need. I won’t bother with more explanation here, let’s jump straight into the code and I’ll explain each part of code in detail.

Building the index view for showing already on page lists of products

First step is to send our model to our view and then build the view’s user interface to jump start our load more page. The important thing here is that we can’t use two nested foreach loop, here we need to foreach loop for one bootstrap row and the inner loop for generating the actual products, for this start page we show four product on the page, any subsequent product must be loaded using load more button.

Here is the code for our load more controller action:

Here is the code for our load more View:

You might notice the using of Batch here, what it does is that it’ll batch our model so we can foreach through our item, here is the code for the method responsible for this feature that I’ve found on Stackoverflow:

If you don’t care about this much hassle, you can also use a simple for loop to do the one iteration, and to be honest the only reason I’ve done this in this manner was that I was curious how we can have nested for each loop. If you want, use a simple for loop like so:

For(int i=0; i < 1; i++)

You might also notice the script file at the end of our view, ignore it for the moment, I’ll explain what I’ve done later in this article.

Build partial view for load more turning the loaded products to string

Next step is to build a partial view, later we give this partial view and a model with our products to a method and receive some string to work with, this view is pretty straightforward:

This is the end of part one, you can see the continuation of this article in part two, also I’ve included the source code, if the article formatting is hard to read you can read the code form the included source.

Summary

In this post we saw how we can implement a load more button using jQuery and Asp.Net MVC. You can find the part two of  this post here. There’s also a git repository with an Asp.Net MVC application that uses this method that can be found here.