Click here to Skip to main content
14,975,931 members
Articles / Web Development / ASP.NET
Posted 30 Nov 2011


25 bookmarked

Unlimited Scroll in ASP.NET DataList Control

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
10 Feb 2014CPOL2 min read
Unlimited scroll like Facebook news feed or Twitter tweets
A Technical Blog article. View entire blog here.

Unlimited scroll is not a big deal, for example Facebook news feed or twitter tweets, the news or tweets updates when user reaches bottom of the page. Actually client side script checks the scroll position of the container, if the position is at the bottom, the scripts request content form server and update the container. In here, the container is a DIV tag, named holder, and puts some style tag height, width and overflow.holder held in the DataList.

CSS for the Holder

<style type="text/css">
    #holder {width: 1900px; height:200px;overflow:auto;  }

Here I used Northwind database Products Table to demonstrate the unlimited scroll in this article and used a Handler page, First time page loads with 10 records in DataList, take a look below:

if (!IsPostBack)
    DataClass data = new DataClass();
    DataList1.DataSource = data.FirstTenRecords();

And on the client side, I set the current item count to 10 and next item count to 0.

var current=10;
var next=0;

and call the function for load next form JavaScript, it’s nothing but calling server via AJAX, i.e., requesting Handler page with a query string of start and next. The below  image shows the request URL form client, I used Firebug to show requests.

Let's look at loadNext:

var loadNext = function () {
           next = current + 10;
               url: "Handler.ashx?start=" + current + "&next=" + next,
               success: function (data) {
           current = current + 10;

Before calling the Handler page set next, after setting current to current+10.

next = current + 10;
current = current + 10;

To get the data from a specific row number, I used a stored procedure, it will return my data, I want to send number of position, if I send start=10&next=20, it will return 10th to 20th row from the database.

USE [Northwind]
/****** Object:  StoredProcedure [dbo].[ProductPages]    
	Script Date: 11/28/2011 12:03:17 ******/
ALTER PROCEDURE [dbo].[ProductPages]
 @start int,
 @next int
SELECT ProductID,ProductName,UnitPrice FROM
   SELECT ROW_NUMBER() OVER(ORDER BY ProductID,ProductName,UnitPrice) NUM,
   * FROM Products
) A 
WHERE NUM >@start AND NUM <=@next

Now let's take a look at how it works. Everything works depending on holders scroll function. Script checks the scroll position of the container is bottom or not, if it is at the bottom, function call loadNext().

$(document).ready(function () {
           $("#holder").scroll(function () {
               if ($(this)[0].scrollHeight -
           $(this).scrollTop() == $(this).outerHeight()) {

Handler page is nothing, like an aspx page. It calls a class file DataClass, DataClass is simple class file to reduce bulky code in Handler page. It call the DataLayer and returns the data from database, after doing some formatting to fill on the DataList and writes it on response.

public void ProcessRequest(HttpContext context)
        string startQstring = context.Request.QueryString["start"];
        string nextQstring = context.Request.QueryString["next"];
        //null check
        if ((!string.IsNullOrWhiteSpace(startQstring)) && 
            //convert string to int
            int start = Convert.ToInt32(startQstring);
            int next = Convert.ToInt32(nextQstring);
            //setting content type
            context.Response.ContentType = "text/plain";
            DataClass data = new DataClass();
            //writing response
            context.Response.Write(data.GetAjaxContent(start, next));

There is only one class file. But I put the class on that file.

  1. DataClass
    • Contain two functions on handler page we are calling first function GetAjaxContent(start,end) it returns the records from database 
    • 2nd function loads data on Page_Load even
  2. Provide
    • Provides SqlConnection from web.config
  3. DBHelper
    • Data layer takes a look
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

/// <summary>
/// Summary description for DataClass
/// </summary>
public class DataClass
    public DataClass()
    /// <summary>    
    ///  return rows depend on position
    ///  if you need 10th to 20th you need to pass start=10 and end=20
    /// </summary>
    /// <returns>
    /// database start position of one row
    /// database end position of one row
    /// </returns>
    public string GetAjaxContent(int start, int end)
        string result = string.Empty;
        //adding sp params with values in Dictionary entry.
        Dictionary<string,> keyValPair = new Dictionary<string,object>();
        keyValPair.Add("@start", start);
        keyValPair.Add("@next", end);

        DBHelper DBHelper = new DBHelper();
        //passing the Stored Procedure name and keyvalue pair
        DataTable dataTable = DBHelper.GetTable("ProductPages", keyValPair);
        if (dataTable.Rows.Count > 0)
            for (int i = 0; i < dataTable.Rows.Count; i++)
                result += string.Format(@"<table>
		<td style="width: 50px; ">{0}</td>
		<td style="width: 400px; ">{1}</td>
		<td style="width: 150px; ">{2}</td>
</table>", dataTable.Rows[i][0].ToString(), dataTable.Rows[i][1].ToString(), 
        //this string is going to append on Datalist on client.
        return result;
    /// <summary>
    /// function to bind data on page load
    /// </summary>
    /// <returns />
    public DataTable FirstTenRecords()
        Dictionary<string,object> keyValPair = new Dictionary<string,object>();
        keyValPair.Add("@start", 0);
        keyValPair.Add("@next", 10);

        DBHelper DBHelper = new DBHelper();
        DataTable dataTable = DBHelper.GetTable("ProductPages", keyValPair);
        return dataTable;

/// <summary>
/// return sqlconnection string from web.config file
/// </summary>
public class Provider
    public static SqlConnection GetConnection()
        return new SqlConnection(ConfigurationManager.AppSettings["SqlConnectionString"]);
/// <summary>
/// Data layer
/// </summary>
public class DBHelper
    public DBHelper()
    { }

    SqlConnection con;
    SqlCommand cmd;
    SqlDataAdapter adapter;
    public DataTable GetTable(string SPName, Dictionary<string,object> SPParamWithValues)
        DataTable dataTable = new DataTable();
            con = Provider.GetConnection();
            //open DB connection
            cmd = new SqlCommand();
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Connection = con;
            cmd.CommandText = SPName;
            foreach (KeyValuePair<string,object> paramValue in SPParamWithValues)
                cmd.Parameters.AddWithValue(paramValue.Key, paramValue.Value);
            adapter = new SqlDataAdapter(cmd);
            //close connection string
        return dataTable;

Download source


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

raju melveetilpurayil
Software Developer (Senior)
United Kingdom United Kingdom
Microsoft Certified Professional Developer.

Comments and Discussions

SuggestionUse StringBuilder to concatenate result instead string Pin
Manish Ray14-Feb-14 2:49
MemberManish Ray14-Feb-14 2:49 
QuestionSome Problem Pin
jitendra1_4-Feb-14 0:34
Memberjitendra1_4-Feb-14 0:34 
AnswerRe: Some Problem Pin
raju melveetilpurayil8-Feb-14 15:41
professionalraju melveetilpurayil8-Feb-14 15:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.