注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幽狼De博客

记录成长中的点点滴滴

 
 
 

日志

 
 

Asp.net使用jQuery实现数据绑定与分页  

2011-04-28 15:46:26|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Asp.net使用jQuery实现数据绑定与分页

文章分类:.net编程

使用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); }
至于这个方法是做什么的,呵呵,有兴趣的自己去查一下吧
  评论这张
 
阅读(599)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017