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; 485px"></textarea> <br /> <input type="button" id="btncomment" value="提交评论" onclick="return btncomment_onclick()" /> </form> </body> </html>
7.客户端运行效果图：
