jQuery+.net实现浏览更多内容(改编php版本)_jquery

改编自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 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文件

复制代码 代码如下:

::点击加载更多内容::

三、建立一个一般处理程序data.ashx

复制代码 代码如下:

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 rowNumSystem.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('

').parent();
template.css('display','none')
$(this).append('

'+settings.spinner_code+'

')
$(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() 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+'\n';
})
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
},
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)