用AjaxPro实现不刷新简单留言版

读过xiaotuni一篇Blog后，照着做了个，今后逐步复杂、美化，也请您多提建议

前台代码：guestBook.aspx

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " guestBook.aspx.cs "  Inherits = " 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  id ="Head1"  runat ="server" >
     < title > 用AjaxPro实现不刷新简易留言板 </ 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 ="38391232"   /></ td >
             </ tr >
             < tr >
                 < td  style ="width: 100px" >
                    电话号码： </ td >
                 < td  style ="width: 100px" >
                     < input  type ="text"  onmouseover ="Clear_txtTel();"  id ="txtTel"  value ="13935134336"   /></ td >
                 < td  style ="width: 100px" >
                    MSN </ td >
                 < td  style ="width: 100px" >
                     < input  type ="text"  onmouseover ="Clear_txtMSN();"  id ="txtMSN"  value ="hj983965@163.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%"  onmouseover ="Clear_txtContent();" > 这是个利用AjaxPro实现无刷新留言版的示例 </ 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; height: 23px;" >
                 </ td >
                 < td  colspan ="3"  style ="height: 23px" >
                    Copyright ： < a  href  ="#" > from xiaotuni </ a >

                </ td >
             </ tr >
         </ table >
         < br  />
         < br  />
    留言信息：    
     </ div >
     < div  id  ="GuestBook" >
     </ div >
     </ form >
</ body >
</ html >

 后台代码：guestBook.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  System.Data.SqlClient;

public   partial   class  guestBook : System.Web.UI.Page
{
     protected   void  Page_Load( object  sender, EventArgs e)
    {
         if  ( ! this .Page.IsPostBack)
        {
            AjaxPro.Utility.RegisterTypeForAjax( typeof (guestBook)); // 注册AjaxPro组件
        }
    }

     ///   <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] // 可以被Js调用的服务器端方法
     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  =  txtContent;
         string  sqlString  =   " insert into guestBook values(' "   +  NickName  +   " ',' "   +  QQ  +   " ',' "   +  MSN  +   " ',' "   +  Tel  +   " ',' "   +  Content  +   " ',' "   +  DateTime.Now.ToString()  + " ') " ;
        
         string  strConnection  =  System.Configuration.ConfigurationManager.AppSettings[ " ConnectionString " ];
        SqlConnection con  =   new  SqlConnection(strConnection);
        SqlCommand cmd  =   new  SqlCommand();
        cmd.Connection  =  con;
        cmd.CommandText  =  sqlString; 
        con.Open();
         int  count  =  cmd.ExecuteNonQuery();
         return  count;
    }
     ///   <summary>
     ///  把所有留言信息取出来
     ///   </summary>
     ///   <returns> AllGuestBookInformation </returns>
    [AjaxPro.AjaxMethod]
     public   string  getGuestBook()
    {
         string  strConnection  =  System.Configuration.ConfigurationManager.AppSettings[ " ConnectionString " ];
        SqlConnection con  =   new  SqlConnection(strConnection);
        SqlDataAdapter sda  =   new  SqlDataAdapter( " select * from GuestBook order by IssueTime desc " , con);
        DataSet ds  =   new  DataSet();
        sda.Fill(ds, " 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();
    }
}

 Js文件：guestBook.js

//  JScript 文件

// 添加留言信息
function  AddGuestBook()
{
     var  nickName  =  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 ( nickName  ==   '' )
    {
        alert( ' 昵称不能为空 ' );
         return   false ;
    }
     if (content  ==   '' )
    {
        alert( ' 内容不能为空 ' );
         return   false ;
    }
    
     // 调用server的InsertGuestBook()方法
     var  response  =  guestBook.InsertGuestBook(nickName,qq,msn,tel,content)
     if (response.value  ==   1 )
    {
        alert( ' 添加成功 ' );
    }
     else
    {
        alert( ' 添加失败 ' );
    }
        
     // 显示所有留言信息（调用）
    btn_ShowGuestBookContent();
     // 清空所有文本框操作（调用）
    btn_ClearControlsValue();
}
// 清空所有文本框操作（定义）
function  btn_ClearControlsValue()
{
     var  form  =  document.getElementById( ' form1 ' );
     for ( var  i = 0 ; i < form.elements.length; i ++ )
    {
         if (form.elements[i].type  ==   " text "   ||  form.elements[i].type  ==   " textarea " )
        {
            form.elements[i].value  =   "" ;
        }
    }    
}

// 显示所有留言信息（定义）
function  btn_ShowGuestBookContent()
{
     var  response  =  guestBook.getGuestBook();
    BinderGuestBook(response);
}
function  BinderGuestBook(response)
{ 
     // AllContent 数组
     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  temp  =   ' <table border="0" cellpadding="1" cellspacing="1"> ' ;
     for ( var  i = 0 ; i  <  IssueTime.length - 1 ; i ++ )
    {
        temp  +=       ' <tr> ' +
                             ' <td colspan="4"><hr></td> ' +
                     ' </tr> ' +
                     ' <tr> ' +
                             ' <td>昵称：</td> ' +
                             ' <td> '   +  NickName[i]  +   ' </td> ' +
                             ' <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> '           
    }
    temp  +=    ' </table> ' ;
    
    document.getElementById( " GuestBook " ).innerHTML  =  temp;
}

// 鼠标经过控件时清空
// 清空 昵称 文本框
function  Clear_txtNickName()
{
    document.getElementById( " txtNickName " ).value  =   "" ;
}
// 清空 QQ 文本框
function  Clear_txtQQ()
{
    document.getElementById( " txtQQ " ).value  =   "" ;
}
// 清空 电话号码 文本框
function  Clear_txtTel()
{
    document.getElementById( " txtTel " ).value  =   "" ;
}
// 清空 MSN 文本框
function  Clear_txtMSN()
{
    document.getElementById( " txtMSN " ).value  =   "" ;
}
// 清空 内容 文本框
function  Clear_txtContent()
{
    document.getElementById( ' txtContent ' ).value  =   "" ;
}

程序运行效果：

尚未留言效果：

 1条留言的效果：

3条留言的效果：

3条以上留言以此类推

数据库及其字段

表 GuestBook

字段

真心希望能与大家一起奋斗，一起努力，一起成功……