看了下ajax的相關資料,嘗試寫了個簡單分頁的代碼。
靜態頁面:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="js/jquery-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.post("GetPageData.ashx", { "action": "count" }, function(data, status) {
for (var i = 1; i <= data; i++) {
var td = $("<td><a href=''>" + i + "</a></td>");
$("#pages").append(td);
}
$.post("GetPageData.ashx", { "action": "data", "pageno": "1" }, function(data, status) {
var comments = $.parseJSON(data);
$("#topicList").empty();
for (var k = 0; k < comments.length; k++) {
var comment = comments[k];
var li = $("<li>" + comment.IPAddress + ":" + comment.PostDate + ":" + comment.Content + "</li>");
$("#topicList").append(li);
}
});
$("#pages td").click(function(e) {
e.preventDefault();
$.post("GetPageData.ashx", { "action": "data", "pageno": $(this).text() }, function(data, status) {
var comments = $.parseJSON(data);
$("#topicList").empty();
for (var k = 0; k < comments.length; k++) {
var comment = comments[k];
var li = $("<li>" + comment.IPAddress + ":" + comment.PostDate + ":" + comment.Content + "</li>");
$("#topicList").append(li);
}
});
});
});
$("#btnok").click(function() {
$.post("GetPageData.ashx", { "action": "write", "msg": $("#msg").val() }, function(data, status) {
alert("評論成功!");
});
});
});
</script>
</head>
<body>
<ul id="topicList"></ul>
<table>
<tr id="pages">
</tr>
</table>
評論內容:
<br />
<textarea id="msg" cols="50" rows="10"></textarea>
<br />
<input id="btnok" type="button" value="發表" />
</body>
</html>
處理程序:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using AJAXTest.DataSetTopicTableAdapters;
using System.Web.Script.Serialization;
namespace AJAXTest
{
/// <summary>
/// $codebehindclassname$ 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GetPageData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string flag = context.Request["action"];
if (flag == "count")
{
var adapter = new TopicTableAdapter();
int recCount = adapter.GetRecordCount().Value;
int pageCount = (recCount + 9) / 10;
context.Response.Write(pageCount);
}
else if (flag == "data")
{
string pageNo = context.Request["pageno"];
int ipageNo = Convert.ToInt32(pageNo);
var adapter = new TopicTableAdapter();
var data = adapter.GetDataByRowIndex((ipageNo - 1) * 10, ipageNo * 10);
List<Comment> comments = new List<Comment>();
foreach (var row in data)
{
comments.Add(new Comment() { IPAddress = row.IPAddress, PostDate = row.PostDate.ToShortDateString(), Content = row.Content });
}
JavaScriptSerializer jss = new JavaScriptSerializer();
context.Response.Write(jss.Serialize(comments));
}
else if (flag == "write")
{
string msg = context.Request["msg"];
var adapter = new TopicTableAdapter();
adapter.Insert(context.Request.UserHostAddress, DateTime.Now, msg);
context.Response.Write("ok");
}
else
{
context.Response.Write("格式錯誤");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class Comment
{
public string IPAddress { get; set; }
public string PostDate { get; set; }
public string Content { get; set; }
}
}