zoukankan      html  css  js  c++  java
  • 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=" 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();
            }
        }

  • 相关阅读:
    阅读笔记7
    阅读笔记6
    架构阅读笔记5
    软件质量属性——易用性课堂讨论问题总结
    Git 的 .gitignore 配置
    zookeeper的简单搭建,java使用zk的例子和一些坑
    MySQL中有关TIMESTAMP和DATETIME的对比
    Mysql 如何设置字段自动获取当前时间,附带添加字段和修改字段的例子
    spring boot注入error,Consider defining a bean of type 'xxx' in your configuration问题解决方案
    net start命令发生系统错误5和错误1058的解决方法
  • 原文地址:https://www.cnblogs.com/ly5201314/p/1287529.html
Copyright © 2011-2022 走看看