Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果

首先建立数据库，数据关系图如下：

本文要实现的效果就是在评论别人文章时，如果文章内容过长或者评论内容过长，实现的一个评论分段延迟加载的效果，即每页可显示30条评论，可每隔10条延迟加载一次以提高网页传输显示效率。

 

我所实现的页面延迟的原理如下图，就是求出X的距离小于100时进行加载延迟的评论，然后又设置了一个标记位，用来判断延迟加载了多少次，每页仅能加载30条评论记录。

 

 

然后再评论末端加载上页码实现无刷新进行分页的效果。

分页的方法也是比较简单的，这里自己实现了一个存储过程，使用到row_number()函数：

 

show sourceview source

print?

01	ALTER PROCEDURE ps_getpageandload

02

@aid int,

03	@startindex int,

04	@endindex int

05

AS

06	select  * from

07

(

08	select Row_Number() over(order by CID) as rownum,Username,Comment

09	from T_Comments where AID=@aid

10

) as T

11	where T.rownum>=@startindex and T.rownum<=@endindex

12

RETURN

 

就是输入一个起始位置的参数和结束位置的参数，取出中间的数据。

这样，在程序中就好取出数据了，比如：我第一页就是要1-30的数据，就让startindex=1,endindex=30就行了；第二页就是31-60的数据，同理。

 

LoadArticle.ashx：一个一般处理程序，用来加载文章内容，源代码如下：

 

show sourceview source

print?

01	using System;

02	using System.Collections.Generic;

03	using System.Linq;

04	using System.Web;

05	using System.Configuration;

06	using System.Data.SqlClient;

07	using Microsoft.ApplicationBlocks.Data;

08	using System.Data;

09	using System.Text;

10

11	namespace AJAXPagingTest

12

{

13	/// <summary>

14	/// Summary description for LoadArticle

15	/// </summary>

16	public class LoadArticle : IHttpHandler

17

{

18

19	public void ProcessRequest(HttpContext context)

20

{

21	context.Response.ContentType = "text/plain";

22

23

//获取连接字符串

24	String connString = ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;

25

26	//获取所要读取的文章编号

27	String aid = context.Request["article"];

28	SqlParameter[] sp=new SqlParameter[1];

29	sp[0]=new SqlParameter("@aid",aid);

30

31	SqlDataReader dr = SqlHelper.ExecuteReader(connString,

32	CommandType.Text,

33	"select Title,Article from T_Articles where AID=@aid",

34

sp);

35

36	StringBuilder sb = new StringBuilder();

37

38	while (dr.Read())

39

{

40	sb.Append(dr.GetString(dr.GetOrdinal("Title")));

41	sb.Append("|");

42	sb.Append(dr.GetString(dr.GetOrdinal("Article")));

43

}

44

45	context.Response.Write(sb.ToString());

46

47

}

48

49	public bool IsReusable

50

{

51

get

52

{

53	return false;

54

}

55

}

56

}

57

}

 

LoadCommentAndPaging.ashx：也是一个一般处理程序，用于加载评论，源代码如下：

 

show sourceview source

print?

001	using System;

002	using System.Collections.Generic;

003	using System.Linq;

004	using System.Web;

005	using System.Data;

006	using System.Data.SqlClient;

007	using Microsoft.ApplicationBlocks.Data;

008	using System.Configuration;

009	using System.Web.Script.Serialization;

010

011

012	namespace AJAXPagingTest

013

{

014	/// <summary>

015	/// Summary description for LoadCommentAndPaging

016	/// </summary>

017	public class LoadCommentAndPaging : IHttpHandler

018

{

019

020	public void ProcessRequest(HttpContext context)

021

{

022	context.Response.ContentType = "text/plain";

023

024	String connStr = ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;

025	List<Comment> Comments = new List<Comment>();

026	String result = String.Empty;

027

028

//获取页面的动作

029	String action = context.Request["action"];

030

031	//页面第一加载的时候

032	if (action=="load")

033

{

034	DataTable dt = SqlHelper.ExecuteDataset(connStr,

035	CommandType.Text,

036	"select top(10) * from T_Comments where AID=1").Tables[0];

037

038	foreach (DataRow dr in dt.Rows)

039

{

040	Comment comment = new Comment();

041	comment.Username = dr["Username"].ToString();

042	comment.Commentz = dr["Comment"].ToString();

043	Comments.Add(comment);

044

}

045	JavaScriptSerializer jss = new JavaScriptSerializer();

046	result = jss.Serialize(Comments);

047	context.Response.Write(result);

048

return;

049

}

050

051

//获取当前页码

052	String pageString = context.Request["page"];

053

054	//处理延时或分页加载评论

055	if (action=="pageOrlazy")

056

{

057	//获取当前延时加载的次数

058	String countString = context.Request["count"];

059

060	int page, count;

061

062	//判断参数是否正确

063	if (int.TryParse(pageString, out page) && int.TryParse(countString, out count))

064

{

065	//计算需要加载评论的起始索引

066	int startindex = (page - 1) * 30 + count * 10 + 1;

067

068	//计算需要加载评论结束索引

069	int endindex = startindex + 9;

070

071	SqlParameter[] sp = new SqlParameter[3];

072	sp[0] = new SqlParameter("@aid", 1);

073	sp[1] = new SqlParameter("@startindex", startindex);

074	sp[2] = new SqlParameter("@endindex", endindex);

075

076	DataTable dt = SqlHelper.ExecuteDataset(connStr,

077	CommandType.StoredProcedure,

078	"ps_getpageandload",

079	sp).Tables[0];

080

081	foreach (DataRow dr in dt.Rows)

082

{

083	Comment comment = new Comment();

084	comment.Username = dr["Username"].ToString();

085	comment.Commentz = dr["Comment"].ToString();

086	Comments.Add(comment);

087

}

088

089	JavaScriptSerializer jss = new JavaScriptSerializer();

090	result = jss.Serialize(Comments);

091	context.Response.Write(result);

092

return;

093

094

}

095

else

096

{

097	throw new Exception("参数传递错误");

098

}

099

100

}

101

102

//获取页码

103	if (action=="pagenumber")

104

{

105	int number = Convert.ToInt32(SqlHelper.ExecuteScalar(connStr,

106	CommandType.Text,

107	"select count(*) from T_Comments"));

108

109	context.Response.Write((number/30).ToString());

110

return;

111

}

112

113

114

}

115

116	public bool IsReusable

117

{

118

get

119

{

120	return false;

121

}

122

}

123

}

124

125	public class Comment

126

{

127	public String Username {get;set; }

128	public String Commentz {get;set; }

129

}

130

}

CommnetPage.htm：最后是前台页面的JQuery代码

 

show source