实例说明
留言板是目前网络比较流行的、方便的、快捷的一种用来保存留言的网络工具。用户可以通过留言板为网站管理人员留言,也可以作为用户与管理员交流的通信工具。留言板通常应用在企业门户网站、电子商务销售平台网等网站。本实例开发的留言板如图所示。
图 留言板的信息展开
技术要点
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=" 512px"> <tr> <td style=" 103px"> 留言人联系方式:</td> <td style=" 214px"> <a href='mailto:<%# Eval("Email") %>'> <%# Eval("Email") %> </td> <td style=" 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(); } } |