在整理以前资料时偶尔发现有一个效果不错的Ajax留言板程序，是以前一个系统的一个部分。今天抽了点时间，将其独立成一个项目，与大家分享下，先来看下具体的效果图：

思路很简单，就是一般的Ajax系统，主要是里面的一些jQuery的特效确实不错。下面是实现步骤：

环境：Visual Studio 2010 + sql Server 2008 + jQuery1.4.1

1. 首先设计数据库，很简单，留言人、留言时间、留言内容、头像等字段，具体的数据库表创建语句如下

 
    
  
 
   CREATE 
    
   TABLE 
    
   [ 
   dbo 
   ] 
   . 
   tb_message_board 
   ] 
   (
  
   MSG_ID 
   ] 
    
   int 
   IDENTITY 
   ( 
   @H_502_54@1 
   , 
   @H_502_54@1 
   ) 
   NOT 
    
   NULL 
   ,
  
   MSG_USER 
   nchar 
   ] 
   ( 
   @H_502_54@20 
   ) 
   MSG_FACE 
   @H_502_54@50 
   ) 
   MSG_CONTENT 
   @H_502_54@100 
   ) 
   MSG_TIME 
   datetime 
   ] 
    
   NULL 
   
 ) 
   ON 
    
   PRIMARY 
   ] 
  
 
    
  

大家可以在自己机器上执行该sql ，你项目的数据库，同时要修改Web.config中的数据库名；

2. 创建ASP.NET 应用程序，默认已经有母版页了，我们只要添加一个使用了默认母版页的Web页面，取名为MessageBoard；

3. 创建一些常用的文件夹，如images文件夹，用来存放项目中使用的图片，我这边最后创建后的解决方案管理器如下图：

4. 使用div 及css 布局你的留言板页面，我之前参考了http://www.css88.com/demo/ajax-deleet 中的布局；

5. 当初为了方便起见，使用了最基础的sql Helper作为数据操作类，下面是该 sql Helper类的代码：

/*
*文件名：sqlHelper
*说明：sqlServer帮助类
*作者：Alexis
*网站： http://www.cnblogs.com/alexis
*创建时间：20100428
* */
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.sqlClient;

/// <summary>
sqlHelper的摘要说明
</summary>
public class sqlHelper
{
sqlConnectionconn;

public sqlHelper()
{
string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings[ " MessageBoard " ].ToString();
conn = new sqlConnection(connectionString);
}

执行sql命令,将数据赋给数据集的引用

bool Runsql( string cmdText, ref DataTabledt)
{
try
{
conn.Open();
sqlCommandcmd = new sqlCommand(cmdText,conn);
sqlDataAdaptersda = new sqlDataAdapter(cmd);
DataSetds1 = new DataSet();
sda.Fill(ds1);
dt = ds1.Tables[ 0 ];
}
catch (sqlExceptionse)
{
return false ;
throw new Exception(se.Message,se);
}
true ;
}

执行带参数的sql语句
</summary> <paramname="cmdText"></param> <paramname="sp"></param> sqlParameter[]sp)
{
try
{
if (conn.State == ConnectionState.Closed)
conn.Open();
sqlCommandcmd = if (sp != null )
{
for ( int i = 0 ;i < sp.Length;i ++ )
{
cmd.Parameters.Add(sp[i]); // 将参数加到Command中
}
}
cmd.ExecuteNonQuery();
}

}
finally
{
conn.Close();
}
true ;

}

public DataTablegetDataTable( string cmdText)
{
DataTabledt = null ;
DataSetds = new DataSet();
sqlDataAdapterda = new sqlDataAdapter(cmd);
da.Fill(ds);
dt = ds.Tables[ return dt;
}
}

6. 创建数据库对象的实体类，也是十分简单的，就是对应数据库的字段；

*文件名：Message
*说明：Message实体类
*作者：Alexis
*网站： using System.Collections.Generic;
using System.Web;

namespace MessageBoard
{
留言类
class Message
{
private int id; 留言的标识

int Id
{
get { return id;}
set {id = value;}
}

string msg_content; 留言的内容 string Msg_content
{
return msg_content;}
set {msg_content = value;}
}

string msg_nickname; 昵称 string Msg_nickname
{
return msg_nickname;}
set {msg_nickname = value;}
}

string msg_face; 选择的头像 string Msg_face
{
return msg_face;}
set {msg_face = value;}
}

private DateTimemsg_time; 留言的时间 public DateTimeMsg_time
{
return msg_time;}
set {msg_time = value;}
}

}
}

7.开始着手写js 代码，在写ajax事件之前，先来看下两个jQuery插件，首先是jQuery文本框水印效果，效果图如下：

使用方法：添加watermarkinput的js引用，为想要实现水印效果的文本框加上id如，

<inputtype="text"id="msg_nickname"size="40"/> 之后再js代码中写如下的代码以处理水印

//处理水印

 jQuery(function($){

 $("#msg_nickname").Watermark("请输入您的昵称，如果不输入则默认为匿名");

 });

 functionUseData(){

 $.Watermark.HideAll();//DoStuff

 $.Watermark.ShowAll();

 }

8. jQuery图片缩放插件， jquery.imgzoom.js ，具体的效果：点击图标的时候，图片渐渐变大，直至原来的大小，如果是Gif图片的话，效果会更好。

9. 编写具体的Ajax代码，使用jQuery框架将会节省很多的时间，当我们点击留言按钮的时候，将一些信息收集起来，然后通过Ajax写入数据库，然后使用布局修改DOM来实现无刷新的效果，主要的代码如下：

使用ajax处理留言
$.ajax({
type: " POST " ,
url: " Ajax/MessageBoardHandler.ashx?action=add " ,
data: " msg_nickname= " + escape(msg_nickname) + " &msg_content= " + escape(msg_content) + " &msg_time= " + msg_time + " &msg_face= " + msg_face,
success: function (msg){
在table中新增一行
if (msg == " success " ){
$( ' #messagelist ' ).append( " <divclass='Boxclearfix'id=''><imgsrc=' " + msg_face +
" 'alt=''width='50'height='50'class='avatar'/><divclass='text'><strong><ahref='#'> " + msg_nickname + " </a></strong><p> " + msg_content + " </p><divclass='date'> " + msg_time + " </div></div></div> " );
}
}
});

上面的一些变量重字面上也能知道是我们收集的信息，即要写如数据库的留言信息；

10. 编写Ajax处理类的代码，将信息插入数据库，代码如下：

void ProcessRequest(HttpContextcontext)
{
context.Response.ContentType = text/plain " ;
string action = context.Request.Params[ action " ].ToString(); 获取想要做的操作 if (action == add " ) 新增留言
{
Messagemessage = new Message(); 创建新的留言对象
message.Msg_nickname = context.Request.Params[ msg_nickname
message.Msg_content = context.Request.Params[ msg_content 留言内容
message.Msg_time = DateTime.Parse(context.Request.Params[ msg_time " ].ToString()); 留言时间
message.Msg_face = context.Request.Params[ msg_face
MessageAdd(message,context);
}
else if (action == del 删除留言
{

}
}

新增留言
<paramname="message"></param> void MessageAdd(Messagemessage,HttpContextcontext)
{
sqlHelperhelper = new sqlHelper();
string cmdText = INSERTINTOTB_MESSAGE_BOARD(MSG_USER,MSG_CONTENT,MSG_FACE,MSG_TIME)VALUES(' " +
message.Msg_nickname + ',' " + message.Msg_content + " + message.Msg_face + " + message.Msg_time + ') if (helper.Runsql(cmdText,255)">null ))
{
context.Response.Write( success " );
}
}

在这个类里面就用到了 sql Helper了；

11. 编写MessageBoard的后台代码，我们在加载留言本页面的时候，需要将已有的留言信息显示在页面中，

*文件名：MessageBoard
*说明：使用Ajax的留言板
*作者：Alexis
*网站：
*创建时间：20101226
* using System.Data.sqlClient;
using System.Data;

namespace MessageBoard
{
partial class MessageBoard:System.Web.UI.Page
{
protected DataTabledt;

protected void Page_Load( object sender,EventArgse)
{
GetMessage();
}

从数据库中读取留言信息 void GetMessage()
{
sqlHelperhelper = new sqlHelper();
dt = helper.getDataTable( select*fromtb_message_board " );

}
}
}

12. 在前台显示这些数据，使用的内部变量，即<%=dt.Rows[i]["msg_time"]%>这种形式的代码，详细的代码可以参考源文件