jQuery+.net实现浏览更多内容（改编php版本）

改编自php版本，原文：
jQuery+PHP实现浏览更多内容http://www.helloweba.com/view-blog-130.html
这里记录.net 下的实现
一、首先创建数据库表test，并插入一些测试数据：
复制代码代码如下:
go
if exists （select * from sysobjects where name="test"）
drop table [test]
go
CREATE TABLE [test]（
[id] [int] IDENTITY（1,1）,
[author] [varchar]（50）,
[content] [varchar]（2000）,
[createOn] [datetime]
）
declare @index int;
set @index = 1;
while（@index < 1000）
begin
insert into test（[author],[content],[createOn]）
values
（"author" + cast（@index as varchar（4））,"content" + cast（@index as varchar（4））,DATEADD（DAY,@index,getdate（）））
set @index = @index + 1
end
go

二、建立一个html文件
复制代码代码如下:
<！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>
<title></title>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.more.js" type="text/javascript"></script>
<script type="text/javascript">
$（function （） {
$（"#more"）.more（{ "address": "ajax/data.ashx" }） //这里为向后台请求地址
}）;
</script>
<style type="text/css">
more
{
margin: 10px auto;
width: 560px;
border: 1px solid #999;
}
.single_item
{
padding: 20px;
border-bottom: 1px dotted #d3d3d3;
}
.author
{
position: absolute;
left: 0px;
font-weight: bold;
color: #39f;
}
.createOn
{
position: absolute;
right: 0px;
color: #999;
}
.content
{
line-height: 20px;
word-break: break-all;
}
.element_head
{
width: 100%;
position: relative;
height: 20px;
}
.get_more
{
margin: 10px;
text-align: center;
}
.more_loader_spinner
{
width: 20px;
height: 20px;
margin: 10px auto;
background: url（loader.gif） no-repeat;
}
</style>
</head>
<body>
<div id="more">
<div class="single_item">
<div class="element_head">
<div class="createOn">
</div>
<div class="author">
</div>
</div>
<div class="content">
</div>
</div>
<a href="javascript:;" class="get_more">::点击加载更多内容::</a>
</div>
</body>
</html>

三、建立一个一般处理程序data.ashx
复制代码代码如下:
<%@ WebHandler Language="C#" Class="data" %>

using System;
using System.Web;
using Microsoft.Practices.EnterpriseLibrary.Data;

public class data : IHttpHandler {
public void ProcessRequest （HttpContext context） {
context.Response.ContentType = "text/plain";

int last = Convert.ToInt32（context.Request.Params["last"]）; //开始记录数
int amount = Convert.ToInt32（context.Request.Params["amount"]）; //单次显示记录数

Database db = DatabaseFactory.CreateDatabase（）;

////这里日期字段createOn先格式一下，否则会生成类似这种格式/Date（1310292162507）/
string sql = string.Format（"select id,author,content,convert（varchar（100）, createOn, 120） createOn from （ select row_number（） over （order by id） as rowNum,* from test） as t "
+ " where rowNum>{0} and rowNum<={1}", last, last + amount）;
System.Data.DataTable dt = db.ExecuteDataSet（System.Data.CommandType.Text,sql）.Tables[0];

context.Response.Write（JSONHelper.DataTableToJSON（dt））; //输出json格式
}
public bool IsReusable {
get {
return false;
}
}
}

附：jquery.more.js插件内容
复制代码代码如下:
（function（ $ ）{
var target = null;
var template = null;
var lock = false;
var variables = {
"last" : 0
}
var settings = {
"amount" : "10",
"address" : "",
"format" : "json",
"template" : ".single_item",
"trigger" : ".get_more",
"scroll" : "false",
"offset" : "100",
"spinner_code": ""
}

var methods = {
init : function（options）{
return this.each（function（）{

if（options）{
$.extend（settings, options）;
}
template = $（this）.children（settings.template）.wrap（"<div/>"）.parent（）;
template.css（"display","none"）
$（this）.append（"<div class="more_loader_spinner">"+settings.spinner_code+"</div>"）
$（this）.children（settings.template）.remove（）
target = $（this）;
if（settings.scroll == "false"）{
$（this）.find（settings.trigger）.bind（"click.more",methods.get_data）;
$（this）.more（"get_data"）;
}
else{
if（$（this）.height（） <= $（this）.attr（"scrollHeight"））{
target.more（"get_data",settings.amount*2）;
}
$（this）.bind（"scroll.more",methods.check_scroll）;
}
}）
},
check_scroll : function（）{
if（（target.scrollTop（）+target.height（）+parseInt（settings.offset）） >= target.attr（"scrollHeight"） && lock == false）{
target.more（"get_data"）;
}
},
debug : function（）{
var debug_string = "";
$.each（variables, function（k,v）{
debug_string += k+" : "+v+" ";
}）
alert（debug_string）;
},
remove : function（）{
target.children（settings.trigger）.unbind（".more"）;
target.unbind（".more"）
target.children（settings.trigger）.remove（）;
},
add_elements : function（data）{
//alert（"adding elements"）

var root = target
// alert（root.attr（"id"））
var counter = 0;
if（data）{
$（data）.each（function（）{
counter++
var t = template
$.each（this, function（key, value）{
if（t.find（"."+key）） t.find（"."+key）.text（value）;
}）
//t.attr（"id", "more_element_"+ （variables.last++））
if（settings.scroll == "true"）{
// root.append（t.html（））
root.children（".more_loader_spinner"）.before（t.html（））
}else{
// alert（"..."）

root.children（settings.trigger）.before（t.html（））

}

root.children（settings.template+":last"）.attr（"id", "more_element_"+ （（variables.last++）+1））

}）

}
else methods.remove（）
target.children（".more_loader_spinner"）.css（"display","none"）;
if（counter < settings.amount） methods.remove（）

},
get_data : function（）{
// alert（"getting data"）
var ile;
lock = true;
target.children（".more_loader_spinner"）.css（"display","block"）;
$（settings.trigger）.css（"display","none"）;
if（typeof（arguments[0]） == "number"） ile=arguments[0];
else {
ile = settings.amount;
}

$.post（settings.address, {
last : variables.last,
amount : ile
}, function（data）{
$（settings.trigger）.css（"display","block"）
methods.add_elements（data）
lock = false;
}, settings.format）

}
};
$.fn.more = function（method）{
if（methods[method]）
return methods[ method ].apply（ this, Array.prototype.slice.call（ arguments, 1 ））;
else if（typeof method == "object" || ！method）
return methods.init.apply（this, arguments）;
else $.error（"Method " + method +" does not exist！"）;

}
}）（jQuery）