留言板是目前網絡比較流行的、方便的、快捷的一種用來保存留言的網絡工具。用戶可以通過留言板爲網站管理人員留言，也可以作爲用戶與管理員交流的通信工具。留言板通常應用在企業門戶網站、電子商務銷售平臺網等網站。本實例開發的留言板如圖所示。
圖 留言板的信息展開
技術要點
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 /> </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> </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(); } } |