In this post we’ll see how we can implement Load More button using ASP.NET MVC and jQuery. Then we’ll see how we can use JsonResult controller action for turning view to string and use it in our front end.

Building JsonResult Controller Action for Turning View to String and Receiving What We Need From It

Here is the code for this method:

LoadMoreProduct size parameter

In LoadMoreProduct action, size is responsible for providing a number for use in skip method. Each time you click the load more button, we count how many times you hit it and multiply it with number of product that we want to return. Which in this case is 4 and send it to this method and receive new set of products.

LoadMoreProduct modelCount variable

We use this variable to send total number of products in our database so we can calculate when to hide the load more button. It will become more clear once you see the JavaScript portion of the page.

RenderRazorViewToString method

This method is responsible for taking a partial view and a model and rendering the partial view and giving us some html in the form of string. Here’s the definition of RenderRazorViewToString which I’ve found on Stackoverflow:

LoadMoreProduct – Send the html String and Number of Products to JavaScript

In the end, we send the ModelString to the caller. Then we use it to attach the html string to the DOM with some effect. Next we send the modelcount for counting how many products are left to show and then hide the load more button. Finally when there is no more product to show. Let’s waste no more time here and jump straight into the script part.

Load More JavaScript Part, Taking the Necessary Part form the Controller Action and Attach It to the DOM

Here is the code for JavaScript part, following this code, I’ll try to explain what I’ve done in as much detail as possible:

In the first line, we define the loadCount variable, we then multiply this variable with 4, because we have four products already on the page, we need to send this number to our action parameter and skip loadCount multiplied with four number of products and take another four, we do it with assigning it to the size and send it to our action, and in the end we one plus this value, so next time we click the load more button, we multiply 4 product by 2 and receive 8, so we need to skip 8 product and receive another four.

What we do after receiving the load more result

The next important part is what we do with what is returned from our action, our controller action as you saw returns a modelString to the JavaScript side, and then we have the html string that we simply attach to the DOM (before loadMore paragraph in this case) after ensuring the data is not empty and give it some effect or whatever using this code:

$(data.ModelString).insertBefore("#loadMore").hide().fadeIn(2000);

The code we use to calculate when we need to hide our load more button

var ajaxModelCount = data.ModelCount - (loadCount * 4);
if (ajaxModelCount <= 0) {
$("#loadMore").hide().fadeOut(2000);

Here, we multiply loadCount to four, and then subtract the number from data.ModelCount. We receive the modelcount which is all the products in database from our controller action every time we hit the LoadMoreProduct action, and when the ajaxModelCount is zero or less, we know that we don’t have any more products to show and we simply hide our loadmore button.

Other part of our code like the one with ajaxStart and ajaxStop in it, is for showing the loading animation in our button which is not obligatory and somewhat irrelevant to the problem we are trying to solve here.

Summary

This post was the part two of the this series that show how to implement load more using jQuery and Asp.Net MVC. The first part can be found here. I’ve included the sample project that I’ve built for this tutorial, if anything is not clear. The repository of the sample can be found here.