实例说明

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

技术要点

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();         }     }

评论 (0) All

登陆 还没注册？