AJAX留言板

/*
*文件名：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> {
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"]%>这种形式的代码，详细的代码可以参考源文件

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!