接上面一节,上面还存在问题就是分页控件使用的仍然是服务器端控件,没点一次就要刷新页面一次,也就是向服务器端请求一次。那么用什么方法能够让页面无刷新而进行分页呢?
在这里,我想到了PagerView这套开源控件,有兴趣的朋友可以通过PagerView关键字去搜搜,然后研究下,这个封装的还是挺好的。
但是,这里遇到一个问题,如何让页面的GridView实现无刷新加载数据呢?这里我不得不提到我以前文章中写道的ICallbackEventhandler接口,这是微软的一个ajax回调接口,然后再配合这输出页面HTML的方式,不就可以实现无刷新GridView分页了吗?
前台代码:
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
PagerWithPagerView.aspx.cs
"
Inherits
=
"
PagerWithPagerView
"
%>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title ></ title >
< script src ="tableview/scripts/jquery.js" type ="text/javascript" ></ script >
< script src ="tableview/scripts/PagerView.js" type ="text/javascript" ></ script >
< link href ="tableview/style.css" rel ="stylesheet" type ="text/css" />
< link href ="css/TableZB.css" rel ="stylesheet" type ="text/css" />
< link href ="css/swcss.css" rel ="stylesheet" type ="text/css" />
< link href ="css/GridViewCSS_O.css" rel ="stylesheet" type ="text/css" />
<% --< style type = " text/css " >
.PagerView a
{
background:url(images / loginButton.gif) no - repeat;
}
</ style >-- %>
</ head >
< body >
< form id ="form1" runat ="server" >
< div id ="myData" >
< asp:GridView CssClass ="GVtable" ID ="GridView1" runat ="server" Width ="100%"
AutoGenerateColumns ="False" >
< Columns >
< asp:TemplateField HeaderText ="编号" >
< ItemTemplate >
<% # Eval ( " R " ).ToString() %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="纳税人识别码" >
< ItemTemplate > <% # Eval ( " nsrsbm " ).ToString() %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="纳税人名称" >
< ItemTemplate > <% # Eval ( " nsr_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="登记类型" >
< ItemTemplate > <% # Eval ( " djlx_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="登记状态" >
< ItemTemplate > <% # Eval ( " dj_ztmc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="注册类型" >
< ItemTemplate > <% # Eval ( " zclx_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="所别" >
< ItemTemplate > <% # Eval ( " gljg_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="专管员" >
< ItemTemplate > <% # Eval ( " zgy_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="所属性" >
< ItemTemplate > <% # Eval ( " ssx_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="操作" >
< ItemTemplate >
< asp:LinkButton ID ="lbtnOperation" CommandArgument ='<%#Eval("nsrsbm") % > ' runat="server">编辑 </ asp:LinkButton >
</ ItemTemplate >
</ asp:TemplateField >
</ Columns >
</ asp:GridView >
</ div >
< script type ="text/javascript" >
window.onload = function (){
var pager = new PagerView( ' pager ' ); // pager对象申明
pager.itemCount = <%= totalCount %> ; // 设置当前显示的页索引
pager.size = <%= _pageSize %> ; // 设置每页显示条数
pager.onclick = function (index) {
raiseCallBack(index, "" ); // 当分页按钮被点击的时候,触发的Ajax回调函数
};
pager.render();
}
// ajax回调成功后,进行处理的函数
function rServer(arg,context)
{
$( " #myData " ).text();
$( " #myData " ).html(arg);
}
// ajax回调函数,用户向后台请求数据
function raiseCallBack(arg,context)
{
<%= ClientScript.GetCallbackEventReference( this , " arg " , " rServer " , " context " ) %> ;
}
</ script >
</ form >
< div id ="pager" ></ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title ></ title >
< script src ="tableview/scripts/jquery.js" type ="text/javascript" ></ script >
< script src ="tableview/scripts/PagerView.js" type ="text/javascript" ></ script >
< link href ="tableview/style.css" rel ="stylesheet" type ="text/css" />
< link href ="css/TableZB.css" rel ="stylesheet" type ="text/css" />
< link href ="css/swcss.css" rel ="stylesheet" type ="text/css" />
< link href ="css/GridViewCSS_O.css" rel ="stylesheet" type ="text/css" />
<% --< style type = " text/css " >
.PagerView a
{
background:url(images / loginButton.gif) no - repeat;
}
</ style >-- %>
</ head >
< body >
< form id ="form1" runat ="server" >
< div id ="myData" >
< asp:GridView CssClass ="GVtable" ID ="GridView1" runat ="server" Width ="100%"
AutoGenerateColumns ="False" >
< Columns >
< asp:TemplateField HeaderText ="编号" >
< ItemTemplate >
<% # Eval ( " R " ).ToString() %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="纳税人识别码" >
< ItemTemplate > <% # Eval ( " nsrsbm " ).ToString() %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="纳税人名称" >
< ItemTemplate > <% # Eval ( " nsr_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="登记类型" >
< ItemTemplate > <% # Eval ( " djlx_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="登记状态" >
< ItemTemplate > <% # Eval ( " dj_ztmc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="注册类型" >
< ItemTemplate > <% # Eval ( " zclx_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="所别" >
< ItemTemplate > <% # Eval ( " gljg_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="专管员" >
< ItemTemplate > <% # Eval ( " zgy_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="所属性" >
< ItemTemplate > <% # Eval ( " ssx_mc " ) %> </ ItemTemplate ></ asp:TemplateField >
< asp:TemplateField HeaderText ="操作" >
< ItemTemplate >
< asp:LinkButton ID ="lbtnOperation" CommandArgument ='<%#Eval("nsrsbm") % > ' runat="server">编辑 </ asp:LinkButton >
</ ItemTemplate >
</ asp:TemplateField >
</ Columns >
</ asp:GridView >
</ div >
< script type ="text/javascript" >
window.onload = function (){
var pager = new PagerView( ' pager ' ); // pager对象申明
pager.itemCount = <%= totalCount %> ; // 设置当前显示的页索引
pager.size = <%= _pageSize %> ; // 设置每页显示条数
pager.onclick = function (index) {
raiseCallBack(index, "" ); // 当分页按钮被点击的时候,触发的Ajax回调函数
};
pager.render();
}
// ajax回调成功后,进行处理的函数
function rServer(arg,context)
{
$( " #myData " ).text();
$( " #myData " ).html(arg);
}
// ajax回调函数,用户向后台请求数据
function raiseCallBack(arg,context)
{
<%= ClientScript.GetCallbackEventReference( this , " arg " , " rServer " , " context " ) %> ;
}
</ script >
</ form >
< div id ="pager" ></ div >
</ body >
</ html >
那么在后台只要先实现ICallbackEventhandler接口,然后获取从前台传送过来的数据,进行处理,最后将html标签元素打到前台即可。
后台代码如下:
using
System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class PagerWithPagerView : System.Web.UI.Page,ICallbackEventHandler
{
protected void Page_Load( object sender, EventArgs e)
{
if ( ! IsPostBack)
{
Bind();
}
}
public static int _pageSize = 11 ;
public static int _startSize = 1 ;
public static int totalCount;
public string _str;
// 绑定gridview 并将绑定后的gridview对象返回
private GridView Bind()
{
string sqlQuery = " select nsrsbm,nsr_mc,djlx_mc,dj_ztmc,zclx_mc,gljg_mc,zgy_mc,ssx_mc from scott.t_yhs_djxxtz " ;
DataSet ds = Pagination.PaginationPager(sqlQuery, _pageSize, _startSize, out totalCount);
GridView1.DataSource = ds.Tables[ " Table " ];
GridView1.DataBind();
return GridView1;
}
public string GetCallbackResult()
{
return _str; // 将html返回到前台
}
public void RaiseCallbackEvent( string eventArgument)
{
if ( ! string .IsNullOrEmpty(eventArgument))
{
_startSize = Int32.Parse(eventArgument);
Response.ClearContent(); // 清除
GridView gv = Bind(); // 得到GridView对象
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter(sb);
HtmlTextWriter htw = new HtmlTextWriter(sw);
Header.RenderControl(htw);
gv.RenderControl(htw); // 将生成的html元素render出来
_str = sb.ToString();
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class PagerWithPagerView : System.Web.UI.Page,ICallbackEventHandler
{
protected void Page_Load( object sender, EventArgs e)
{
if ( ! IsPostBack)
{
Bind();
}
}
public static int _pageSize = 11 ;
public static int _startSize = 1 ;
public static int totalCount;
public string _str;
// 绑定gridview 并将绑定后的gridview对象返回
private GridView Bind()
{
string sqlQuery = " select nsrsbm,nsr_mc,djlx_mc,dj_ztmc,zclx_mc,gljg_mc,zgy_mc,ssx_mc from scott.t_yhs_djxxtz " ;
DataSet ds = Pagination.PaginationPager(sqlQuery, _pageSize, _startSize, out totalCount);
GridView1.DataSource = ds.Tables[ " Table " ];
GridView1.DataBind();
return GridView1;
}
public string GetCallbackResult()
{
return _str; // 将html返回到前台
}
public void RaiseCallbackEvent( string eventArgument)
{
if ( ! string .IsNullOrEmpty(eventArgument))
{
_startSize = Int32.Parse(eventArgument);
Response.ClearContent(); // 清除
GridView gv = Bind(); // 得到GridView对象
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter(sb);
HtmlTextWriter htw = new HtmlTextWriter(sw);
Header.RenderControl(htw);
gv.RenderControl(htw); // 将生成的html元素render出来
_str = sb.ToString();
}
}
}
代码中已经有了注释,我这里不再详细说明,这里只要知道ICallbackEventhandler接口的使用方法即可。
具体的结果页面如下: