4.无刷新评论

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

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

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

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

  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.客户端运行效果图:

  4.无刷新评论

4.无刷新评论

 

你可能感兴趣的:(刷新)