使用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="btn
 
 
因為實現的是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 containersHtml32TextWriter 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);}
至于這個方法是做什么的，呵呵，有興趣的自己去查一下吧