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
Typically, 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 ;)
Delicious
Digg
StumbleUpon
Propeller
Reddit
Magnoliacom
Newsvine
Furl
Facebook
Google
Yahoo
Technorati
Icerocket
Recent comments
10 hours 40 min ago
10 hours 40 min ago
4 days 7 hours ago
5 days 2 hours ago
5 days 4 hours ago
1 week 3 days ago
1 week 3 days ago
1 week 3 days ago
1 week 4 days ago
1 week 4 days ago