Hello,
This is my first experience with C# Web Service & AJAX ... I would like to build a page like Facebook that will load the next set of records when we scroll down ...
I'm trying to use the code but it's not working at all ... Can you help me ?
Thank you
Paul
HTML Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="auto-load.aspx.cs" Inherits="auto_load" %>
<!DOCTYPE html>
<html>
<head>
<title>AEM - Comments</title>
<link href="Style.css" rel="Stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script>
var isLoading = false;
var v_page_number = 1, v_page_size = 5;
$(document).ready(function ()
{
loadComments();
$(window).scroll(function ()
{
// Start loading when 200px from the bottom
if ($(window).scrollTop() + $(window).height() > $('#main').height() - 200 && !isLoading)
{
loadComments();
}
});
});
function loadComments()
{
isLoading = true;
$.ajax(
{
type: 'POST',
url: "auto-load.aspx/GetComment",
data: '{ "p_page_number" : ' + v_page_number + ', "p_page_size" : ' + v_page_size + ' }',
//contentType: "application/json; charset=utf-8",
dataType: "xml",
success: OnSuccess,
error: OnError
});
}
//
function OnSuccess(data)
{
ShowXMLData(data);
}
//
function OnError(p_error)
{
if (p_error.status != 200)
{
$("#loading").html('Error:' + p_error.responseText + '<br /><br /><br /> Status: ' + p_error.status);
//alert('Error:' + err.responseText + ' Status: ' + err.status);
}
}
function ShowXMLData(xml)
{
debugger;
try
{
var v_comment = $(xml).find('Table');
for (var i = 0; i < v_comment.length; i++)
{
var v_time_log_id = v_comment[i]["time_log_id"];
var v_description = v_comment[i]["description"];
var v_hours = v_comment[i]["hours"];
//
var v_comment = $('<div>');
var v_h2_description = $('<h2>');
var v_span_hours = $('<span>');
v_h2_description.html(v_description + ' / Id = ' + v_time_log_id + '</h2>');
v_span_hours.html('Number of hours: ' + v_hours + '</span>');
v_comment.append(v_h2_description);
v_comment.append(v_span_hours);
v_comment.append('</div>');
$('#feed').append(v_comment);
});
}
catch(err)
{
var txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.description + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<form id="frmMain" runat="server">
<div id="main">
<h1>AEM - Comments</h1>
<p>Showing Comments for AEM</p>
<div id="feed">
</div>
<div id="loading">
Loading Comments...
</div>
</div>
</form>
</body>
C# Code
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using LibAEM;
using System.Data.SqlClient;
using System.Web.Services;
public partial class auto_load : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public string GetComment(int p_page_number, int p_page_size)
{
// ------------------------------------------------------------------------------------------
// Variable declaration
// ------------------------------------------------------------------------------------------
string v_connection_string = LibNamtek.CConnection.GetDBConnection(); // Data Source=192.168.2.40;Initial Catalog=AEM;User ID=aem;Password=aem
SqlConnection v_connection = new SqlConnection(v_connection_string);
try
{
// ------------------------------------------------------------------------------------------
// Main program
// ------------------------------------------------------------------------------------------
// Open Connection
v_connection.Open();
SqlCommand cmd = new SqlCommand("pr_get_paging", v_connection);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("@p_page_number", SqlDbType.Int);
cmd.Parameters["@p_page_number"].Value = p_page_number;
cmd.Parameters.Add("@p_page_size", SqlDbType.Int);
cmd.Parameters["@p_page_size"].Value = p_page_size;
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet("TimeLog");
da.Fill(ds);
string v1 = ds.GetXml();
return v1;
}
catch (Exception ex)
{
throw ex;
}
finally
{
if (v_connection != null)
{
v_connection.Close();
}
}
}
}
Here's the content of XML result
<?xml version="1.0" standalone="yes"?>
<TimeLog>
<Table>
<time_log_id>1</time_log_id>
<description>Analysis for C# Project</description>
<hours>7</hours>
<minutes>0</minutes>
</Table>
<Table>
<time_log_id>2</time_log_id>
<description>Create Database Structure</description>
<hours>4</hours>
<minutes>10</minutes>
</Table>
<Table>
<time_log_id>4</time_log_id>
<description>Create SP to get list of Contacts & Employees</description>
<hours>3</hours>
<minutes>20</minutes>
</Table>
<Table>
<time_log_id>5</time_log_id>
<description>Create Web UI with ASP.Net</description>
<hours>2</hours>
<minutes>30</minutes>
</Table>
<Table>
<time_log_id>6</time_log_id>
<description>Test the program</description>
<hours>1</hours>
<minutes>15</minutes>
</Table>
</TimeLog>