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模板，在模板中設計代碼如下：

<ItemTemplate>            <table style="height: 1px" width="100%" cellpadding="0" cellspacing="0">               <tr>                    <td colspan="3">               <hr />                      &nbsp;</td>                                </tr>                                  <tr>                                     <td width="80">                                                 留言標題：</td>                                             <td colspan="2">                                                 <%# Eval("title") %>                                             </td>                                         </tr>                                         <tr>                                             <td style="vertical-align: top; height: 11px" width="80">                                                 留言內容：</td>                                             <td colspan="2" style="height: 11px; vertical-align: top;">                                                 <%# Eval("message") %>                                             </td>                                         </tr>                                         <tr>                                             <td style="height: 26px;" width="80">                                             </td>                                             <td colspan="2" style="height: 26px">                                                 <table cellpadding="0" cellspacing="0" width="100%">                                                     <tr>          <td colspan="3" style="height: 17px" align="right">                  <a href="#message">我要留言</a> <a href='Reply.aspx?MessageID=<%# Eval("ID") %>'>我要回複</a>          <asp:HyperLink ID="hlnkShow" runat="server" NavigateUrl="#">展開>></asp:HyperLink>&nbsp;                   </td>                                                     </tr>                                                     <tr>           <td colspan="3">            <asp:Panel ID="plReturn" runat="server" Height="0px" Width="100%">                                                             </asp:Panel>                                                         </td>                                                     </tr>                                                     <tr>           <td colspan="3">        <cc1:DynamicPopulateExtender ID="dpeReturn" runat="server" ServicePath="Return.asmx"            ServiceMethod="GetReplyByMessage" ContextKey='<%# Eval("ID") %>' ClearContentsDuringUpdate="true"                         PopulateTriggerControlID="hlnkShow" TargetControlID="plReturn">         </cc1:DynamicPopulateExtender>                                                         </td>                                                     </tr>                                                 </table>                                             </td>                                         </tr>                                         <tr>                                             <td width="80">                                             </td>                                             <td colspan="2">                                                 <table style="width: 512px">                                                     <tr>                                                <td style="width: 103px">                                                    留言人連絡方式：</td>                                               <td style="width: 214px">                                               <a href='mailto:<%# Eval("Email") %>'>                                                      <%# Eval("Email") %>                                                   </td>                                               <td style="width: 41px">                                             時間：</td>                                         <td>                                    [<%# Eval("CreateDate") %>]                                </td>                        </tr>                    </table>                  </td>            </tr>         /table>    </ItemTemplate>

（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("<tabel><tr><td>回複" + row["CreateDate"]);             returnHtml.Append("</td><br /><br /><td>");             returnHtml.Append(row["Reply"]);             returnHtml.Append("</td></tr><br /><br /></tabel>");         }         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();         }     }