Asp.net使用jQuery实现数据绑定与分页
2010-07-28 10:57
891 查看
使用jQuery来实现Gridview, Repeater等服务器端数据展示控件的数据绑定和分页。本文的关注重点是数据如何实现数据绑定。
Content
jQuery的强大和可用性使得其迅速的流行起来。微软也发布了一个补丁使得VS支持对jQuery的智能感应。由于Gridview,Repeater等控件的复杂性,使得几乎无法通过javascript在客户端对其进行赋值。但是我们又不想放弃这些控件提供的强大功能和便利性,尤其是我们已经习惯了使用这些控件来展示大量的数据。因此如果能把jQuery和Gridview结合起来使用,那应该是很爽的一件事情。
我最近比较喜欢用Repeater这个控件,所以,这里就用一个Repeater显示查询的结果。
首先在页面上定义好这个控件显示的各个字段:
因为实现的是AJAX的查询,因此可以设置repeater的 EnableViewState=”false”。 这个placeholder定义的是数据显示的格式,而不是显示在网页上的位置。因此需要定义一个显示查询结果的位置,这里定义一个div
OK, 当客户端处理查询事件时,可以利用jQuery的load方法:
服务器端可以通过Request.Params["Func"]获取各个参数。在 处理这个查询事件时,首先
然后再给repeater绑定数据(太简单就不贴代码了)。(onitemdatabound此事件仍然有效)
再把这个palcecontrol写到Response流中去:
http://devilhand.javaeye.com/blog/560457
[/code]
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的控件那部分。好处就是在一个查询中,如果需要的话,可以返回多个供显示的控件流。 除此之外,还有一点需要做的就是重写一个方法:[code]public override void VerifyRenderingInServerForm(Control control) { //base.VerifyRenderingInServerForm(control); }
http://devilhand.javaeye.com/blog/560457
[/code]
相关文章推荐
- Asp.net使用jQuery实现数据绑定与分页
- Asp.net使用jQuery实现数据绑定与分页
- ASP.NET使用ListView数据绑定控件和DataPager实现数据分页显示(二)
- Asp.net使用jQuery实现Gridview, Repeater异步绑定数据
- ASP.NET使用ListView数据绑定控件和DataPager实现数据分页显示(一)
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页!
- asp.net 站内搜索功能的实现及利用datatable绑定数据并进行分页
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- ASP.NET Web API实践系列07,获取数据, 使用Ninject实现依赖倒置,使用Knockout实现页面元素和视图模型的双向绑定
- ASP.NET 使用DataList控件实现分页显示数据
- asp.net中使用分页控件,并绑定数据到GridView或Repeater
- ASP.NET Repeater绑定数据并实现分页
- 【EntityFramework系列教程三,翻译】在ASP.NET MVC程序中使用EntityFramework对数据进行排序、过滤筛选以及实现分页
- 使用asp.net递归的方法来实现treeview的数据绑定
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- ASP.NET Repeater绑定数据并实现分页
- 关于使用asp.net 的分页显示数据。Repeater绑定数据后的分页显示。
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- ASP.NET DataList绑定数据并实现分页
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果