ajax 笔记－－不刷新实现简单的留言版 guestBook

下面是guest Book.aspx.cs代码

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

using  System.Text;
using  GetCommand; 

public   partial   class  Ajax_guestBook : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        if (!this.Page.IsPostBack)
        ...{
            AjaxPro.Utility.RegisterTypeForAjax(typeof(Ajax_guestBook));
        }
    }
    /**//// <summary>
    /// 添加留言信息
    /// </summary>
    /// <param name="txtNickName">用户昵称</param>
    /// <param name="txtQQ">QQ号</param>
    /// <param name="txtMSN">MSN号</param>
    /// <param name="txtTel">电话</param>
    /// <param name="txtContent">内容</param>
    /// <returns>count</returns>
    [AjaxPro.AjaxMethod]
    public int InsertGuestBook(string txtNickName,string txtQQ,string txtMSN,string txtTel,string txtContent)
    ...{
        string NickName = txtNickName.Trim();
        string QQ = txtQQ.Trim();
        string MSN = txtMSN.Trim();
        string Tel = txtTel.Trim();
        string Content = GeneralMethod.Encode(txtContent);
        string sqlString = "insert into guestBook values('" + NickName + "','" + QQ + "','" + MSN + "','" + Tel + "','" + Content + "','" + DateTime.Now.ToString() +"')";
        //这里你得你自己写一个,我这里自己早就写了一个GetCommand把 ExecuteNonQuery( 封装到里面去了
        int count = SetConnection.ExecuteNonQuery(sqlString);
        return count;
    }
    /**//// <summary>
    /// 把所有留言信息取出来
    /// </summary>
    /// <returns>AllGuestBookInformation</returns>
    [AjaxPro.AjaxMethod]
    public string getGuestBook()
    ...{
        //这里你得你自己写一个,我这里自己早就写了一个GetCommand把 DataSet 封装到里面去了.
        DataSet ds = SetConnection.getDataSet("SELECT * FROM guestBook order by IssueTime Desc", "guestBook");
        StringBuilder NickName = new StringBuilder();
        StringBuilder QQ = new StringBuilder();
        StringBuilder Tel = new StringBuilder();
        StringBuilder MSN = new StringBuilder();
        StringBuilder Content = new StringBuilder();
        StringBuilder IssueTime = new StringBuilder();

        foreach (DataRow dr in ds.Tables["guestBook"].Rows)
        ...{
            NickName.Append(dr["NickName"].ToString()).Append("|");
            QQ.Append(dr["QQ"].ToString()).Append("|");
            Tel.Append(dr["Tel"].ToString()).Append("|");
            MSN.Append(dr["MSN"].ToString()).Append("|");
            Content.Append(dr["Content"].ToString()).Append("|");
            IssueTime.Append(dr["IssueTime"].ToString()).Append("|");
        }
        return NickName.ToString() + "~" + QQ.ToString() + "~" + Tel.ToString() + "~" + MSN.ToString() + "~" + Content.ToString() + "~" + IssueTime.ToString();
    }
}

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
下面是 guestBook.aspx　html代码

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="guestBook.aspx.cs" Inherits="Ajax_guestBook"  %>

<! 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 >
     < script  type ="text/javascript"  language ="javascript"  src ="../JavaScripts/guestBook.js" > ...
     </ script >
</ head >
< body  onload ="btn_ShowGuestBookContent();" >
     < form  id ="form1"  runat ="server"   >
     < div >
         < table  border ="1" >
             < tr >
                 < td  style ="width: 100px" >
                    昵称： </ td >
                 < td  style ="width: 100px" >
                     < input  type ="text"  onmouseover ="Clear_txtNickName();"  id ="txtNickName"  value ="小土呢"   />
                     </ td >
                 < td  style ="width: 100px" >
                    QQ </ td >
                 < td  style ="width: 100px" >
                     < input  type ="text"  onmouseover ="Clear_txtQQ();"  id ="txtQQ"  value ="281827047"   /></ td >
             </ tr >
             < tr >
                 < td  style ="width: 100px" >
                    电话号码： </ td >
                 < td  style ="width: 100px" >
                     < input  type ="text"  onmouseover ="Clear_txtTel();"  id ="txtTel"  value ="13733377325"   /></ td >
                 < td  style ="width: 100px" >
                    MSN </ td >
                 < td  style ="width: 100px" >
                     < input  type ="text"  onmouseover ="Clear_txtMSN();"  id ="txtMSN"  value ="xiaotuni@hotmail.com"   /></ td >
             </ tr >
             < tr >
                 < td  style ="width: 100px; height: 42px;" >
                    内容： </ td >
                 < td  colspan ="3"  style ="height: 42px" >
                     < textarea  cols ="6"  rows ="6"  id ="txtContent"  style  ="width:100%" >  这是一简单无刷新实现留言版的例子 </ textarea >
                 </ td >
             </ tr >
             < tr >
                 < td  style ="width: 100px" >
                 </ td >
                 < td  colspan ="3" >
                    < input   type ="button"  onclick ="AddGuestBook();"  value ="添加留言信息"  id ="btnAddGuestBook"   />  
                 </ td >
             </ tr >
             < tr >
                 < td  style ="width: 100px" >
                 </ td >
                 < td  colspan ="3" >
                    Copyright ： < a  href  ="http://xiaotuni.w1.kingtoo.com" > xiaotuni </ a ></ td >
             </ tr >
         </ table >
    
     </ div >
     < div  id  ="GuestBook" >
         &nbsp; </ div >
     </ form >
</ body >
</ html >

－－－－－－－－－－－－－－－－－－－－－－－－－－－－
下面是js代码

//  JScript 文件

function  AddGuestBook()
... {
    var Nick = document.getElementById("txtNickName").value;
    var QQ = document.getElementById("txtQQ").value;
    var Tel = document.getElementById("txtTel").value;
    var MSN = document.getElementById("txtMSN").value;
    var Content = document.getElementById("txtContent").value;
    if( Nick == "")
    ...{
        alert("昵称不能为空");
    }
    else
    ...{
        if(Content == "")
        ...{
            alert("内容不能为空");
        }
        else
        ...{
            var response = Ajax_guestBook.InsertGuestBook(Nick,QQ,MSN,Tel,Content)
            if(response.value == 1)
            ...{
                alert("添加成功");
            }
            else
            ...{
                alert("添加失败");
            }
        }
    }
    //显示所有留言信息
    btn_ShowGuestBookContent();
    //清空操作
    btn_ClearControlsValue();
}
function  btn_ClearControlsValue()
... {
    document.getElementById("txtNickName").value = "";
    document.getElementById("txtQQ").value = "";
    document.getElementById("txtTel").value = "";
    document.getElementById("txtMSN").value = "";
    document.getElementById("txtContent").value = "";
}
function  btn_ShowGuestBookContent()
... {
    var response = Ajax_guestBook.getGuestBook();
    if(response.value == null)
    ...{
        alert("出错了" + response.value);            
    }
    else
    ...{
        BinderGuestBook(response);
    }
}
function  BinderGuestBook(response)
... { 
    var AllContent = response.value.split("~");
    var NickName = AllContent[0].split("|");
    var QQ = AllContent[1].split("|");
    var Tel = AllContent[2].split("|")
    var MSN  = AllContent[3].split("|");
    var Content  = AllContent[4].split("|");
    var IssueTime  = AllContent[5].split("|");
    var aa ="";
    for(var i = 0 ; i < NickName.length - 1 ; i++)
    ...{
        aa += '<table border="0" cellpadding="1" cellspacing="1"><tr><td>昵称：</td><td>' + NickName[i] +'<td >QQ</td><td >' + QQ[i] + '</td></tr><tr><td >电话号码：</td><td >' + Tel[i] + '</td><td >MSN</td><td >'+MSN[i]+'</td></tr><tr><td >内容</td><td colspan="3" >'+Content[i] + '</td></tr><tr><td >时间：</td><td colspan="3">'+IssueTime[i] +'</td></tr></table>'
    }
    document.getElementById("GuestBook").innerHTML = aa;
}
var  statue  =   1 ;
function  Clear_txtNickName()
... {
    if(statue == 1)
    ...{
        document.getElementById("txtNickName").value = "";
        
    }
}
function  Clear_txtQQ()
... {
        document.getElementById("txtQQ").value = "";
}
function  Clear_txtTel()
... {
        document.getElementById("txtTel").value = "";
}
function  Clear_txtMSN()
... {
        document.getElementById("txtMSN").value = "";
}

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
数据guestBook表结构

USE   [ People ]
GO
/**/ /****** 对象:  Table [dbo].[GuestBook]    脚本日期: 10/21/2006 22:21:21 ******/
SET  ANSI_NULLS  ON
GO
SET  QUOTED_IDENTIFIER  ON
GO
CREATE   TABLE   [ dbo ] . [ GuestBook ] (
     [ guestBookID ]   [ int ]   IDENTITY ( 1 , 1 )  NOT   NULL ,
     [ nickName ]   [ nvarchar ] ( 16 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ QQ ]   [ nvarchar ] ( 11 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ MSN ]   [ nvarchar ] ( 35 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ Tel ]   [ nvarchar ] ( 13 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ Content ]   [ nvarchar ] ( 4000 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ IssueTime ]   [ datetime ]   NULL ,
PRIMARY   KEY   CLUSTERED  
(
     [ guestBookID ]   ASC
) WITH  (IGNORE_DUP_KEY  =   OFF )  ON   [ PRIMARY ]
)  ON   [ PRIMARY ]