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.