Asp.net使用jQuery實現資料繫結與分頁

使用jQuery來實現Gridview, Repeater等伺服器端資料展示控制項的資料繫結和分頁。本文的關注重點是資料如何?資料繫結。

Content

jQuery的強大和可用性使得其迅速的流行起來。微軟也發布了一個補丁使得VS支援對jQuery的智能感應。由於Gridview，Repeater等控制項的複雜性，使得幾乎無法通過javascript在用戶端對其進行賦值。但是我們又不想放棄這些控制項提供的強大功能和便利性，尤其是我們已經習慣了使用這些控制項來展示大量的資料。因此如果能把jQuery和Gridview結合起來使用，那應該是很爽的一件事情。

我最近比較喜歡用Repeater這個控制項，所以，這裡就用一個Repeater顯示查詢的結果。

首先在頁面上定義好這個控制項顯示的各個欄位：

        <asp:PlaceHolder ID="specialRedeemPlaceHolder" runat="server" Visible="false">
             <table id="specialRedeemInfo">
                <caption>查詢結果</caption>
                   <thead>
                    <tr>
                        <th>獎品名稱</th>
                        <th>姓名</th>                        
                        <th>美容顧問編號</th>
                        <th>數量</th>
                        <th>所需積分</th>
                        <th>日期</th>
                        <th>狀態</th>
                        <th></th>
                    </tr>
                   </thead>
                   <tbody>
                    <asp:Repeater id="rptSpecialRedeemInfo" runat="server" EnableViewState="false" 
onitemdatabound="rptSpecialRedeemInfo_ItemDataBound">
                        <ItemTemplate>
                            <tr class="item">
                                <td><%# Eval("PartName") %></td>
                                <td><%# Eval("ConsultantName") %></td>
                                <td><%# Eval("ConsultantID")%></td>
                                <td><%# Eval("Quantity")%></td>
                                <td><%# Eval("PointCost")%></td>
                                <td><%# Eval("InsertedTime")%></td>
                                <td><%# Eval("DisplayStatus")%></td>                                           
                                <td><input id="btnProcess" type="button" runat="server" /></td>                                            
                            </tr>                           
                        </ItemTemplate>
                    </asp:Repeater>
                   </tbody>
                </table>
        </asp:PlaceHolder>

 

因為實現的是AJAX的查詢，因此可以設定repeater的 EnableViewState=”false”。 這個placeholder定義的是資料顯示的格式，而不是顯示在網頁上的位置。因此需要定義一個顯示查詢結果的位置，這裡定義一個div

        <div id="queryResult">                                       
        </div>

OK， 當用戶端處理查詢事件時，可以利用jQuery的load方法：

        $("#queryResult").load("SpecialRedeemManagement.aspx #specialRedeemInfo",

                         { Func: "Search", ConsultantID: consultantId}, //各個參數

                           ajaxComplete);   //當查詢完成時調用這個JS

 

伺服器端可以通過Request.Params["Func"]擷取各個參數。在 處理這個查詢事件時，首先

specialRedeemPlaceHolder.Visible = true; //設定placeholder的visible=true

然後再給repeater綁定資料(太簡單就不貼代碼了）。（onitemdatabound此事件仍然有效)

再把這個palcecontrol寫到Response流中去：

StringWriter tw = new StringWriter();

// *** Simple rendering - just write the control to the text writer
// *** works well for single controls without containers
Html32TextWriter writer = new Html32TextWriter(tw);
this.specialRedeemPlaceHolder.RenderControl(writer);
writer.Close();

Response.Write(tw.ToString());
Response.End();

解釋一下這句：$("#queryResult").load("SpecialRedeemManagement.aspx #specialRedeemInfo",

加上"#specialRedeemInfo”會使jQuery只擷取返回的Response中id為specialRedeemInfo的控制項那部分。好處就是在一個查詢中，如果需要的話，可以返回多個供顯示的控制項流。

除此之外，還有一點需要做的就是重寫一個方法：

public override void VerifyRenderingInServerForm(Control control)
{
//base.VerifyRenderingInServerForm(control);
}

至於這個方法是做什麼的，呵呵，有興趣的自己去查一下吧