Share

From this page you can share Continuous scrolling pattern using JavaScript and ASP.NET to a social bookmarking site or email a link to the page.
Social WebE-mail
Enter multiple addresses on separate lines or separate them with commas.
Continuous scrolling pattern using JavaScript and ASP.NET
(Your Name) has forwarded a page to you from Ajaxonomy
(Your Name) thought you would like to see this page from the Ajaxonomy web site.

Continuous scrolling pattern using JavaScript and ASP.NET

Tagged:  

You have probably seen some of the search engines where you can keep scrolling through your search results and they load as you scroll without clicking a next button. Well if you have been looking for a good example the Janko at Warp Speed blog has put together a good example using .Net and JavaScript.

Below is an excerpt from the post.

Implementation

continuous scrollingTypically, user is notified that new content is being loaded by showing indicator in the bottom right angle of a content (as you can see on the screenshot on the left).

Generally, it looks like this: Initial content is loaded on the start. When user scrolls down to the end of the content, JavaScript function calls local WebService and a set of new items is sent back to the client.

Let's make an example. Since I use Google Reader every day, let's make something that looks like it. Ok, I admit, I stole colors for this example :)

This is going to be very simple. I have a list of countries stored in SQL database. Each country has ID, Name and number of Internet users. I would like to show the complete list in a div, and to enable continuous scrolling. Image on the left shows our example.

So, I will define CountryWS that will get the data from the database. This is the first catch and might be tricky. Since new data have to be loaded on request (precisely on scroll) I have to do paging in the database. I do that by sending two parameters to my stored procedure: PageIndex and PageSize. PageIndex will tell my stored procedure which page to query, and PageSize - how many items to retrieve.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class CountryWS : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod]
    public List<Country> GetMoreCountries(int pageIndex, int pageSize)
    {
        System.Threading.Thread.Sleep(1000);

        SampleDAO sampleDAO = new SampleDAO();
        List<Country> countries = sampleDAO.GetCountriesPaged(pageIndex, pageSize);
        return countries;
    } 
}

That is "the server" part. Let's see what will happen on the client. All items will be rendered in a div that has onscroll handler defined.

<div id="content" runat="server" onscroll="OnDivScroll()">
    <%--Items will be rendered here--%>
</div>

OnDivScroll function will do a simple job - it will determine if the user scrolled down to the near bottom of the content. Then it will call CountryWS and pass the result to HandleRetrievedData function.

function OnDivScroll()

    var content = document.getElementById('<%=content.ClientID %>');
    if(content.scrollTop < content.scrollHeight - 500)
        return;

    CountryWS.GetMoreCountriesObject(pageIndex, pageSize, HandleRetrievedData );
}

This is a second catch. Why near? The answer is simple - if you want your user to read smoothly, you'll have to load a new content BEFORE he/she reaches the end of the content. Ok?

And for the end, HandleRetrievedData function will parse the result and render new content.

function HandleRetrievedData(result)
{
    var content = document.getElementById('<%=content.ClientID %>');

    for (var i = 0; i <= result.length - 1; i++)
    {
        content.innerHTML += "<div class='entry'><b>" +
            result[i].CountryName + "</b> (" + result[i].Symbol + ") - " +
            result[i].InternetUsers + " internet user(s)</div>";
    }
}

You will notice that sample code is more complex than this example, but I will let you sweat a little bit ;)

You can read the full post here.