In this article I will explain with an example, how to Infinite / Endless / Continuous Scroll technique in WebGrid using jQuery AJAX and JSON in ASP.Net MVC Razor.
In Infinite / Endless / Continuous Scroll technique, the WebGrid has Header Row as Fixed (Freezed) and the Data Rows have a Scrollbar.
The records from Database are loaded in WebGrid Page Wise as the data is scrolled using jQuery AJAX, JSON and Entity Framework in ASP.Net MVC Razor.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
 
 
Creating an Entity Data Model
The very first step is to create an ASP.Net MVC Application and connect it to the Northwind Database using Entity Framework. For more details please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example.
Following is the Entity Data Model of the Customers Table of the Northwind Database which will be used later in this project.
Implement Endless (Infinite) Scroll in WebGrid using jQuery AJAX in ASP.Net MVC
 
 

Model
The following Model class named CustomerModel consists of four properties.
1. Customers – List collection of the Customer Entity Data Model which will hold the records of the Customers.
2. PageIndex – Holds the value of the index of the Current Page.
3. PageSize – Holds the value of number of rows to be displayed per page.
4. RecordCount – Holds the value of the Total Records present in the Table.
public class CustomerModel
{
    public List<Customer> Customers { get; set; }
    public int PageIndex { get; set; }
    public int PageSize { get; set; }
    public int RecordCount { get; set; }
}
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, a dummy Customer record i.e. a record with Blank data is sent.
This is done in order to populate WebGrid with a Blank row and this Blank row will be used by jQuery AJAX to clone and populate more rows in the WebGrid.
 
Action method for handling jQuery AJAX operation
This Action method handles the call made from the jQuery AJAX function from the View.
Note: The following Action method handles AJAX calls and hence the return type is set to JsonResult.
 
First an object of the CustomerModel class is created and then the records are fetched from the Customers table using Entity Framework and are assigned to the Customers property of the CustomerModel object.
The Paging is performed on the records using the Skip and Take functions.
The Skip function accepts the Start Index from the set of records to fetched i.e. if Page Index is 1 then the Start Index will be (1 - 1) * 10 = 0.
Example: If Current Page Index is 1 and the Maximum Rows is 10 then the Start Index will be (1 - 1) * 10 = 0.
 
The Take function will fetch the rows based on the value of the PageSize property.
Finally the CustomerModel object is returned to the View as JSON object.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<Customer> dummy = new List<Customer>();
        dummy.Add(new Customer());
        return View(dummy);
    }
 
    [HttpPost]
    public JsonResult AjaxMethod(int pageIndex)
    {
        NorthwindEntities entities = new NorthwindEntities();
        CustomerModel model = new CustomerModel();
        model.PageIndex = pageIndex;
        model.PageSize = 10;
        model.RecordCount = entities.Customers.Count();
        int startIndex = (pageIndex - 1) * model.PageSize;
        model.Customers = (from customer in entities.Customers
                           select customer)
                        .OrderBy(customer => customer.CustomerID)
                        .Skip(startIndex)
                        .Take(model.PageSize).ToList();
        return Json(model);
    }
}
 
 
View
Inside the View, in the very first line the Customer Entity is declared as IEnumerable which specifies that the Model will be available as a Collection.
The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer Entity class objects as source.
Note: For more information on usage of WebGrid, please refer WebGrid Step By Step Tutorial with example in ASP.Net MVC.
 
Freezing the WebGrid Header
In order to freeze the WebGrid Header section, run the Project with the dummy value and then do View Source of the Page and COPY the HTML Table and its THEAD section as shown below.
Implement Endless (Infinite) Scroll in WebGrid using jQuery AJAX in ASP.Net MVC
 
Now in Visual Studio, PASTE the copied Header section of WebGrid Table and also wrap the WebGrid inside an HTML DIV with fixed Height and Width and Overflow CSS property set to auto.
Implement Endless (Infinite) Scroll in WebGrid using jQuery AJAX in ASP.Net MVC
 
Note: The Width of the HTML DIV has to be set according to the Best Fit width of your WebGrid.

The WebGrid will be populated with data from SQL Server database using jQuery AJAX and JSON.
The GetCustomers JavaScript function is called inside the jQuery document ready event handler and also in the Scroll event handler of the HTML DIV enclosing the WebGrid.
Inside the GetCustomers JavaScript function, the value of the Page Index is sent to the Controller’s Action method using a jQuery AJAX call.
The Controller’s Action method returns a JSON object of the CustomerModel class which contains the List of Customers, the current Page Index, the Page Size and the total Record Count.
The Page Index value is stored in a variable and as the User scrolls the HTML DIV, the Page Index is incremented and records are fetched from the database as per the new Page Index using Entity Framework and the fetched records are appended to the WebGrid.
@model IEnumerable<Customer>
 
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canSort: false, canPage: false);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .Grid
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
 
        .Grid th
        {
            background-color: #F7F7F7;
            font-weight: bold;
        }
 
        .Grid th, .Grid td
        {
            padding: 5px;
            border: 1px solid #ccc;
            width: 120px;
        }
 
        .Grid, .Grid table td
        {
            border: 0px solid #ccc;
        }
    </style>
</head>
<body>
    <table class="Grid">
        <thead>
            <tr>
                <th scope="col">Customer Id</th>
                <th scope="col">Customer Name</th>
                <th scope="col">City</th>
                <th scope="col">Country</th>
            </tr>
        </thead>
    </table>
    <div id="dvGrid" style="height: 250px; overflow: auto; width: 542px">
        @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
        columns: webGrid.Columns(
                 webGrid.Column("CustomerID", "Customer Id"),
                 webGrid.Column("ContactName", "Customer Name"),
                 webGrid.Column("City", "City"),
                 webGrid.Column("Country", "Country")))
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var pageIndex = 0;
        var pageCount;
        var isCompleted;
        $(function () {
            //Remove the original WebGrid header.
            $("#WebGrid tr").eq(0).remove();
            GetCustomers();
        });
        //Load GridView Rows when DIV is scrolled.
        $("#dvGrid").on("scroll", function (e) {
            var $o = $(e.currentTarget);
            if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
                if (isCompleted) {
                    isCompleted = false;
                    GetCustomers();
                }
            }
        });
        function GetCustomers() {
            pageIndex++;
            if (pageIndex == 1 || pageIndex <= pageCount) {
                //Show Loader GIF Image.
                if ($("#WebGrid .loader").length == 0) {
                    var row = $("#WebGrid tr").eq(0).clone(true);
                    row.addClass("loader");
                    row.children().remove();
                    row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="/Images/Loader.gif" /></td>');
                    $("#WebGrid").append(row);
                }
                $.ajax({
                    type: "POST",
                    url: "/Home/AjaxMethod",
                    data: '{pageIndex: ' + pageIndex + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            }
        };
        function OnSuccess(response) {
            var model = response;
            pageCount = Math.ceil(parseFloat(model.RecordCount) / parseFloat(model.PageSize));
            $("#WebGrid .loader").remove();
            var row = $("#WebGrid tbody tr:last-child");
 
            //Remove the dummy row.
            if (row.find("td:empty").length > 0) {
               row.remove();
            }
            row = row.clone();
 
            $.each(model.Customers, function () {
                var customer = this;
                $("td", row).eq(0).html(customer.CustomerID);
                $("td", row).eq(1).html(customer.ContactName);
                $("td", row).eq(2).html(customer.City);
                $("td", row).eq(3).html(customer.Country);
                $("#WebGrid tbody").append(row);
                row = $("#WebGrid tbody tr:last-child").clone(true);
            });
            isCompleted = true;
        };
    </script>
</body>
</html>
 
 
Screenshot
Implement Endless (Infinite) Scroll in WebGrid using jQuery AJAX in ASP.Net MVC
 
 
Downloads