ASP.NET分頁組件學(xué)與用——教學(xué)篇
2024-07-10 12:57:32
供稿：網(wǎng)友
本文來源于網(wǎng)頁設(shè)計愛好者web開發(fā)社區(qū)http://www.html.org.cn收集整理，歡迎訪問。asp.net分頁組件學(xué)與用——教學(xué)篇
沒有人會懷疑分頁組件在web應(yīng)用程序中的作用。數(shù)據(jù)庫中的記錄數(shù)成千上萬甚至過億，如果一股腦兒顯示在一頁顯然毫不現(xiàn)實(shí)，這樣的程序員也太小兒科了。所以，最好的辦法就是分頁顯示，每頁只顯示數(shù)據(jù)庫中的一部分記錄，可以翻頁，也可以輸入一個頁碼翻到指定的頁面，這種方式也是當(dāng)前比較常見的用法。
本文的不同之處在于，我把分頁的功能封裝在組件中，一方面體現(xiàn)了面向?qū)ο蟮奶攸c(diǎn)，另一方面也方便發(fā)布、共享和使用。事先聲明，本文不再講述組件創(chuàng)建的詳細(xì)過程，如果有疑點(diǎn)請參考本blog其他相關(guān)文章（asp.net組件設(shè)計淺論，asp.net組件編程step by step）。
首先來看看該組件的外觀：
該組件最后運(yùn)行顯示在客戶端其實(shí)是一個表格，表格被分成三段，第一段是與頁和記錄相關(guān)的信息；第二段是頁導(dǎo)航，該導(dǎo)航顯示一組帶超鏈接的數(shù)字，通過點(diǎn)擊數(shù)字可以轉(zhuǎn)移到對應(yīng)的頁；第三段有兩個html控件，用戶可以輸入數(shù)字轉(zhuǎn)移到指定的頁。從圖中也可以看出，該組件的功能非常簡單明了。
首先我們來關(guān)注第一部分。這一部分信息包括：當(dāng)前頁，總頁數(shù)，每頁顯示的記錄條數(shù)和總的記錄條數(shù)。這些信息從組件外部傳進(jìn)來，所以我們定義對應(yīng)的屬性：
private int _count;//每頁顯示的記錄條數(shù)
private int _currentpage;//當(dāng)前頁
private int _allcount;//所有記錄條數(shù)
private int _showpages;//顯示數(shù)字個數(shù)
我在注釋_showpages這個屬性的時候有點(diǎn)晦澀，所以需要簡單的講一下：該屬性用來定義數(shù)字導(dǎo)航欄顯示的數(shù)字個數(shù)，在上面的圖中，定義顯示10個數(shù)字，即從201——210，當(dāng)然，根據(jù)需要，我們可以定義任意多個數(shù)字。
[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("記錄總條數(shù)不能為負(fù)數(shù)");
else
_allcount = value;
}
}
[defaultvalue(1),category("customer")]
public int pages//總頁數(shù)
{
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的屬性，該屬性不需要從外面?zhèn)髦担^計算出來的。他的值等于總記錄條數(shù)除以每頁顯示的記錄條數(shù)（具體請見代碼）。
現(xiàn)在我們要把這些值顯示出來，用下面的代碼顯示：
//分頁條分三部分，leftinfo是最左邊的部分，用來顯示當(dāng)前頁/總頁數(shù)，每頁顯示的記錄條數(shù)
leftinfo = "頁:" + this.currentpage.tostring() + "/" + this.pages.tostring() + " " + "每頁" + this.count.tostring() + "條" + " 共" + this.allcount.tostring() + "條";
第二段比較復(fù)雜。組件的頁面導(dǎo)航數(shù)字是連續(xù)的，所以，我定義了一個最小值和最大值：
int min;//要顯示的頁面導(dǎo)航數(shù)最小值
int max;//要顯示的頁面導(dǎo)航數(shù)最大值
設(shè)計時，需要考慮三種情況：
1：如果當(dāng)前頁除以showpages余數(shù)為0，也就是恰好可以整除的話，頁面導(dǎo)航數(shù)字最小值和最大值分別是：
min最小值 = 當(dāng)前頁 + 1
max最大值 = 當(dāng)前頁 + 頁面導(dǎo)航數(shù)字個數(shù)（showpages）
對應(yīng)代碼：
if(this.currentpage % this.showpages == 0) //如果恰好整除
{
min = this.currentpage + 1;
max = this.currentpage + this.showpages ;
}
2：如果當(dāng)前頁是導(dǎo)航數(shù)字最小值時，應(yīng)該切換到前一組導(dǎo)航數(shù)字。此時，導(dǎo)航數(shù)字的最小值和最大值分別是：
min最小值 = (((int)當(dāng)前頁 / 頁面導(dǎo)航數(shù)字個數(shù)showpages ) - 1) *頁面導(dǎo)航數(shù)字個數(shù)showpages +1;
max最大值 = 當(dāng)前頁 –1
對應(yīng)代碼如下：
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：如果當(dāng)前頁是導(dǎo)航數(shù)字最大值時，應(yīng)該切換到后一組導(dǎo)航數(shù)字。此時，導(dǎo)航數(shù)字的最小值和最大值分別是：
min最小值 = ((int)當(dāng)前頁 / 頁面導(dǎo)航數(shù)字個數(shù)showpages) * 頁面導(dǎo)航數(shù)字個數(shù)showpages + 1
max最大值 = (((int)當(dāng)前頁 / 頁面導(dǎo)航數(shù)字個數(shù)showpages) +1) * 頁面導(dǎo)航數(shù)字個數(shù)showpages
對應(yīng)代碼如下：
else
{
min = ((int)this.currentpage / this.showpages) * this.showpages + 1;
max = (((int)this.currentpage / this.showpages) +1) * this.showpages;
}
即然導(dǎo)航數(shù)字列表的最小值和最大值都計算出來了，所以我們通個做一個循環(huán)操作就可以生成該導(dǎo)航，當(dāng)前頁用斜體和紅色字體突出顯示：
for(int i = min ; i <= max ; i++)
{
if(i <= this.pages)//只有不大于最大頁才顯示
{
if(this.currentpage == i)//如果是當(dāng)前頁，用斜體和紅色顯示
{
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";
}
}
}
大家應(yīng)該看出來了，在導(dǎo)航列表的最前面和最后面一共還有四個圖標(biāo)，這幾個圖標(biāo)并不是圖片，而是7348四個數(shù)字的wedding字體。這四個圖標(biāo)的代碼如下：
//第一頁，上一頁，下一頁,最后一頁
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());
很辛苦，不過辛苦還要繼續(xù)。呵！^_^
最后要完成的是第三段了，這一段我們用javascript腳本完成。用戶輸入數(shù)據(jù)到文本框時，先檢測是否符合要求，不能是非數(shù)字，也不能超過最大頁面范圍。如果符合要求，則將瀏覽器的地址欄改成對應(yīng)的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("您輸入的頁碼必須是符合頁面要求的數(shù)字,最大值是：" + max);
return false;
}
}
</script>
參數(shù)說明：ctrl是文本框，max是輸入的最大值，也就是總頁數(shù)。
重寫onprerender()方法，將該段腳本輸入到瀏覽器：
protected override void onprerender(eventargs e)
{
base.onprerender (e);
if(!page.isclientscriptblockregistered("werew-332dfaf-fdafdsfdsafd"))
{ page.registerclientscriptblock("werew-332dfaf-fdafdsfdsafd",scriptstring);
}
}
終于講完了，聽懂了嗎？有詞不達(dá)意的地方請多原諒。
下一篇文章是：《asp.net分頁組件學(xué)與用——使用篇》，請關(guān)注！
