Infinity Scrolling

Posted by A IT Devotee on Friday, August 21, 2009

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="InfiniteScroll.aspx.cs" Inherits="Common_UserControls_Lab_InfiniteScroll" %>

<!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>Untitled Page</title>

<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
var pageIndex = 1; // page number (if set to -1 no additional calls will be made)
var pageSize = 10; // number of records to display per page
var count = 20; // total counter

// function OnDivScroll() {
$('#content').scroll(function() {
// if there is more to show

if (pageIndex != -1) {
// get content
var content = document.getElementById('<%=content.ClientID %>');

if (content.scrollTop < content.scrollHeight - 500)
return;

// leave this method if loading is in progress
var indicator = document.getElementById('indicator');
if (indicator.style.display == '')
return;
// Get data for next page
pageIndex += 1;
indicator.style.display = '';
// CountryWS.GetMoreCountriesObject(pageIndex, pageSize, HandleRetrievedData);
var abdd = '';


debugger;
alert('going to ajax');
$.ajax({
type: "POST",
data:"{}",
url: "http://localhost/OnActionC/Common/UserControls/Lab/InfiniteScroll.aspx/a",
// data: "pageIndex=" + pageIndex + "&pageSize=" + pageSize,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
//$("#ya").attr("value", msg.d);

}
});

}
});
});




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

// Parse if web service returned data, otherwise stop calling it
if (result.length > 0) {
// calculate and show total number of items
count += result.length;
document.getElementById('divCount').innerHTML = count + " countries loaded."

// iterate through result set and create a div for each item
for (var i = 0; i <= result.length - 1; i++) {
indicator.style.display = 'none';
content.innerHTML += "<div class='entry'><b>" +
result[i].CountryName + "</b> (" + result[i].Symbol + ") - " +
result[i].InternetUsers + " internet user(s)</div>";
}
}
else {
pageIndex = -1;
document.getElementById('divCount').innerHTML += " All items has been loaded.";
indicator.style.display = 'none';
}
}

</script>

</head>
<body>
<form id="form1" runat="server">
<%--<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/CountryWS.asmx" />
</Services>
</asp:ScriptManager>--%>
<div>
<div class="header">
<b>List of countries having more than a million internet users</b></div>
<div class="container">
<div id="content" runat="server" >
<%--Items will be rendered here--%>
</div>
<div id="indicator" style="display: none;">
Loading more items...
</div>
</div>
<div id="divCount">
20 countries loaded.
</div>
</div>
</form>
</body>
</html>



using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;

public partial class Common_UserControls_Lab_InfiniteScroll : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
CountryClass a = new CountryClass();
this.GetAllCountryDetails(1, 20);

//string newItems = "";
//for (int i = 0; i < countries.Count; i++)
//{
// newItems += "

" + countries[i].CAPITAL + " (" + countries[i].COUNTRY1+ ") - " + countries[i].CURRENCY + "
";
//}
//content.InnerHtml = newItems;




}

[System.Web.Services.WebMethod]
public static void a()
{
}
// [System.Web.Services.WebMethod]
public void GetAllCountryDetails(int PageIndex, int PageSize)
{
GeneralDataContext db = new GeneralDataContext();

var objCountry = from p in db.Countries// orderby p.COUNTRY1
select p;// select new { p.ID, p.CAPITAL, p.COUNTRY1, p.CURRENCY, p.ISO2, p.ISO3, p.POPULATION, p.REGIONS, p.TLD };
objCountry = objCountry.Skip((PageIndex - 1) * PageSize).Take(PageSize);
// List objCountryList = new List();
List countries= objCountry.ToList();

string newItems = "";
for (int i = 0; i < countries.Count; i++)
{
newItems += "
" + countries[i].CAPITAL + " (" + countries[i].COUNTRY1 + ") - " + countries[i].CURRENCY + "
";
}
content.InnerHtml = newItems;


}
}

This entry was posted on Friday, August 21, 2009 at 2:06 PM. You can follow any responses to this entry through the RSS 2.0. You can