AJAX实现留言板信息展开

实例说明
留言板是目前网络比较流行的、方便的、快捷的一种用来保存留言的网络工具。用户可以通过留言板为网站管理人员留言,也可以作为用户与管理员交流的通信工具。留言板通常应用在企业门户网站、电子商务销售平台网等网站。本实例开发的留言板如图所示。

 

图  留言板的信息展开

技术要点
DynamicPopulate控件提供了一种动态效果,能通过WebService或访问服务器端代码获取一段HTML文本,并替换掉目标控件上原来的内容。DynamicPopulate控件的主要属性及说明如表所示,

表 DynamicPopulate控件的属性及说明

属性
 说明
 
TargetControlID
 将具备“动态呈现”的Panel控件的值
 
ClearContentsDuringUpdate
 当更新时,是否清除目标元素中的既有HTML内容。若没有指定,将会自动 清除 HTML内容,默认值为true
 
SerivcePath
 将要调用的Web服务的URL。如果调用一个页面方法,就不用设置些属性
 
SerivceMethod
 Web服务方法或页面方法的名称
 
PopulateTriggerControlID
 一个选择的属性,用来指定某个控件被单击时,要触发目标元素进行动态呈现
 
UpdatingCssClass
 在异步调用(Asynchronous Call)时,欲套用到目标元素的CSS类属性
 
CustomScript
 替换原本将要调用的Web服务方法或页面方法,改调用指定的脚本(Script),它必须计算机为一个字符串值
 
ContextKey
 将传递给Web方法的任意字符串值。比方说,动态呈现欲显示一个绑定到资料的Repeater, 那么所传入的字符串值可以是目前该行数据的ID值
 

 

实现过程
(1)新建一个AJAX网站,命名为07,默认窗体为Default.aspx。

(2)在Default.aspx窗体中主要添加一个ScriptManager控件、一个UpdatePanel控件和一个GridView控件,分别用于管理页面中的AJAX控件、实现局部更新、显示留言板信息。

(3)对GridView控件进行编辑列,添加一个TemplateField项。

(4)编辑GridView模板,在模板中设计代码如下:

 
          


             
                  
                              
                                
                                   
                                           
                                       
                                       
                                           
                                           
                                       
                                       
                                           
                                           
                                       
                                       
                                           
                                           
          
        /table>
  


(5)创建一个Web服务,命名为Return.asmx。在WEB服务中创建GetReplyByMessage方法来实现留言板中的信息展开。代码如下:

    [WebMethod]
    public string GetReplyByMessage(string contextKey)
    {
        OleDbConnection conn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("Ex18_07.mdb"));
        OleDbDataAdapter da = new OleDbDataAdapter("select * from tb_reply  where messageID = " + contextKey + " Order by CreateDate DESC", conn);
        DataSet ds = new DataSet();
        da.Fill(ds);

        if (ds == null || ds.Tables.Count <= 0 || ds.Tables[0].Rows.Count <= 0)
        {
            return string.Empty;
        }
        StringBuilder returnHtml = new StringBuilder();
        foreach (DataRow row in ds.Tables[0].Rows)
        {
            returnHtml.Append("





");
        }
        return returnHtml.ToString();
    }


(6)在Default.aspx.cs文件获取数据库中的留言信息,实现代码如下:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            OleDbConnection conn = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("Ex18_07.mdb"));
            OleDbDataAdapter da = new OleDbDataAdapter("select * from tb_Message  Order by CreateDate DESC", conn);
            DataSet ds = new DataSet();
            da.Fill(ds);
            GridView1.DataSource = ds;
            GridView1.DataBind();
        }
    }

 


             

                      

                                                留言标题:

                                                <%# Eval("title") %>
                                           

                                                留言内容:

                                                <%# Eval("message") %>
                                           

                                           

                                               
                                                   
        
                                                   
                                                   
         
                                                   
                                                   
         
                                                   
                                               

                 我要留言 我要回复
         展开>> 
                 

          
                                                           

                                                       

                  ServiceMethod="GetReplyByMessage" ContextKey='<%# Eval("ID") %>' ClearContentsDuringUpdate="true"
                        PopulateTriggerControlID="hlnkShow" TargetControlID="plReturn">
       

                                                       

                                           

                                           

                                               
                                                   
                                              
                                             
                                             
                                       
                      
                  

                                                   留言人联系方式:

                                             
                                                     <%# Eval("Email") %>
                                                 

                                            时间:

                                   [<%# Eval("CreateDate") %>]
                              

                
回复" + row["CreateDate"]);
            returnHtml.Append("
");
            returnHtml.Append(row["Reply"]);
            returnHtml.Append("