使用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);
}
至于这个方法是做什么的,呵呵,有兴趣的自己去查一下吧

Asp.net使用jQuery实现数据绑定与分页的更多相关文章

  1. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  2. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  3. 第二百零九节,jQuery EasyUI,Pagination(分页)组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  4. jquery自定义插件实现分页效果

    这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...

  5. C#字符串数组排序 C#排序算法大全 C#字符串比较方法 一个.NET通用JSON解析/构建类的实现(c#) C#处理Json文件 asp.net使用Jquery+iframe传值问题

    C#字符串数组排序   //排序只带字符的数组,不带数字的 private   string[]   aa   ={ "a ", "c ", "b & ...

  6. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

    上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...

  7. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

    上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...

  8. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作

    /****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENT ...

  9. ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

    引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...

随机推荐

  1. Delphi 串口通信数据位长度对传输数据的影响 转

      针对串口通信,关于设置数据位长度对通信的影响,如图: 在串口数据通信中,会看到串口参数设置.其中“数据位”设置,共有四档选项,分别是8.7.6.5.那么改变这个参数会对数据的传输有什么影响呢? 我 ...

  2. linux下使用go-oci8

    地址:https://github.com/wendal/go-oci8 它是 https://github.com/mattn/go-oci8 的分支. win下安装步骤参考:http://www. ...

  3. SORT UNIQUE|AGGREGATE|GROUP BY|ORDER BY|JOIN

    相信做oracle开发和管理的朋友对sort肯定不会陌生,大家通常都遇到这样那样的排序性能问题,所以我写这一系列关于sort的文章告诉大家在oracle里面sort是怎么一回事以及如果调整sort获得 ...

  4. 【C#】Abstract和Virtual的区别

    一.Virtual方法(虚方法) virtual 关键字用于在基类中修饰方法.virtual的使用会有两种情况: 情况1:在基类中定义了virtual方法,但在派生类中没有重写该虚方法.那么在对派生类 ...

  5. spark connect to Cassandra problem

    Cassandra rowkey is Blob type, cannot select by spark. How?

  6. 基于Storm 分布式BP神经网络,将神经网络做成实时分布式架构

    将神经网络做成实时分布式架构: Storm 分布式BP神经网络:    http://bbs.csdn.net/topics/390717623 流式大数据处理的三种框架:Storm,Spark和Sa ...

  7. 转】MyEclipse使用总结——修改MyEclipse默认的Servlet和jsp代码模板

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/3769058.html 感谢! 一.修改Servlet的默认模板代码 使用MyEclipse创建Servlet时, ...

  8. POJ 1696 Space Ant(极角排序)

    Space Ant Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2489   Accepted: 1567 Descrip ...

  9. poj 3264 Balanced Lineup(RMQ裸题)

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 43168   Accepted: 20276 ...

  10. centos安装postfixadmin

    postfixadmin的安装,跟普通网站安装没什么区别 配置好虚拟目录,然后在数据库中创建数据库postfix 修改config.inc.php文件,详细搜索谷歌 访问http://www.你的域名 ...