Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
首先建立数据库,数据关系图如下:
本文要实现的效果就是在评论别人文章时,如果文章内容过长或者评论内容过长,实现的一个评论分段延迟加载的效果,即每页可显示30条评论,可每隔10条延迟加载一次以提高网页传输显示效率。
我所实现的页面延迟的原理如下图,就是求出X的距离小于100时进行加载延迟的评论,然后又设置了一个标记位,用来判断延迟加载了多少次,每页仅能加载30条评论记录。
然后再评论末端加载上页码实现无刷新进行分页的效果。
分页的方法也是比较简单的,这里自己实现了一个存储过程,使用到row_number()函数:
1
2
3
4
5
6
7
8
9
10
11
12
|
ALTER PROCEDURE ps_getpageandload @aid
int , @startindex
int , @endindex
int AS select *
from ( select Row_Number()
over( order by CID)
as rownum,Username,Comment from T_Comments
where AID=@aid )
as T where T.rownum>=@startindex
and T.rownum<=@endindex RETURN |
就是输入一个起始位置的参数和结束位置的参数,取出中间的数据。
这样,在程序中就好取出数据了,比如:我第一页就是要1-30的数据,就让startindex=1,endindex=30就行了;第二页就是31-60的数据,同理。
LoadArticle.ashx:一个一般处理程序,用来加载文章内容,源代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Configuration; using System.Data.SqlClient; using Microsoft.ApplicationBlocks.Data; using System.Data; using System.Text; namespace AJAXPagingTest { ///
<summary> ///
Summary description for LoadArticle ///
</summary> public class LoadArticle
: IHttpHandler { public void ProcessRequest(HttpContext
context) { context.Response.ContentType
= "text/plain" ; //获取连接字符串 String
connString = ConfigurationManager.ConnectionStrings[ "MyConnectionString" ].ConnectionString; //获取所要读取的文章编号 String
aid = context.Request[ "article" ]; SqlParameter[]
sp= new SqlParameter[1]; sp[0]= new SqlParameter( "@aid" ,aid); SqlDataReader
dr = SqlHelper.ExecuteReader(connString, CommandType.Text, "select
Title,Article from T_Articles where AID=@aid" , sp); StringBuilder
sb = new StringBuilder(); while (dr.Read()) { sb.Append(dr.GetString(dr.GetOrdinal( "Title" ))); sb.Append( "|" ); sb.Append(dr.GetString(dr.GetOrdinal( "Article" ))); } context.Response.Write(sb.ToString()); } public bool IsReusable { get { return false ; } } } } |
LoadCommentAndPaging.ashx:也是一个一般处理程序,用于加载评论,源代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient; using Microsoft.ApplicationBlocks.Data; using System.Configuration; using System.Web.Script.Serialization; namespace AJAXPagingTest { ///
<summary> ///
Summary description for LoadCommentAndPaging ///
</summary> public class LoadCommentAndPaging
: IHttpHandler { public void ProcessRequest(HttpContext
context) { context.Response.ContentType
= "text/plain" ; String
connStr = ConfigurationManager.ConnectionStrings[ "MyConnectionString" ].ConnectionString; List<Comment>
Comments = new List<Comment>(); String
result = String.Empty; //获取页面的动作 String
action = context.Request[ "action" ]; //页面第一加载的时候 if (action== "load" ) { DataTable
dt = SqlHelper.ExecuteDataset(connStr, CommandType.Text, "select
top(10) * from T_Comments where AID=1" ).Tables[0]; foreach (DataRow
dr in dt.Rows) { Comment
comment = new Comment(); comment.Username
= dr[ "Username" ].ToString(); comment.Commentz
= dr[ "Comment" ].ToString(); Comments.Add(comment); } JavaScriptSerializer
jss = new JavaScriptSerializer(); result
= jss.Serialize(Comments); context.Response.Write(result); return ; } //获取当前页码 String
pageString = context.Request[ "page" ]; //处理延时或分页加载评论 if (action== "pageOrlazy" ) { //获取当前延时加载的次数 String
countString = context.Request[ "count" ]; int page,
count; //判断参数是否正确 if ( int .TryParse(pageString,
out page)
&& int .TryParse(countString,
out count)) { //计算需要加载评论的起始索引 int startindex
= (page - 1) * 30 + count * 10 + 1; //计算需要加载评论结束索引 int endindex
= startindex + 9; SqlParameter[]
sp = new SqlParameter[3]; sp[0]
= new SqlParameter( "@aid" ,
1); sp[1]
= new SqlParameter( "@startindex" ,
startindex); sp[2]
= new SqlParameter( "@endindex" ,
endindex); DataTable
dt = SqlHelper.ExecuteDataset(connStr, CommandType.StoredProcedure, "ps_getpageandload" , sp).Tables[0]; foreach (DataRow
dr in dt.Rows) { Comment
comment = new Comment(); comment.Username
= dr[ "Username" ].ToString(); comment.Commentz
= dr[ "Comment" ].ToString(); Comments.Add(comment); } JavaScriptSerializer
jss = new JavaScriptSerializer(); result
= jss.Serialize(Comments); context.Response.Write(result); return ; } else { throw new Exception( "参数传递错误" ); } } //获取页码 if (action== "pagenumber" ) { int number
= Convert.ToInt32(SqlHelper.ExecuteScalar(connStr, CommandType.Text, "select
count(*) from T_Comments" )); context.Response.Write((number/30).ToString()); return ; } } public bool IsReusable { get { return false ; } } } public class Comment { public String
Username { get ; set ;
} public String
Commentz { get ; set ;
} } } |
CommnetPage.htm:最后是前台页面的JQuery代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<! DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < title ></ title > < link href="Style/StyleSheet1.css"
rel="stylesheet" type="text/css" /> < script src="JS/jquery-1.4.2.min.js"
type="text/javascript"></ script > < script type="text/javascript"> $(function
() { //加载文章内容 $.post("LoadArticle.ashx",
{ "article": "1" }, function (data, state) { if
(state == "success") { //利用"|"来分隔标题和正文 var
article = data.split("|"); $("#article
h3").text(article[0]); $("#article").append(article[1]); } }); //加载初始的10条评论条数 $.post("LoadCommentAndPaging.ashx",
{ "action": "load" }, function (data, state) { if
(state == "success") { var
comments = $.parseJSON(data); for
(var i = 0; i < comments.length ;
i++) { var
comment = "<tr>< td >"
+ comments[i].Username + "说:</ td >< td >"
+ comments[i].Commentz + "</ td ></ tr >"; $("#comment").append(comment); } } }); }); //标记页面延迟数 var
flag = 1; //标记当前页面 var
currentpage = 1; //监测是否需要加载评论 function
check(n) { //监测浏览器的模式,根据不同的模式获取客户端高度会有不同 var
dom = document.compatMode == "CSS1Compat" ? document.documentElement : document.body; var
pre = document.getElementById("preload"); //获取滚动条离顶端的高度,用IE测试时是用 //documentElement.scrollTop获取高度, //而在用chrome测试时是body.scrollTop获取高度 var
scrtop = dom.scrollTop || document.body.scrollTop; //传入的参数为当前页数,保存为全局变量 currentpage
= n; //当客户端显示窗口离标记的地方小于100距离时开始加载 if
(pre.offsetTop - (dom.clientHeight + scrtop) < 100 )
{ $.post("LoadCommentAndPaging.ashx",
{ "action": "pageOrlazy", "page": currentpage, "count": flag }, function (data, state) { if
(state == "success") { var
comments = $.parseJSON(data); for
(var i = 0; i < comments.length; i++) { var
comment = "<tr>< td >"
+ comments[i].Username + "说:</ td >< td >"
+ comments[i].Commentz + "</ td ></ tr >"; $("#comment").append(comment); } } }); flag
= flag + 1; //如果加载多于3次了则不加载评论了,加载页码 if
(flag <= 2) { setTimeout("check(currentpage)",
2000); } else
{ //加载页码 $.post("LoadCommentAndPaging.ashx",
{ "action": "pagenumber" }, function (data, state) { if
(state == "success") { var
count = parseInt(data, 10); for
(var i = 1; i <= count + 1; i++) { var
control; //等于当前页时则不显示超链接 if
(i != currentpage) { control
= "< td >< a href=''>"
+ i + "</ a ></ td >"; } else
{ control
= "< td >"
+ i + "</ td >"; } $("#anchorlink").append(control); } //加载分页点击时的事件 $("#anchorlink
td").click(function (e) { e.preventDefault();
//阻止超链接的转向 $("#comment").empty();
//将评论区清空 $("#anchorlink").empty();
//将页码清空 $("#preload").text("评论正在加载中...");
flag
= 0; var
page = parseInt($(this).text()); check(page); }); } }); //去掉“评论加载中”的显示 $("#preload").text(""); } } else
{ setTimeout("check(currentpage)",
2000); } } //每隔两秒检查一下页面是否需要加载评论 setTimeout("check(currentpage)",
2000); </ script > </ head > < body > < div id="main"> < div id="article"> < h3 > </ h3 > </ div > < div > < table id="comment"> </ table > < p id="preload"> 评论正在加载中...</ p > < table > < tr id="anchorlink"> </ tr > </ table > </ div > </ div > </ body > </ html > |