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 !!!