ASP.NET分页组件学与用——教学篇
2024-07-10 12:57:32
供稿：网友
本文来源于网页设计爱好者web开发社区http://www.html.org.cn收集整理，欢迎访问。asp.net分页组件学与用——教学篇
没有人会怀疑分页组件在web应用程序中的作用。数据库中的记录数成千上万甚至过亿，如果一股脑儿显示在一页显然毫不现实，这样的程序员也太小儿科了。所以，最好的办法就是分页显示，每页只显示数据库中的一部分记录，可以翻页，也可以输入一个页码翻到指定的页面，这种方式也是当前比较常见的用法。
本文的不同之处在于，我把分页的功能封装在组件中，一方面体现了面向对象的特点，另一方面也方便发布、共享和使用。事先声明，本文不再讲述组件创建的详细过程，如果有疑点请参考本blog其他相关文章（asp.net组件设计浅论，asp.net组件编程step by step）。
首先来看看该组件的外观：
该组件最后运行显示在客户端其实是一个表格，表格被分成三段，第一段是与页和记录相关的信息；第二段是页导航，该导航显示一组带超链接的数字，通过点击数字可以转移到对应的页；第三段有两个html控件，用户可以输入数字转移到指定的页。从图中也可以看出，该组件的功能非常简单明了。
首先我们来关注第一部分。这一部分信息包括：当前页，总页数，每页显示的记录条数和总的记录条数。这些信息从组件外部传进来，所以我们定义对应的属性：
private int _count;//每页显示的记录条数
private int _currentpage;//当前页
private int _allcount;//所有记录条数
private int _showpages;//显示数字个数
我在注释_showpages这个属性的时候有点晦涩，所以需要简单的讲一下：该属性用来定义数字导航栏显示的数字个数，在上面的图中，定义显示10个数字，即从201——210，当然，根据需要，我们可以定义任意多个数字。
[defaultvalue(10),category("customer")]
public int count
{
set
{
if(value <= 0)
_count = 1;
else
_count = value;
}
get
{
return _count;
}
}
[defaultvalue(1),category("customer")]
public int currentpage
{
set
{
if(value < 0)
_currentpage = 1;
else
_currentpage = value;
}
get
{
return _currentpage;
}
}
[defaultvalue(1),category("customer")]
public int allcount
{
get
{
return _allcount;
}
set
{
if(_allcount < 0)
throw new exception("记录总条数不能为负数");
else
_allcount = value;
}
}
[defaultvalue(1),category("customer")]
public int pages//总页数
{
get
{
if(this._allcount % this._count > 0)
return ((int)this._allcount / this._count) + 1;
else
return ((int)this._allcount / this._count);
}
}
[defaultvalue(1),category("customer")]
public int showpages
{
set
{
if(value > 0)
_showpages = value;
else
_showpages = 9;
}
get
{
return _showpages;
}
}
在定义的属性中，有一个叫pages的属性，该属性不需要从外面传值，而过计算出来的。他的值等于总记录条数除以每页显示的记录条数（具体请见代码）。
现在我们要把这些值显示出来，用下面的代码显示：
//分页条分三部分，leftinfo是最左边的部分，用来显示当前页/总页数，每页显示的记录条数
leftinfo = "页:" + this.currentpage.tostring() + "/" + this.pages.tostring() + " " + "每页" + this.count.tostring() + "条" + " 共" + this.allcount.tostring() + "条";
第二段比较复杂。组件的页面导航数字是连续的，所以，我定义了一个最小值和最大值：
int min;//要显示的页面导航数最小值
int max;//要显示的页面导航数最大值
设计时，需要考虑三种情况：
1：如果当前页除以showpages余数为0，也就是恰好可以整除的话，页面导航数字最小值和最大值分别是：
min最小值 = 当前页 + 1
max最大值 = 当前页 + 页面导航数字个数（showpages）
对应代码：
if(this.currentpage % this.showpages == 0) //如果恰好整除
{
min = this.currentpage + 1;
max = this.currentpage + this.showpages ;
}
2：如果当前页是导航数字最小值时，应该切换到前一组导航数字。此时，导航数字的最小值和最大值分别是：
min最小值 = (((int)当前页 / 页面导航数字个数showpages ) - 1) *页面导航数字个数showpages +1;
max最大值 = 当前页 –1
对应代码如下：
else if(this.currentpage % this.showpages == 1 && this.currentpage > this.showpages )
{
min = (((int)this.currentpage / this.showpages ) - 1) * this.showpages +1;
max = this.currentpage - 1;
}
3：如果当前页是导航数字最大值时，应该切换到后一组导航数字。此时，导航数字的最小值和最大值分别是：
min最小值 = ((int)当前页 / 页面导航数字个数showpages) * 页面导航数字个数showpages + 1
max最大值 = (((int)当前页 / 页面导航数字个数showpages) +1) * 页面导航数字个数showpages
对应代码如下：
else
{
min = ((int)this.currentpage / this.showpages) * this.showpages + 1;
max = (((int)this.currentpage / this.showpages) +1) * this.showpages;
}
即然导航数字列表的最小值和最大值都计算出来了，所以我们通个做一个循环操作就可以生成该导航，当前页用斜体和红色字体突出显示：
for(int i = min ; i <= max ; i++)
{
if(i <= this.pages)//只有不大于最大页才显示
{
if(this.currentpage == i)//如果是当前页，用斜体和红色显示
{
numberstr = numberstr + "<a href=" + absurl + "?currentpage=" + i.tostring() + ">" + "<i style='color:red'>" + i.tostring() + "</i>" +"</a>" + "/n";
}
else
{
numberstr = numberstr + "<a href=" + absurl + "?currentpage=" + i.tostring() + ">" + i.tostring() +"</a>" + "/n";
}
}
}
大家应该看出来了，在导航列表的最前面和最后面一共还有四个图标，这几个图标并不是图片，而是7348四个数字的wedding字体。这四个图标的代码如下：
//第一页，上一页，下一页,最后一页
string first,previous,next,last;
first = absurl + "?currentpage=1";
/////////
if(this.currentpage == 1)
previous = absurl + "?currentpage=1";
else
previous = absurl + "?currentpage=" + (this.currentpage - 1).tostring();
/////////
if(this.currentpage == this.pages)
next = absurl + "?currentpage=" + this.pages;
else
next = absurl + "?currentpage=" + (this.currentpage + 1).tostring();
/////////
last = absurl + "?currentpage=" + this.pages;
接下来的代码就是生成要输出到客户端的html字符串：
centerinfo.appendformat("<font face='webdings' style='font-size:14px'><a href={0}>7</a><a href={1}>3</a></font>{2}<font face='webdings' style='font-size:14px'><a href={3}>4</a><a href={4}>8</a></font>",first,previous,numberstr,next,last);
stringbuilder sb = new stringbuilder();//html字符串
sb.appendformat("<table style = 'font-size:12px' border='0' cellpadding='0' cellspacing='0' width='100%'> /n " +
"<tr>/n" +
"<td width='25%' align='left'>{0}</td>/n" +
"<td width='61%' align='right'>{1}</td>/n" +
"<td width='14%' align='right'><input type='text' name='t1' size='4' style='border-bottom:solid 1pt gray;border-top :solid 1pt gray; border-left:solid 1pt gray;border-right:solid 1pt gray;'> /n <input type='button' name='b1' size='6' value=go style='border-bottom:solid 1pt gray;border-top :solid 1pt gray; border-left:solid 1pt gray;border-right:solid 1pt gray;' onclick='go(t1,{2})'></td>/n" +
"</tr>/n" +
"</table>",leftinfo,
centerinfo.tostring(),
this.pages);
真正输出，重写protected override void render(htmltextwriter writer)方法，输出代码如下：writer.write(sb.tostring());
很辛苦，不过辛苦还要继续。呵！^_^
最后要完成的是第三段了，这一段我们用javascript脚本完成。用户输入数据到文本框时，先检测是否符合要求，不能是非数字，也不能超过最大页面范围。如果符合要求，则将浏览器的地址栏改成对应的url地址即可。
脚本如下：
<script language="javascript">
function go(ctrl,max)
{
if(ctrl.value >= 1 && ctrl.value <= max)
{
var url;
var index;
url = location.href;
index = url.indexof('?');
if(index == -1)
{
}
else
{
url = url.substring(0,index);
}
location.href = url + "?currentpage=" + ctrl.value;
}
else
{
alert("您输入的页码必须是符合页面要求的数字,最大值是：" + max);
return false;
}
}
</script>
参数说明：ctrl是文本框，max是输入的最大值，也就是总页数。
重写onprerender()方法，将该段脚本输入到浏览器：
protected override void onprerender(eventargs e)
{
base.onprerender (e);
if(!page.isclientscriptblockregistered("werew-332dfaf-fdafdsfdsafd"))
{ page.registerclientscriptblock("werew-332dfaf-fdafdsfdsafd",scriptstring);
}
}
终于讲完了，听懂了吗？有词不达意的地方请多原谅。
下一篇文章是：《asp.net分页组件学与用——使用篇》，请关注！
