jQuery .net enables browsing more content (adapted php version)

jQuery .net enables browsing more content (adapted php version)_jquery

WBOY

Release： 2016-05-16 17:39:01

Original

1429 people have browsed it

Adapted from the php version, original text:
jQuery PHP implementation Browse more content http://www.helloweba.com/view-blog-130.html
The implementation under .net is recorded here
1. First create the database table test and insert some test data :

Copy the code The code is as follows:

 
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 

2. Create an html file

Copy code The code is as follows:

< ;head>

::Click to load more content::

3. Create a general processing program data.ashx

Copy code The code is as follows:

 
<%@ 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"]); //Start record number
int amount = Convert.ToInt32 (context.Request.Params["amount"]); //Number of records displayed at a time

Database db = DatabaseFactory.CreateDatabase(); 

////The date field createOn is here first Format it, otherwise it will generate a format similar to this /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)); //Output json format
} 
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() <= $(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 '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 < 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) 