Integrate jQuery with ASP.NET Data Controls

 

Introduction

使用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);
}

至于这个方法是做什么的，呵呵，有兴趣的自己去查一下吧

Conclusion

It just another way to work together with asp.net and jQuery

 

参考：

• jQuery
• west-wind