What the heck is a continuous list anyway? Honestly, I don't know if I should be using this name or not, but probably this is what it looks like. Without further ado, let's see what I am referring to...
Visit www.dzone.com - Notice that whenever you tend to reach the bottom of the page, there are some more items listed for you. The list seems almost endless, and I like this interface a lot, simply because it doesn't ask me to go to page N.
In this post, we will use the following to create a similar experience...
1. Java Script
2. ASP.NET Ajax
3. ASP.NET Web Service
4. Visual Studio 2008
I won't be focusing on making the things look pretty simply because of the lack of time (and you can say, I am bit graphically challenged as well 
). Here is all that you need to do...
Create a new WebSite in Visual Studio 2008
Copy and paste the following code in default.aspx (in source view)...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script language="javascript">
//Creating a variable so that we could maintain how many items are already loaded in the Div
var num = 0;
function OnDivScroll() {
//Get the container
var container = document.getElementById('container');
//When you scroll, you need to show the "Loading..." div when
//you are about to reach the end of the list
if (container.scrollTop < container.scrollHeight - 300)
return;
var loading = document.getElementById('loading');
//Check if it is already loading!
if (loading.style.display == '')
return;
//Make it visible if not already
loading.style.display = '';
LoadNextTenItems();
}
function LoadNextTenItems() {
//ReturnAList is visible to Javascript section because we have
//added a WebService with an appropriate attribute
//Parameter 1 = num --- To maintain a list of items added
//Parameter 2 = LoadItems ------ Method that will be called once this asynchronous call completes
//Parameter 3 = ErrorMessage --- Method that will be called in case there is any error
//Parameter 3 = TimeOutError --- Method that will be called in case the webservice times out
ReturnAList.ReturnAListOfStrings(num, LoadItems, ErrorMessage, TimeOutError);
num += 10;
}
function LoadItems(result) {
var container = document.getElementById("container");
container.innerHTML += result.toString();
var loading = document.getElementById('loading');
loading.style.display = 'none';
}
function ErrorMessage() {
var loading = document.getElementById('loading');
loading.style.display = 'none';
}
function TimeOutError() {
var loading = document.getElementById('loading');
loading.style.display = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="overflow:scroll; width:300px; height:200px; top:100px; left:300px" onscroll="OnDivScroll();" id="container">
Line number:1<br />
Line number:2<br />
Line number:3<br />
Line number:4<br />
Line number:5<br />
Line number:6<br />
Line number:7<br />
Line number:8<br />
Line number:9<br />
Line number:10<br />
Line number:12<br />
Line number:13<br />
Line number:14<br />
Line number:15<br />
Line number:16<br />
Line number:17<br />
Line number:18<br />
Line number:19<br />
Line number:20<br />
<!-- This section can be added if you drag and drop a ScriptManager.
You need to add all the ServiceReference and their Path in the Services section -->
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="ReturnAList.asmx" />
</Services>
</asp:ScriptManager>
</div>
<div id="loading" style="position:absolute;top:180px;left:230px;display:none;background-color:Red;color:Yellow;">
Loading...
</div>
</form>
</body>
</html>
Right-click on the Project in Project Explorer, and click Add New Item
Select WebService and in the Name textbox, name it ReturnAList.asmx
In ReturnAList.cs file copy/paste the following...
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
/// <summary>
/// Summary description for ReturnAList
/// </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 ReturnAList : System.Web.Services.WebService
{
[WebMethod]
public string ReturnAListOfStrings(int number)
{
string s = string.Empty;
for (int i = 0; i < 10; i++)
{
//Induce some delay to show actual work. YOU MUST REMOVE THIS LINE in a real application :-)
System.Threading.Thread.Sleep(50);
s += "Items from Webservice #" + number++ + "<BR />";
}
return s;
}
}
That's all. Now right click on default.aspx and select View In Browser
You should be able to see something like the following...
Now scroll down, and as soon as you are about to reach the bottom, the web service will be called from Javascript and the result will be displayed somewhat like this...
Hope this helps,
Rahul
Quote of the day: Committee--a group of men who individually can do nothing but as a group decide that nothing can be done. - Fred Allen
Subscribe