AJAX學習--簡單分頁

看了下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; }
    }
}


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章