Lazy Loading in mvc

lazyloading is a why to load records on demand. when user scroll the page to view more records the system will display more records.
Steps.. 

1. Create asp.net website in visual studio
2. create a stored procedure for record loading
3. add webservice to your website to load records via jquery(AjAX)
4. add page to your website for record displaying.

Let's look at all these steps with coding .

Create stored procedure like the following 

create proc [dbo].[SelectEmployee_lazyLoading]
@pageNo int,
@pageSize int
as
declare @fromSr int
declare @toSr int
if(@pageNo=1)
begin
 set @fromSr=@pageNo
 set @toSr=@pageNo*@pageSize
end else 
begin
 set @fromSr=(@pageNo-1)*@pageSize+1
 set @toSr=@pageNo*@pageSize
end

;with tbl as (
SELECT    row_number() over(order by EmployeeID) as srno, EmployeeID, EmpName,Address
from Employee
) 
select  * from tbl where srno>=@fromSr and srno<=@toSr

Add webservice(.asmx) to your website. like the following 

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;

/// <summary>
/// Summary description for MyService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
public class MyService : System.Web.Services.WebService {

    public MyService () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }
   
    [WebMethod]
  
    [System.Web.Script.Services.ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public  Employee[] GetEmployees(int pageNo, int pageSize)
    {

        SqlConnection con = new SqlConnection("Data Source=(local);Integrated Security=SSPI;Initial Catalog=Accounting");
        SqlCommand cmd = new SqlCommand("SelectEmployee_lazyLoading", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@pageNo", pageNo);
        cmd.Parameters.AddWithValue("@pageSize", pageSize);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);
        List<Employee> emplst = new List<Employee>();
        foreach (DataRow row in dt.Rows)
        {
            emplst.Add(new Employee() { EmployeeID = row["EmployeeID"].ToString(), Address = row["Address"].ToString(), Name = row["EmpName"].ToString() });
        }
        return emplst.ToArray();
    }
}
public class Employee
{
    public string EmployeeID { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
}

Add page to your website (lazyloading.aspx) should like the following

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="LazyLoading.aspx.cs" Inherits="LazyLoading" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <script src="Scripts/Loading.js"></script>
     <script>
        
         var pagesize = 15;
         var pageNo = 1;
        
         function loadEmployees() {            
            
             $.ajax({
                 url: "MyService.asmx/GetEmployees",
                 type: "POST",
                 data: "{pageNo:'" + pageNo + "',pageSize:'" + pagesize + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (data) {
                   
                         $.each(data.d, function (i, x) {
                             var tr = '<tr>';
                             tr += "<td>" + x.EmployeeID + "</td>";
                             tr += "<td>" + x.Name + "</td>";
                             tr += "<td>" + x.Address + "</td>";
                             tr += '</tr>';
                             $('#emps tbody').append(tr);
                         }
                         );
                     
                 },
                 failure: function () { }
             });
         }
       
         $(function () {
             loadEmployees();
             $(window).scroll(function () {
                 if ($(window).scrollTop() ==
                    $(document).height() - $(window).height()) {
                     pagesize = 15;
                     pageNo++;
                     loadEmployees();
                 }
             });
         });
</script>
    <h3>Lazyloading....</h3>
    <hr />
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title"><i class="glyphicon glyphicon-user"></i>  Employees List:  Scroll down to load more</div>
        </div>
        <div class="panel-body">
              <table id="emps" class="table table-stripped">
          <thead>
               <tr>
           
            <th>EmployeeID</th>
            <th>Name</th>
            <th>Address</th>
         
        </tr>
          </thead>
       
        <tbody>

        </tbody>
    </table>
        </div>
    </div>
    
</asp:Content>

Code for Loading.js

function ajaxindicatorstart(text) {
    if (jQuery('body').find('#resultLoading').attr('id') != 'resultLoading') {
        jQuery('body').append('<div id="resultLoading" style="display:none"><div><img src="../images/loading-spinner-grey.gif"><div>' + text + '</div></div><div class="bg"></div></div>');
    }

    jQuery('#resultLoading').css({
        'width': '100%',
        'height': '100%',
        'position': 'fixed',
        'z-index': '10000000',
        'top': '0',
        'left': '0',
        'right': '0',
        'bottom': '0',
        'margin': 'auto'
    });

    jQuery('#resultLoading .bg').css({
        'background': '#000000',
        'opacity': '0.20',
        'width': '100%',
        'height': '100%',
        'position': 'absolute',
        'top': '0'
    });

    jQuery('#resultLoading>div:first').css({
        'width': '250px',
        'height': '75px',
        'text-align': 'center',
        'position': 'fixed',
        'top': '0',
        'left': '0',
        'right': '0',
        'bottom': '0',
        'margin': 'auto',
        'font-size': '16px',
        'z-index': '10',
        'color': '#ffffff'

    });

    jQuery('#resultLoading .bg').height('100%');
    jQuery('#resultLoading').fadeIn(300);
    jQuery('body').css('cursor', 'wait');
}
function ajaxindicatorstop() {
    jQuery('#resultLoading .bg').height('100%');
    jQuery('#resultLoading').fadeOut(300);
    jQuery('body').css('cursor', 'default');
}
jQuery(document).ajaxStart(function () {
    //show ajax indicator
    ajaxindicatorstart('loading data.. please wait..');
}).ajaxStop(function () {
    //hide ajax indicator
    ajaxindicatorstop();
});

Here is the result .  scroll to load records