AJAX實現留言板資訊展開

來源:互聯網
上載者:User
文章目錄
  • 執行個體說明
  • 技術要點
  • 實現過程
執行個體說明

留言板是目前網路比較流行的、方便的、快捷的一種用來儲存留言的網路工具。使用者可以通過留言板為網站管理員留言,也可以作為使用者與管理員交流的通訊工具。留言板通常應用在企業門戶網站、電子商務銷售平台網等網站。本執行個體開發的留言板。

 

圖  留言板的資訊展開

技術要點

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();
        }
    }
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.