这是我对 C# Web 服务和 AJAX 的第一次体验……我想构建一个像 Facebook 这样的页面,当我们向下滚动时它会加载下一组记录……
我正在尝试使用该代码,但它根本不起作用......你能帮帮我吗?
HTML 代码
<%@ 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# 代码
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();
}
}
}
}