簡(jiǎn)易ajax留言板

先來(lái)看下具體的效果圖：

思路很簡(jiǎn)單，就是一般的Ajax系統(tǒng)，主要是里面的一些jQuery的特效確實(shí)不錯(cuò)。下面是實(shí)現(xiàn)步驟：

環(huán)境：Visual Studio 2010 + SQL Server 2008 + jQuery1.4.1 

1. 首先設(shè)計(jì)數(shù)據(jù)庫(kù)，很簡(jiǎn)單，留言人、留言時(shí)間、留言內(nèi)容、頭像等字段，具體的數(shù)據(jù)庫(kù)表創(chuàng)建語(yǔ)句如下

4. 使用div 及css 布局你的留言板頁(yè)面，參考http://www.css88.com/demo/ajax-deleet 中的布局；

5. 當(dāng)初為了方便起見(jiàn)，使用了最基礎(chǔ)的SQL Helper作為數(shù)據(jù)操作類，下面是該 SQL Helper類的代碼：

代碼

/*

 * 文件名：SQLHelper

 * 說(shuō)明：SQL Server幫助類

 * 作者：Alexis

 * 網(wǎng)站：http://www.cnblogs.com/alexis

 * 創(chuàng)建時(shí)間：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 的摘要說(shuō)明

/// </summary>

public class SQLHelper

{

    SqlConnection conn;

    public SQLHelper()

    {

        string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["MessageBoard"].ToString();

        conn = new SqlConnection(connectionString);

    }


    /// <summary>

    /// 執(zhí)行SQL命令,將數(shù)據(jù)賦給數(shù)據(jù)集的引用

    /// </summary>

    public bool RunSQL(string cmdText, ref DataTable dt)

    {

        try

        {

            conn.Open();

            SqlCommand cmd = new SqlCommand(cmdText, conn);

            SqlDataAdapter sda = new SqlDataAdapter(cmd);

            DataSet ds1 = new DataSet();

            sda.Fill(ds1);

            dt = ds1.Tables[0];

        }

        catch (SqlException se)

        {

            return false;

            throw new Exception(se.Message, se);

        }

        return true;

    }


    /// <summary>

    /// 執(zhí)行帶參數(shù)的SQL語(yǔ)句

    /// </summary>

    /// <param name="cmdText"></param>

    /// <param name="sp"></param>

    public bool RunSQL(string cmdText, SqlParameter[] sp)

    {

        try

        {

            if(conn.State== ConnectionState.Closed)

                conn.Open();

            SqlCommand cmd = new SqlCommand(cmdText, conn);

            if (sp != null)

            {

                for (int i = 0; i < sp.Length; i++)

                {

                    cmd.Parameters.Add(sp[i]);//將參數(shù)加到Command中

                }

            }

            cmd.ExecuteNonQuery();

        }

        catch (SqlException se)

        {

            return false;

            throw new Exception(se.Message, se);

        }

        finally

        {

            conn.Close();

        }

        return true;

    }

    public DataTable getDataTable(string cmdText)

    {

        DataTable dt = null;

        try

        {

            if (conn.State == ConnectionState.Closed)

                conn.Open();

            SqlCommand cmd = new SqlCommand(cmdText, conn);

            DataSet ds = new DataSet();

            SqlDataAdapter da = new SqlDataAdapter(cmd);

            da.Fill(ds);

            dt = ds.Tables[0];

        }

        catch (SqlException se)

        {

            throw new Exception(se.Message, se);

        }

        finally

        {

            conn.Close();

        }

        return dt;

    }

}

6. 創(chuàng)建數(shù)據(jù)庫(kù)對(duì)象的實(shí)體類，也是十分簡(jiǎn)單的，就是對(duì)應(yīng)數(shù)據(jù)庫(kù)的字段；

代碼

/*

 * 文件名：Message

 * 說(shuō)明：Message實(shí)體類

 * 作者：Alexis

 * 網(wǎng)站：http://www.cnblogs.com/alexis

 * 創(chuàng)建時(shí)間：20100428

 * */

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace MessageBoard

{

    /// <summary>

    /// 留言類

    /// </summary>

    public class Message

    {

        private int id;//留言的標(biāo)識(shí)

        public int Id

        {

            get { return id; }

            set { id = value; }

        }


        private string msg_content;//留言的內(nèi)容

        public string Msg_content

        {

            get { return msg_content; }

            set { msg_content = value; }

        }


        private string msg_nickname;// 昵稱

        public string Msg_nickname

        {

            get { return msg_nickname; }

            set { msg_nickname = value; }

        }


        private string msg_face;//選擇的頭像

        public string Msg_face

        {

            get { return msg_face; }

            set { msg_face = value; }

        }


        private DateTime msg_time;//留言的時(shí)間

        public DateTime Msg_time

        {

            get { return msg_time; }

            set { msg_time = value; }

        }

    }

}

7.開(kāi)始著手寫js代碼，在寫ajax事件之前，先來(lái)看下兩個(gè)jQuery插件，首先是jQuery文本框水印效果，效果圖如下：

使用方法：添加watermarkinput 的js引用，為想要實(shí)現(xiàn)水印效果的文本框加上id 如:

<input type="text" id="msg_nickname" size="40" /> 之后再js代碼中寫如下的代碼以處理水印

//處理水印
jQuery(function($) {
	$("#msg_nickname").Watermark("請(qǐng)輸入您的昵稱，如果不輸入則默認(rèn)為匿名");
});
function UseData() {
	$.Watermark.HideAll(); //Do Stuff   
	$.Watermark.ShowAll();
}

9. 編寫具體的Ajax代碼，使用jQuery框架將會(huì)節(jié)省很多的時(shí)間，當(dāng)我們點(diǎn)擊留言按鈕的時(shí)候，將一些信息收集起來(lái)，然后通過(guò)Ajax寫入數(shù)據(jù)庫(kù)，然后使用布局修改DOM來(lái)實(shí)現(xiàn)無(wú)刷新的效果，主要的代碼如下：

代碼

//使用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("<div class='box clearfix' id=''><img src='" + msg_face +

                                "' alt='' width='50' height='50' class='avatar' /><div class='text'><strong><a href='#'>" + msg_nickname + "</a></strong><p>" + msg_content +"</p><div class='date'>"+msg_time+"</div></div></div>");

                        }

                    }

                });

上面的一些變量重字面上也能知道是我們收集的信息，即要寫如數(shù)據(jù)庫(kù)的留言信息；

10. 編寫Ajax處理類的代碼，將信息插入數(shù)據(jù)庫(kù)，代碼如下：

代碼

public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            string action = context.Request.Params["action"].ToString();//獲取想要做的操作

            if (action == "add")//新增留言

            {

                Message message = new Message();//創(chuàng)建新的留言對(duì)象

                message.Msg_nickname = context.Request.Params["msg_nickname"].ToString();//昵稱

                message.Msg_content = context.Request.Params["msg_content"].ToString();//留言內(nèi)容

                message.Msg_time = DateTime.Parse(context.Request.Params["msg_time"].ToString());//留言時(shí)間

                message.Msg_face = context.Request.Params["msg_face"].ToString();//選擇的頭像

                MessageAdd(message,context);

            }

            else if (action=="del")//刪除留言

            {

            }

        }


        /// <summary>

        /// 新增留言

        /// </summary>

        /// <param name="message"></param>

        private void MessageAdd(Message message, HttpContext context)

        {

            SQLHelper helper = new SQLHelper();

            string cmdText = "INSERT INTO TB_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, null))

            {

                context.Response.Write("success");

            }

        }

在這個(gè)類里面就用到了SQL Helper了；

 11. 編寫MessageBoard的后臺(tái)代碼，我們?cè)诩虞d留言本頁(yè)面的時(shí)候，需要將已有的留言信息顯示在頁(yè)面中，

代碼

/*

 * 文件名：MessageBoard

 * 說(shuō)明：使用Ajax的留言板

 * 作者：Alexis

 * 網(wǎng)站：http://www.cnblogs.com/alexis

 * 創(chuàng)建時(shí)間：20101226

 * */

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

using System.Data;


namespace MessageBoard

{

    public partial class MessageBoard : System.Web.UI.Page

    {

        protected DataTable dt;

        protected void Page_Load(object sender, EventArgs e)

        {

            GetMessage();

        }


        //從數(shù)據(jù)庫(kù)中讀取留言信息

        protected void GetMessage()

        {

            SQLHelper helper = new SQLHelper();

            dt=helper.getDataTable("select * from tb_message_board");

        }

    }

}