4.无刷新评论

1.用户可以提交自己的评论,并显示(添加)在评论上。

2.分别用html页面和aspx页面进行显示。html是一开始就加载所有的评论,而aspx是用repeater进行加载的,把repeater全放在ul中,当用户评论成功后就把此评论内容也加载到客户页面上。

3.分别用到了两个一般处理程序(服务端),一个为客户端读取评论的数据服务,把每条评论用$隔开,每条记录的内容用|隔开,在客户端进行split分解再显示出来。另一个一般处理程序(服务端)用来写入评论的,此服务端控制用户是否会有骂人等禁用语言。

4.建立数据表及强类型集:

 

5.建立加载两个服务端。

   1).HTMLComment.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using 无刷新评论.DAL.DataSetCommentTableAdapters;
using System.Text;

namespace 无刷新评论
{
    /// <summary>
    /// HTMLComment 的摘要说明
    /// </summary>
    public class HTMLComment : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var datatable= new T_CommentTableAdapter().GetData();
            if (datatable.Count <= 0)
            {
                context.Response.Write("none");
            }
            else
            {
                StringBuilder sb = new StringBuilder();
                foreach (var data in datatable)
                {
                   
                    //格式为:IP|127.0.0.1|CreateDate|2013-12-25 14:15:20|.....$
                    sb.Append(data.IP).Append("|").Append(data.CreateDate).Append("|").Append(data.Msg).Append("$");
                }
                context.Response.Write(sb.ToString().Trim('$'));
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

   2).RepeaterComment.ashx

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using 无刷新评论.DAL.DataSetCommentTableAdapters;

namespace 无刷新评论
{
    /// <summary>
    /// RepeaterComment1 的摘要说明
    /// </summary>
    public class RepeaterComment1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var ip=context.Request.UserHostAddress;
            var msg=context.Request["msg"];
            if (msg.Contains("去死吧") || msg.Contains("它妈的") || msg.Contains("他妈的") || msg.Contains("她妈的") || msg.Contains("TMD"))
            {
                context.Response.Write("forbid");
                return;
            }
            try
            {

                new T_CommentTableAdapter().Insert(ip, DateTime.Now, msg);
                context.Response.Write("ok");
            }
            catch (System.Exception ex)
            {
                context.Response.Write("error");
            }
             

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

6.html页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>   
    <script type="text/javascript">
        $(function () {
            $.post("HTMLComment.ashx", function (data, status) {

                if (!status) {
                    $("#ulcomment").append($("<li>加载失败.</li>"));
                    return;
                } else if (status == "success") {
                    if (data == "none") {
                        $("#ulcomment").append($("<li>没有任何评论.</li>"));
                        return;
                    }

                    var arrs = data.split("$");
                    if (arrs.length <= 0) return;
                    $.each(arrs, function () {
                        var linearrs = this.split("|");
                        $("#ulcomment").append($("<li>IP:" + linearrs[0] + " 日期:" + linearrs[1] + " 内容:" + linearrs[2] + "</li>"));


                    });
                }
            });

            $("#btncomment").click(function () {
                if ($("#txtcomment").val() == "")
                    return;
                var msg = $("#txtcomment").val();
                $.post("RepeaterComment.ashx", { "msg": msg }, function (data, status) {
                    if (!status) {
                        alert("ajax服务出错");
                        return;
                    } else if (status == "success") {
                        if (data == "ok") {
                            $("#ulcomment").append($("<li>IP:127.0.0.1 日期: " + new Date().toLocaleString() + " 内容:" + msg + "</li>"));
                            alert("发表下评论成功.");
                            $("#txtcomment").val("");
                        } else if (data == "error") {
                            alert("服务端写入出错");
                            return;
                        } else if (data == "forbid") {
                            alert("请注意文明用语,修改后再发布");
                            return;
                        }


                    } else {
                        alert("不知名的出错了。");
                    }



                });
            });
        });
        

    </script>
    <style type="text/css">
        #txtcomment
        {
            height: 131px;
            width: 581px;
        }
    </style>
</head>
<body>
<ul id="ulcomment">
    
</ul>
<textarea id="txtcomment"></textarea>
    <br />
<input type="button" id="btncomment" value="发表评论"  />
</body>
</html>

repeater控件用到的页:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RepeaterComment.aspx.cs" Inherits="无刷新评论.RepeaterComment" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #btncomment
        {
            width: 93px;
        }
    </style>
    <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
// <![CDATA[

        $(function () {
            $("#btncomment").click(function () {
                var msg = $("#txtcomment").val();
                if (msg == "none" || msg == "undefined" || msg == "")
                    return;
                $.post("RepeaterComment.ashx", { "msg": msg }, function (data, status) {
                    if (status == "success") {
                        if (data == "ok") {
                            var childcomment = $("<li>IP:127.0.0.1 日期:" + new Date().toLocaleDateString() + " 内容:" + msg + "</li>");
                            $("#ulcomment").append(childcomment);
                            alert("发表评论成功.");
                            $("#txtcomment").val("");


                        } else if (data == "error") {
                            alert("服务端写稿数据有误");
                        } else if (data == "forbid") {
                            alert("请注意文明用语,修改后再发布");
                            return;
                        }

                    } else {
                        alert("AJAX服务失败.")
                    }
                });

            });
        });          
      

// ]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
            DeleteMethod="Delete" InsertMethod="Insert" 
            OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" 
            TypeName="无刷新评论.DAL.DataSetCommentTableAdapters.T_CommentTableAdapter" 
            UpdateMethod="Update">
            <DeleteParameters>
                <asp:Parameter Name="Original_id" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="IP" Type="String" />
                <asp:Parameter Name="CreateDate" Type="DateTime" />
                <asp:Parameter Name="Msg" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="IP" Type="String" />
                <asp:Parameter Name="CreateDate" Type="DateTime" />
                <asp:Parameter Name="Msg" Type="String" />
                <asp:Parameter Name="Original_id" Type="Int32" />
            </UpdateParameters>
        </asp:ObjectDataSource>
        <ul id="ulcomment" class="ul">
          <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
            <ItemTemplate>
               <li>IP:<%#Eval("IP") %> 日期:<%#Eval("CreateDate") %>  内容:<%#Eval("Msg") %></li>
            </ItemTemplate>
          </asp:Repeater>
        </ul>
    </div>
    <textarea id="txtcomment" style="height: 131px; width: 485px"></textarea>
    <br />
    <input type="button" id="btncomment" value="提交评论" onclick="return btncomment_onclick()" />
    </form>
</body>
</html>

 

  7.客户端运行效果图:

 

 

posted on 2013-07-05 15:52  天上星  阅读(217)  评论(0编辑  收藏  举报

导航