Implement Lazy Loading In MVC

Introduction

This article explains how to implement lazy data loading on a scroll down page. Lazy loading is a technique to load data on demand which will help to improve page performance. In this article I will demonstrate how to implement lazy loading on page scroll. Once a user uses scroll on the page then on demand data will load from the database using Ajax call.

Lazy loading is very useful when you have lakhs of records to load. You can do pagination and load your data based on demand.

Here I will explain step by step from scrach, an application to implement lazy loading using ajax call. I have attached the source code for this demo.

Step 1

Create a new project using the below intrsuctions. First select a new project from Visual Studio and then select Asp.Net Web application as in the below screen,

Step 2

Select MVC option from the next screen and click on ok button which will create a new project for you.

Step 3

Right click on the solution and click on Manage NuGet package manager.

Step 4

Search entity framwork package and add reference for entity framwork. Here I have added reference for entity framework v6.4.

Step 5

Click on install button and the I Accept button to install entity framework.

Step 6

Once entity framework reference is added from nuGet package, add new entity data model to get data from database.

Step 7

Once entity data model is added then click on any of below options as per your project requirement. Here I have selected Code first from database approch to create model.

Step 8

Click on next button and create new connection using the below screen, click on new connection button.

Step 9

Select your sql server name and database as shown in the below screen and test connection.

Step 10

Once connection is succeeded then you are able to see the below screen with connection string.

Step 11

Once connection string is created you will get all tables from your database in the next screen as below. Select the appropriate table from the below screen, here I have selected product table, and click on finish button.

Step 12

Add new controller as per your requirement - here I have added with name ProductController.

Step 13

Once controller is created, click on controller method and add view for your action method.

Step 14

Select view as partial view, template as list and use Product model beacuse here I am going to use partial view to render our lazy loading data which will come from ajax call response.

Step 15

So far, we are done with controller, model and view creation. Now we will start code implementation for ajax call and scrollbar event for loading data dynamically once user scrolls down the page. Then based on scroll data it should be loading as per page size set up. In this example I have set page size to 20 so on scroll Ajax call will return 20 records each time.

Let's start with creating SQL table and create 10000 records in a table. SQL script to create table and create random records:

SQL Script

-- ==================== Create Table ============================
CREATE TABLE [dbo].[Products](
[ProductID] [int] IDENTITY(1,1) NOT NULL,
[ProductName] [nvarchar](max) NULL,
[Price] [int] NOT NULL,
[ProductDescription] [nvarchar](max) NULL,
CONSTRAINT [PK_dbo.Products] PRIMARY KEY CLUSTERED
(
[ProductID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
-- ===============================================
declare @productId int
select @productId = 1
declare @ProductName varchar(100)
declare @Price int
declare @Productdescription varchar(500)
-- ================================================
--Loop through 1000 records and insert into table
-- ================================================
while @productId >=1 and @productId <= 10000
begin
set @ProductName = 'PENT - '+ CAST(@productId as nvarchar(10))
set @Price = 1000
set @Productdescription = 'PENT - Description - '+ CAST(@productId as nvarchar(10))
if (@productId%2 = 0)
begin
set @ProductName = 'PENT - '+ CAST(@productId as nvarchar(10))
set @Price = 2000
set @Productdescription = 'PENT - Description - '+ CAST(@productId as nvarchar(10))
end
if(@productId%3 = 0)
begin
set @ProductName = 'Color T-SHIRT - '+ CAST(@productId as nvarchar(10))
set @Price = 3000
set @Productdescription = 'Color T-SHIRT - Description - '+ CAST(@productId as nvarchar(10))
end
if(@productId%5=0)
begin
set @ProductName = 'Designed Shirt - '+ CAST(@productId as nvarchar(10))
set @Price = 5000
set @Productdescription = 'Designed Shirt - Description - '+ CAST(@productId as nvarchar(10))
end
insert into products(ProductName, Price,ProductDescription)
values( @ProductName ,@Price, @Productdescription)
select @productId = @productId + 1
end
---====================================================

Model

public partial class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public int Price { get; set; }
public string ProductDescription { get; set; }
}

DbContext

public partial class Products : DbContext
{
public Products()
: base("name=Products")
{
}
public virtual DbSet<Product> ProductsDetails { get; set; }
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
}
}

Repository

public class ProductRepository
{
private const int pageSize = 20;
public List<Product> GetProducts(int? pageNumber)
{
var numberOfRecordToskip = pageNumber * pageSize;
using (var context = new Products())
{
return context.ProductsDetails.OrderBy(x=>x.ProductID).Skip(Convert.ToInt32(numberOfRecordToskip)).Take(pageSize).ToList<Product>();
}
}
}

Controller

namespace LazyLoadingDemo.Controllers
{
public class ProductController : Controller
{
private ProductRepository productRepository;
// GET: Product
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult ProductList(int? pageNumber)
{
productRepository = new ProductRepository();
var model = productRepository.GetProducts(pageNumber);
return PartialView("~/Views/Product/ProductList.cshtml", model);
}
}
}

View

@model IEnumerable<LazyLoadingDemo.Product>
<div class="jumbotron">
<h2>Lazy Loading Example Using Ajax in MVC Application</h2>
<p class="lead">
<br />
<h4>This is home page where we will try to load partial view.</h4>
<span class="text-primary">
Once user scroll down page then scroll event gets fire and append records to existing table.
It loads only 20 records at a time based on each scroll down event
</span>.
</p>
</div>
<div class="table-responsive col-md-12" id="divajaxCall">
<div class="jumbotronajaxdiv">
<h3>Records get append to this table once user scroll down page.</h3>
</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.ProductName)
</th>
<th>
@Html.DisplayNameFor(model => model.Price)
</th>
<th>
@Html.DisplayNameFor(model => model.ProductDescription)
</th>
</tr>
</thead>
<tbody>
@if (Model != null)
{
@Html.Partial("~/Views/Product/ProductList", Model)
}
</tbody>
</table>
<div class="row">
<div id="loading" style="text-align:center; padding:0 0 0 0">
<img src='~/Content/progress-loader1.gif' />
</div>
</div>
<div class="divfooter">
</div>
</div>
<div id="divHide"></div>
@section scripts{
<script src="~/Scripts/lazyLoading.js"></script>
<script type="text/javascript">
$(function () {
$("div#loading").hide();
});
var ajaxCallUrl = '@Url.RouteUrl("ProductDataList")';
$(window).scroll(scrollHandler);
</script>
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="~/Content/CustomStyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Index.cshtml

Partial View

ProductList.cshtml

This is partial view which will loop through number of records which comes from ajax call and will return HTML response and append to table where we are going to bind all records base on scroll down page.

@model IEnumerable<LazyLoadingDemo.Product>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ProductName)
</td>
<td>@Html.DisplayFor(modelItem => item.Price)</td>
<td> @Html.DisplayFor(modelItem => item.ProductDescription)</td>
</tr>
}

Web.Config

Connection string section,

<connectionStrings>
<add name="Products" connectionString="data source=XYZ-PC\SQLEXPRESS;initial catalog=ProductDatabase;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework" providerName="System.Data.SqlClient" /> </connectionStrings>

Routeconfig

public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute("ProductDataList", "", new { controller = "Product", action = "ProductList" });
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Product", action = "Index", id = UrlParameter.Optional }
);
}
}

JavaScript for Ajax call

lazyLoading.js

var ajaxCallUrl = 'Product/ProductList',
page = 0,
inCallback = false,
isReachedScrollEnd = false;
var scrollHandler = function () {
if (isReachedScrollEnd == false &&
($(document).scrollTop() <= $(document).height() - $(window).height())) {
loadProducts(ajaxCallUrl);
}
}
function loadProducts(ajaxCallUrl) {
if (page > -1 && !inCallback) {
inCallback = true;
page++;
$("div#loading").show();
$.ajax({
type: 'GET',
url: ajaxCallUrl,
data: "pageNumber=" + page,
success: function (data, textstatus) {
if (data != '') {
$("table > tbody").append(data);
}
else {
page = -1;
}
inCallback = false;
$("div#loading").hide();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
}

Step 15

Put URL in browser http://localhost:XXXXX/Product/Index and run application using F5, user should be able to see table with 20 records as in the below screen and once you scroll down scrollbar right side of window user will see more reords append to table as the number of row requests as per page size setting, here I have page size 20.

Once you scroll down then loader will apear under table while getting data from database and disappear once data is appended to table after ajax call is successful.

Conclusion

In this article we learned about how to implement lazy loading in an MVC application using ajax call and how it helps us to improve performace. This is very important when you have heavy data load. Lazy loading helps us to load data in slots (number of page size) on demand which will bring records when you need or when you scroll down page. This technique leads to a better user experience and gives better performance due to the fact that ajax call will execute ansyncronously in the backend.

Thank you for reading !!! Happy coding !!!

26 Comments

Join the conversation! Your thoughts help the community grow.

Emil Nachev5y ago
For what is this variable "isReachedScrollEnd"?
Debasis kumar5y ago
I am not found the download link please provide the same in this chat section
- Jignesh Kumar5y ago
  I have attached it. Once approved you will be able to see link for download at top of article.
- Jignesh Kumar5y ago
  Please check now Source code available in this article.
Debasis kumar5y ago
Please share the source code
- Jignesh Kumar5y ago
  Attached in article. Please download from there.
niranjan bhuta6y ago
Now I understand that WebApi is not a must for Ajax call. Is it true?
- Jignesh Kumar5y ago
  niranjan bhuta you are right web api is not must, You can do ajax call in mvc controller or web method as well.
Md. Zahirul Islam6y ago
Hello Sir! When I've modified the Product List.cshtml, and implement a group by clause the lazy loading not working. It only renders the first 10/20 records which I've set records Per Page. @foreach (var group in Model.GroupBy(d => d.ProductName)){ <tr class="text-left text-danger bg-success"> <td colspan="6"> <strong>@group.Key</strong> </td> </tr> foreach (var item in group) { <tr> <td>@Html.DisplayFor(modelItem => item.Price)</td> <td> @Html.DisplayFor(modelItem => item.ProductDescription)</td> </tr> } }
shiva ksk6y ago
ProductsDetails we are declare in Properties?
- Jignesh Kumar6y ago
  Thanks for your comment, Please check above repository section one more section dbcontext
shiva ksk6y ago
Public class ProductRepository { private const int pageSize = 20; public List<Product> GetProducts(int? pageNumber) { var numberOfRecordToskip = pageNumber * pageSize; using (var context = new Products()) { return context.ProductsDetails.OrderBy(x=>x.ProductID).Skip(Convert.ToInt32(numberOfRecordToskip)).Take(pageSize).ToList<Product>(); } } }
shiva ksk6y ago
Where Declare ProductDetails?
- Jignesh Kumar6y ago
  Hi Shiva, You can download source code and you will find under Products class, public partial class Products : DbContext { public Products() : base("name=Products") { } public virtual DbSet<Product> ProductsDetails { get; set; } protected override void OnModelCreating(DbModelBuilder modelBuilder) { } }
Arunkumar M6y ago
In Chrome, by using scroll down, first 20 records were loading and that time the scroll bar went down. While again scroll down, the scroll event was not triggered and data were not loaded.
- Jignesh Kumar6y ago
  I have updated code.could you please check and let me know still you face this issue.
Arunkumar M6y ago
Nice article!!! However The scroll down event works only in IE not in chrome browser. It would be helpful, if you identify the root cause of the issue.
- Jignesh Kumar6y ago
  Hi Arun, I have updated condition for scroll event could you please check ? If you face any issue in IE browser then please drop me comment
Vinay Singh6y ago
Nice article
- Jignesh Kumar6y ago
  Thank you vinay
Mas6y ago
Thank you Jignesh Kumar for sharing, Very help full.
- Jignesh Kumar6y ago
  You are most welcome Sam E
Amit Kumar Singh6y ago
Thank you for sharing !!
- Jignesh Kumar6y ago
  You are welcome Amit Singh
- shiva ksk6y ago
  Using (var context = new Products()) { return context.ProductsDetails.OrderBy(x=>x.ProductID).Skip(Convert.ToInt32(numberOfRecordToskip)).Take(pageSize).ToList<Product>(); } .
- shiva ksk6y ago
  In the above code where we declare ProductDetails