分頁以前一直是用第三方分頁控件AspNetPager.dll,使用起來也挺方便的,就是樣式設置起來感覺不是很好,於是經理決定我們自己做一個分頁控件,這個任務就交到我的手上。這個自定義分頁控件是模仿58同城的分頁及結合我們現在項目的需要寫的。感覺比較實用,沒什麼亮點。
其實分頁控件也沒啥,就是生成相關的HTML代碼,你需要啥HTML代碼,用你的代碼生成就是了,不管是AspNetPager.dll還是58同城也都是生成分頁相關的HTML代碼,其實就是一堆a標簽,點分頁的時候,分頁控件所在的頁面會刷新。
一:用AspNetPager.dll實現的分頁
圖:
生成的源碼
<div id="ctl00_Content_AspNetPager1"><a disabled="disabled" style="margin-right:5px;">首頁</a><a disabled="disabled" style="margin-right:5px;">上一頁</a><span class="al" style="margin-right:5px;">1</span><a href="NewsList.aspx?page=2" style="margin-right:5px;">2</a><a href="NewsList.aspx?page=3" style="margin-right:5px;">3</a><a href="NewsList.aspx?page=4" style="margin-right:5px;">4</a><a href="NewsList.aspx?page=5" style="margin-right:5px;">5</a><a href="NewsList.aspx?page=6" style="margin-right:5px;">6</a><a href="NewsList.aspx?page=7" style="margin-right:5px;">7</a><a href="NewsList.aspx?page=2" style="margin-right:5px;">下一頁</a><a href="NewsList.aspx?page=7" style="margin-right:5px;">尾頁</a></div> 二:58同城的分頁
圖:
生成的源碼
<div class="pager"> <strong><span>1</span></strong><a href="/zufang/pn2/"><span>2</span></a><a href="/zufang/pn3/"><span>3</span></a><a href="/zufang/pn4/"><span>4</span></a><a href="/zufang/pn5/"><span>5</span></a><a href="/zufang/pn6/"><span>6</span></a><a href="/zufang/pn7/"><span>7</span></a><a href="/zufang/pn8/"><span>8</span></a><a href="/zufang/pn9/"><span>9</span></a><a href="/zufang/pn10/"><span>10</span></a><a href="/zufang/pn11/"><span>11</span></a><a href="/zufang/pn12/"><span>12</span></a><a class="next" href="/zufang/pn2/"><span>下一頁</span></a></div>
三:我的分頁控件
程序代碼
<os:PagingControl runat="server" ID="paginglist" PageSize="4" CssCurrent="curpage" ImgFirst="/images/index/btn_first.jpg" ImgPrev="/images/index/btn_prev.jpg" ImgNext="/images/index/btn_next.jpg" ImgLast="/images/index/btn_end.jpg" CssClass="pagelist"></os:PagingControl>paginglist.RecordCount = 200;
paginglist.LoadControl();
生成源碼
<div class='pagelist'><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=1'><img src=/images/index/btn_first.jpg/></a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=23'><img src=/images/index/btn_prev.jpg/></a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=14'>14</a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=15'>15</a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=16'>16</a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=17'>17</a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=18'>18</a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=19'>19</a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=20'>20</a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=21'>21</a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=22'>22</a><a href='/CommonQuestion/QuestionListContent.aspx?questionTypeID=0&page=23'>23</a><span class=curpage>24</span></div>
程序源碼
using System.Text;using System.Web;using System.Web.UI;using System.ComponentModel;using System.Collections.Generic;using System.Web.UI.WebControls;//自定義分頁控件namespace ObjectCommon.Libary.Component{ [ToolboxData("<{0}:PagingControl runat=\"server\"></{0}:PagingControl>"), DefaultProperty("")] public class PagingControl : Literal { #region 分頁屬性 private int pageSize = 10; public int PageSize { set { if (value > 0) { pageSize = value; } } get { return pageSize; } } private int pageIndex = 1; public int PageIndex { set { if (value > 0) { pageIndex = value; } } get { return pageIndex; } } public int RecordCount { set; get; } private int PageCount = 0; //分頁參數 private string paraName = "page"; public string ParaName { set { if (value != null && value.Trim() != "") { paraName = value.Trim(); } } get { return paraName; } } #endregion #region Css //分頁控件的樣式 public string CssClass { set; get; } //上一頁樣式 public string CssPrev { set; get; } //下一頁樣式 public string CssNext { set; get; } //當前頁樣式 public string CssCurrent { set; get; } //首頁樣式 public string CssFirst { set; get; } //尾頁樣式 public string CssLast { set; get; } //其它頁樣式 public string CssOther { set; get; } #endregion #region Img //首頁圖片 public string ImgFirst { set; get; } //上一頁頁圖片 public string ImgPrev { set; get; } //下一頁頁圖片 public string ImgNext { set; get; } //尾頁 public string ImgLast { set; get; } #endregion // A標簽的HRef private string ATargetHref { set; get; } //獲取paraname之外的請求參數 private void GetUrl() { HttpContext ctx = HttpContext.Current; string hostName ="http://"+ ctx.Request.Url.Host + ":" + ctx.Request.Url.Port ; string url = ctx.Request.Url.ToString().Substring(hostName.Length).Split('?')[0] + "?"; StringBuilder query = new StringBuilder(url); foreach (string key in ctx.Request.QueryString) { if (key!=null && key.ToLower() != this.ParaName) { query.Append(string.Format("{0}={1}&", key, ctx.Request.QueryString[key])); } } this.ATargetHref = query.ToString(); } private string GetUrl(int pageIndex) { return string.Format("{0}{1}={2}", this.ATargetHref,this.paraName, pageIndex); } //初始化屬性 private void Initializtion() { GetUrl(); this.PageCount = (this.RecordCount - 1) / this.PageSize + 1; if (!string.IsNullOrEmpty(HttpContext.Current.Request[this.ParaName])) { this.PageIndex = int.Parse(HttpContext.Current.Request[this.ParaName]); } } //生成控件 private void LoadControl(List<Tag> divPaging) { if (divPaging == null || divPaging.Count == 0) { this.Text = null; return; } StringBuilder sb = new StringBuilder(256); if (this.CssClass == null || this.CssClass.Trim() == "") { sb.Append("<div>"); } else { sb.Append(string.Format("<div class='{0}'>", this.CssClass)); } for (int i = 0; i < divPaging.Count;i++) { if (divPaging[i] == null) { sb.Append(GetCurrentPage()); } else { sb.Append(divPaging[i].ToString()); } } sb.Append("</div>"); this.Text = sb.ToString(); } private string GetCurrentPage() { if (this.CssCurrent == null || this.CssCurrent.Trim() == "") { return string.Format("<span>{0}</span>", this.PageIndex); } else { return string.Format("<span class={0}>{1}</span>", this.CssCurrent, this.PageIndex); } } /// <summary> /// 加載控件 /// </summary> public void LoadControl() { if (this.RecordCount<=this.PageSize) { this.Text = null; } else { Initializtion(); LoadControl(AddATarget()); } } #region 創建標簽 private Tag CreateATarget(string img,string css,int pageIndex,string content) { Tag a = new Tag(); a.HRef = GetUrl(pageIndex); if (img == null || img.Trim() == "") { a.InnerHtml = content; } else { a.InnerHtml = string.Format("<img src={0}/>",img); } if (css != null && css.Trim() != "") { a.CssClass = css; } return a; } #endregion // 向集合中添加標簽 private List<Tag> AddATarget() { List<Tag> divPaging = new List<Tag>(); if (this.PageIndex > 1)//添加上一頁 { divPaging.Add(CreateATarget(this.ImgFirst, this.CssFirst, 1, "首頁"));//添加首頁 divPaging.Add(CreateATarget(this.ImgPrev, this.CssPrev, this.PageIndex - 1, "上一頁")); } int end = this.PageIndex + 5; if (end < 11) { end = 11; } if (end > this.PageCount) { end = this.PageCount; } int start = end - 10 > 0 ? end - 10 : 1; for (int i = start; i <= end; i++) { if (i == this.PageIndex) { divPaging.Add(null); } else { divPaging.Add(CreateATarget(null, this.CssOther, i, i.ToString())); } } if (this.PageIndex < this.PageCount) { divPaging.Add(CreateATarget(this.ImgNext, this.CssNext, this.PageIndex + 1, "下一頁"));//添加下一頁 divPaging.Add(CreateATarget(this.ImgLast, this.CssLast, this.PageCount, "尾頁"));//添加尾頁 } return divPaging; } // 標簽實體 private class Tag { //鏈接 public string HRef { set; get; } //鏈接顯示的內容 public string InnerHtml { set; get; } //樣式 public string CssClass { set; get; } public override string ToString() { if (this.CssClass != null && this.CssClass.Trim() != "") { this.CssClass = string.Format(" class='{0}'", this.CssClass); } return string.Format("<a href='{0}'{1}>{2}</a>", this.HRef, this.CssClass, this.InnerHtml); } } }}
自定義控件注冊:
在web.config中,節點<pages> <controls>中加入:
<add tagPrefix="os" namespace="ObjectCommon.Libary.Component" assembly="ObjectCommon.Libary"/>