Lazy Loading In ASP.NET MVC

Introduction

Lazy loading is a technique which loads the data on demand or when it is required. It improves efficiency and the performance of the application. Let's take a scenario, where we have 1 lakh of records and want to display them to the user. However, when you load 1 lakh of records at a time, it takes more time to render the result. It may be off putting to the user, while loading the records. In order to avoid the problem, either we need to use paging concept or lazy loading. Lazy loading loads the data step-by-step, when the user scrolls down the page, which is required by it.

Requirement- We have 500 records in our DataSource (text file or the database). It displays 20 records, when the page loads the first time. It displays the next records, when the user scroll down the page.

Using Code

To describe technically the requirement stated above, we will use DataSource as a text file, which has 500 records. Subsequently, controller's action loads 20 records for the first time. When the user scrolls down, it sends an AJAX request to the Server to load the next records. JavaScript code snippet checks when the user scrolls down by checking Window height and scroll height. The snapshot is gif project structure and follows the steps given below.

Figure 1: Project structure of Lazy Loading

Model

Let's design Project entity. It contains properties, which are ID, Name, ManagerName and Email.

public class Project
{
public string ID { get; set; }
public string Name { get; set; }
public string ManagerName { get; set; }
public string Email { get; set; }
}

Now, it loads the data from the text file, which contains all the project related information. After getting the text file contents, it loops over line by line and creates new project object with the required properties.

public List<Project> GetProjectList()
{
string projectFile = HostingEnvironment.MapPath("~/App_Data/Projects.txt");
List<Project> tempList = new List<Project>();
foreach (string line in File.ReadAllLines(projectFile))
{
var parts = line.Split('|');
tempList.Add(new Project()
{
ID = parts[0],
Name = parts[1],
ManagerName= parts[2],
Email = parts[3]
});
}
return tempList;
}

Controller

It contains the actions given below.

Index()
It is the default action, when we browse home controller and it redirects to GetProject() action.
GetProjects()
This function checks whether it is simple AJAX request. If it is yes, it returns the data with Partial View, else it returns the data through ViewBag.
GetRecordsForPage()
It receives the page number as the parameter. It uses LINQ to get the required no of records data from DataSource.

public const int RecordsPerPage = 20;
public List<Project> ProjectData;
public HomeController()
{
ViewBag.RecordsPerPage = RecordsPerPage;
}
public ActionResult Index()
{
return RedirectToAction("GetProjects");
}
public ActionResult GetProjects(int? pageNum)
{
pageNum = pageNum ?? 0;
ViewBag.IsEndOfRecords = false;
if (Request.IsAjaxRequest())
{
var projects = GetRecordsForPage(pageNum.Value);
ViewBag.IsEndOfRecords = (projects.Any());
return PartialView("_ProjectData", projects);
}
else
{
var projectRep = new ProjectRepository();
ProjectData = projectRep.GetProjectList();
ViewBag.TotalNumberProjects = ProjectData.Count;
ViewBag.Projects = GetRecordsForPage(pageNum.Value);
return View("Index");
}
}
public List<Project> GetRecordsForPage(int pageNum)
{
var projectRep = new ProjectRepository();
ProjectData = projectRep.GetProjectList();
int from = (pageNum * RecordsPerPage);
var tempList = (from rec in ProjectData
select rec).Skip(from).Take(20).ToList<Project>();
return tempList;
}

Views

To define Views module, we will discuss about _Layout.cshtml, Index.cshtml and _Projectdata.cshtml.

_Layout.cshtml

It acts as a master page, which maintains consistent layout. In header section, it injects all common js and css files. In body section, it has RenderBody(), where child page content will render. This page reference is added in _ViewStart.cshtml page (Layout = "~/Views/Shared/_Layout.cshtml").

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
@RenderBody()
<hr />
<div id="loading">
<img src='~/Content/spin.gif' /><p style="color: red;"><b>Loading Next...</b></p>
</div>
<footer>
<p>Copyright© @DateTime.Now.Year </p>
</footer>
</div>
@RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml

This page acts as a child page and it stays in Views/Home/Index.cshtml directory. It defines HTML code to display the records and also injects the required JavaScript files.

@using LazyLoadInMVC.Models
@{
ViewBag.Title = "LazyLoading Demo";
}
<div class="jumbotron">
<h1>LazyLoading Demo</h1>
<p class="lead">
This page is demo how to load records on demand.
Instead of loading all <span class="text-primary">@ViewBag.TotalNumberProjects</span> records,
let's load based on user requirement.
Scroll down the page then you will see that records are added to page.
It loads @ViewBag.RecordsPerPage records at a time and total no of records is <span class="text-primary">@ViewBag.TotalNumberProjects</span>.
</p>
</div>
<table class="table table-striped table-bordered table-condensed infinite-scroll">
<thead>
<tr>
<th>ID #</th>
<th>Name</th>
<th>Manager>
<th>Manager Email</th>
</tr>
</thead>
<tbody>
@Html.Partial("_ProjectData", (ViewBag.Projects as List<Project>))
</tbody>
</table>
@section scripts{
<script src="~/Scripts/lazyLoading.js"></script>
<script type="text/javascript">
$(function () {
$("div#loading").hide();
});
var url = '@Url.RouteUrl("ProjectDataList")';
$(window).scroll(scrollHandler);
</script>
}

In the preceding code, it defines Url.RouteUrl(), which is defined in RouteConfig.cs file. Here, the code is given below.

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

_ProjectData.cshtml

This page is a Partial View, which defines the loop over and creates rows for the same. It will be used, when we send an AJAX request to the server and get the data with HTML format.

@model List<LazyLoadInMVC.Models.Project>
@foreach (var cust in Model)
{
<tr>
<td>@cust.ID</td>
<td>@cust.Name</td>
<td>@cust.ManagerName</td>
<td>@cust.Email</td>
</tr>
}

JavaScript

It's time to define JavaScript, which performs Lazy Loading. In the code snippet given below, scrollHandler() is a function, which calls when any scroll event occurs in the Browser. The function checks if the difference between document height and the window height is greater than document scrollTop(). If it is true, it sends an AJAX request by increasing the page number as a parameter. On success of AJAX, it appends the data to the table.

var page = 0,
inCallback = false,
isReachedScrollEnd = false;
var scrollHandler = function () {
if (isReachedScrollEnd == false &&
($(document).scrollTop() <= $(document).height() - $(window).height()))
{
loadProjectData(url);
}
}
function loadProjectData(loadMoreRowsUrl) {
if (page > -1 && !inCallback) {
inCallback = true;
page++;
$("div#loading").show();
$.ajax({
type: 'GET',
url: loadMoreRowsUrl,
data: "pageNum=" + page,
success: function (data, textstatus) {
if (data != '') {
$("table.infinite-scroll > tbody").append(data);
$("table.infinite-scroll > tbody > tr:even").addClass("alt-row-class");
$("table.infinite-scroll > tbody > tr:odd").removeClass("alt-row-class");
}
else {
page = -1;
}
inCallback = false;
$("div#loading").hide();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
}

Output

Once we are done with changes, let's browse the application. By default, it loads 20 records and when you scroll down, it loads the next 20 records with loading icon. See in Figure 1 the last project ID is 1019, Figure 2 it is 1039. Thus, you can know the data loads when scrolling down the page takes place.

Figure 2: Load records for first time

Figure 3: Load records for second time

Conclusion

Here, we discussed about lazy loading and how it is implemented and helpful. Lazy loading is a pattern to load the data on demand. It is useful when you have large amount of records and you need to display those. It loads the data step by step when the user scrolls down or needs it. By following this, you can deliver a better experience to your users, better performance, and also a more efficiently managed screen.

13 Comments

Join the conversation! Your thoughts help the community grow.

Varun Setia6y ago
This is very helpful :)
Manoj Kumar6y ago
This artical not working properly
- Manas Mohapatra6y ago
  I have attached project file "LazyLoading.zip". Please download and follow accordingly.
Casper Laustsen6y ago
I had a problem with scrollHandler not stopping. if (data != '') did not return false, but if ($.trim(data) != '') does.
Ismail Penekli7y ago
Hi guys, thats nice article Manas thanks. I suggest updating the code to run more efficiently like this;var scrollHandler = function () { if (isReachedScrollEnd == false && ($(document).height() - $(this).height() - 100 < $(this).scrollTop())) { loadProjectData(url); } } The above code tells when the user’s scroll bar is under 100 pixels from the bottom.
Muzafar Hasan7y ago
You are loading all of the data from datasource if we have millions of record it can become non-reponsive, your soultion is simple and working
- Manas Mohapatra6y ago
  The page will be heavy. We can put to put in browser cache for scrolling up. If you see Facebook, it loads lazily :)
Mrnams8y ago
Hello experts,I want to implement load more button for my website ,https://mrnams.com Can any one please give idea how to implement load more button to load more videos without refreshing (I mean without loosing loaded videos) page. Similar to YouTube functionality. I am using .net core 2.1 version
Kirubakara G8y ago
For every scroll server hit is happening. It must happen at the end of paging right?
madhubabu chinta8y ago
Can we use the lazyloading.js file in our project ? is it a open source ?
test engine9y ago
Sorry, I have added a height to 1000px to see the scroll bar it's working. .
test engine9y ago
I have downloaded the project and I have executed the application, Why is the scroll bar missing from the page ?
Fabio Silva Lima9y ago
Great article. Just for everyonr knows that solution works no just only with mvc... congratulations :)