asp.net 無刷新翻頁就是這么簡單

更新時間：2010年03月08日 20:57:35 作者：

前兩天看了一個自定義分頁控件，和AspNetPager一樣是實現(xiàn)IPostBackEventHandler接口，不過簡潔許多，就想能不能實現(xiàn)ICallbackEventHandler接口做到無刷新分頁呢？想到了就馬上去做，終于，設(shè)想變成了現(xiàn)實??！

個人喜歡用Repeater，因其簡潔，此AjaxPager定向為Repeater！
一步一步看來：
代碼

復(fù)制代碼代碼如下:

 
[DefaultProperty("TotalRecord"), 
ToolboxData("<{0}:AjaxPager runat=server></{0}:AjaxPager>")] 
public class AjaxPager : WebControl,ICallbackEventHandler 
{ 
public AjaxPager() 
: base(HtmlTextWriterTag.Div) 
{ 
this.Load += new EventHandler(AjaxPager_Load); 
} 
void AjaxPager_Load(object sender, EventArgs e) 
{ 
string script = "function AjaxPagerCallBack(returnData){var parts =returnData.split('[_]'); document.getElementById('" + this.UniqueID.Replace ('$','_') + "').innerHTML = parts[0];document.getElementById('" + Info.ContainID + "').innerHTML=parts[1]}"; 
this.Page.ClientScript.RegisterClientScriptBlock(this.Page.GetType(), "AjaxPagerCallBack", script, true); 
} 
} 

這里在Load事件里向頁面注冊了一段JS，AjaxPagerCallBack方法做兩個操作，把自己表現(xiàn)的數(shù)據(jù)放入自己在客戶端生成的DIV容器里，即id為this.UniqueID.Replace('$','_')的div,ClientID好像也可以！哈，一時糊涂！第二步就是把分頁數(shù)據(jù)放到id為Info.ContainID的div中，Info對象下面會說到。
變量屬性

復(fù)制代碼代碼如下:

 
#region 變量 
private string _BarBackGroundColor = "#FFFFFF"; 
private string _BarLinkColor = "Navy"; 
private string _BarCurrentColor = "#EEEEEE"; 
private int _TotalRecord = 50; 
private int _TotalPage = 0; 
private int _CurrentIndex = 1; 
private int _ItemSize = 10; 
private PageInfo _Info=new PageInfo (); 
#endregion 
#region 屬性 
#region 外觀 
[Description("分頁背景色"), 
Bindable(true), 
Category("外觀"), 
DefaultValue("#FFFFFF")] 
public string BarBackGroundColor 
{ 
get { return _BarBackGroundColor; } 
set { _BarBackGroundColor = value; } 
} 
[Description("分頁條鏈接數(shù)字顏色"), 
Bindable(true), 
Category("外觀"), 
DefaultValue("Navy")] 
public string BarLinkColor 
{ 
get { return _BarLinkColor; } 
set { _BarLinkColor = value; } 
} 
[Description("分頁條當(dāng)前頁數(shù)字顏色"), 
Bindable(true), 
Category("外觀"), 
DefaultValue("#EEEEEE")] 
public string BarCurrentColor 
{ 
get { return _BarCurrentColor; } 
set { _BarCurrentColor = value; } 
} 
#endregion 
#region 行為 
[Description("總記錄數(shù)"), 
Category("行為"), 
DefaultValue(50)] 
public int TotalRecord 
{ 
get { return _TotalRecord; } 
set 
{ 
_TotalRecord = value; 
} 
} 
[Description("總頁數(shù)"), 
Category("行為"), 
DefaultValue(0)] 
public int TotalPage 
{ 
get { return _TotalPage; } 
} 
[Description("Bar的大小"), 
Category("行為"), 
DefaultValue(10)] 
public int BarSize 
{ 
get { return _ItemSize; } 
set 
{ 
foreach (char c in System.Convert.ToString(value)) 
{ 
if (!Char.IsNumber(c)) 
{ 
_ItemSize = 10; 
break; 
} 
} 
_ItemSize = value; 
} 
} 
[Description("當(dāng)前頁值"), 
Category("行為"), 
DefaultValue(1)] 
public int PageIndex 
{ 
get { return _CurrentIndex; } 
set { _CurrentIndex = value; } 
} 
#endregion 
public PageInfo Info 
{ 
get { return _Info; } 
set { _Info = value; } 
} 
#endregion 

這里自不必細說。其中的PageInfo如下：
PageInfo

復(fù)制代碼代碼如下:

 
[Serializable] 
public class PageInfo 
{ 
private string _RepeaterUniqueID; 
private string _ContainID="AjaxData"; 
private string _TableName = string.Empty; 
private string _IdentityField = "ID"; 
private int _PageSize = 10; 
private string _Fields = "*"; 
private bool _IsDesc = true; 
private string _Content = string.Empty; 
private string _ConnectStringName = string.Empty; 
public string RepeaterUniqueID 
{ 
get { return _RepeaterUniqueID; } 
set { _RepeaterUniqueID = value; } 
} 
public string ContainID 
{ 
get { return _ContainID; } 
set { _ContainID = value; } 
} 
public int PageSize 
{ 
get { return _PageSize; } 
set 
{ 
_PageSize = int.Parse(value.ToString()); 
} 
} 
public string TableName 
{ 
get { return _TableName; } 
set { _TableName = value; } 
} 
public string IdentityField 
{ 
get { return _IdentityField; } 
set { _IdentityField = value; } 
} 
public string Fields 
{ 
get { return _Fields; } 
set { _Fields = value; } 
} 
public bool IsDesc 
{ 
get { return _IsDesc; } 
set { _IsDesc = value; } 
} 
public string Content 
{ 
get { return _Content; } 
set { _Content = value; } 
} 
public string ConnectStringName 
{ 
get { return _ConnectStringName; } 
set { _ConnectStringName = value; } 
} 
} 

這是標記為Serializable，是因為下面要保存到ViewState里。
輔助方法

復(fù)制代碼代碼如下:

 
private string GetContents() 
{ 
this._TotalPage = ((this.TotalRecord / this.Info.PageSize) * this.Info.PageSize == this.TotalRecord) ? (this.TotalRecord / this.Info.PageSize) : ((this.TotalRecord / this.Info.PageSize) + 1); 
int BeginRecord = (this.PageIndex - 1) * this.Info.PageSize + 1; 
int EndRecord = Math.Min(this.PageIndex * this.Info.PageSize, this.TotalRecord); 
string PageInfo = string.Format("[每頁<span style='color:#CC0000'>{0}({1}-{2})</span>條&nbsp;&nbsp;共<span style='color:#CC0000'>{3}</span>條<span style='color:#CC0000'>{4}</span>頁]", Info.PageSize, BeginRecord, EndRecord, this.TotalRecord, this.TotalPage); 
StringBuilder PageListStr = new StringBuilder(); 
string PageIndexColor = "#000000"; 
int SingleNumber = this.TotalPage - (TotalPage / BarSize) * BarSize; 
int IntPageForMax = (this.PageIndex - 1) / BarSize; 
int MinInt = (1 + BarSize * IntPageForMax); 
int MaxInt = ((IntPageForMax + 1) * BarSize) > TotalPage ? TotalPage : ((IntPageForMax + 1) * BarSize); 
if (this.TotalRecord == 0 || this.TotalPage == 0) 
{ 
PageListStr.AppendFormat("<span style='color:'{0};margin:auto 3px;'>0</span>", PageIndexColor); 
PageListStr.AppendFormat(" [共<span style='color:#CC0000'>0</span>頁/當(dāng)前第<span style='color:#CC0000'>0</span>頁 共<span style='color:#CC0000'>0</span>條記錄,當(dāng)前記錄數(shù)<span style='color:#CC0000'>0</span>到<span style='color:#CC0000'>0</span>]"); 
return PageListStr.ToString(); 
} 
else 
{ 
if (this.TotalPage <= this.BarSize) 
{ 
for (int i = 1; i <= TotalPage; i++) 
{ 
PageIndexColor = PageIndex == i ? "#CC0000" : "#000000"; 
if (PageIndex == i) 
PageListStr.AppendFormat("<a id='{0}' style='color:{1};margin:auto 3px;'>{2}</a>", this.UniqueID, PageIndexColor, i); 
else 
PageListStr.AppendFormat("<a id='{0}' style='color:{1};margin:auto 3px;' href=\"javascript:{2}\">{3}</a>", this.UniqueID, PageIndexColor, Page.ClientScript.GetCallbackEventReference(this, i.ToString(),"AjaxPagerCallBack",null), i); 
} 
PageListStr.AppendFormat(" {0}", PageInfo); 
return PageListStr.ToString(); 
} 
else 
{ 
for (int i = MinInt; i <= MaxInt; i++) 
{ 
PageIndexColor = PageIndex == i ? "#CC0000" : "#000000"; 
if (PageIndex == i) 
PageListStr.AppendFormat("<a id={0}' style='color:{1};margin:auto 3px;'>{2}</a>", this.UniqueID, PageIndexColor, i); 
else 
PageListStr.AppendFormat("<a id='{0}' style='color:{1};margin:auto 3px;' href=\"javascript:{2}\">{3}</a>", this.UniqueID, PageIndexColor, Page.ClientScript.GetCallbackEventReference(this, i.ToString(), "AjaxPagerCallBack", null), i); 
} 
if (PageIndex <= BarSize && TotalPage > BarSize) 
{ 
PageListStr.AppendFormat("<a id='{0}' href=\"javascript:{1}\">下一頁</a>", this.UniqueID, Page.ClientScript.GetCallbackEventReference(this, System.Convert.ToString(BarSize + 1), "AjaxPagerCallBack", null)); 
} 
if (this.PageIndex > BarSize && (TotalPage - this.PageIndex) >= SingleNumber) 
{ 
int MultiMinPageIndex = (IntPageForMax * BarSize); 
int MultiMaxPageIndex = ((IntPageForMax + 1) * BarSize) + 1; 
PageListStr.Insert(0, string.Format("<a id='{0}' href=\"javascript:{1}\">上一頁</a>", this.UniqueID, Page.ClientScript.GetCallbackEventReference(this, MultiMinPageIndex.ToString(),"AjaxPagerCallBack",null))); 
PageListStr.AppendFormat("<a id='{0}' href=\"javascript:{1}\">下一頁</a>", this.UniqueID, Page.ClientScript.GetCallbackEventReference(this, MultiMaxPageIndex.ToString(),"AjaxPagerCallBack",null)); 
} 
if (PageIndex > 10 && (TotalPage - PageIndex) < SingleNumber) 
{ 
int MultiMinPageIndex = (IntPageForMax * BarSize); 
PageListStr.Insert(0, string.Format("<a id='{0}' href=\"javascript:{1}\">上一頁</a>", this.UniqueID, Page.ClientScript.GetCallbackEventReference(this, MultiMinPageIndex.ToString(), "AjaxPagerCallBack", null))); 
} 
PageListStr.AppendFormat(" {0}", PageInfo); 
return PageListStr.ToString(); 
} 
} 
} 
public void BindData() 
{ 
Repeater rpt = getRpt(); 
rpt.Visible = true; 
SqlHelper helper; 
helper = this.Info.ConnectStringName.IsNullOrEmpty() ? new SqlHelper() : new SqlHelper(Info.ConnectStringName); 
if (this.Info.RepeaterUniqueID.IsNullOrEmpty()) 
{ 
throw new Exception("必須給Info的RepeaterUniqueID屬性賦值"); 
} 
int count = 0; 
DataTable dt = helper.GetPageData(Info.TableName, Info.Fields, Info.IdentityField, Info.PageSize, PageIndex, Info.IsDesc, Info.Content, out count); 
this.TotalRecord = count; 
rpt.DataShow(dt); 
} 
private Repeater getRpt() 
{ 
return this.Page.FindControl(this.Info.RepeaterUniqueID) as Repeater; 
} 

先感謝一下寫那個Pager的人，GetContents(得到自己分頁后的HTML)里我只做了少許改動，要不然還得細細算來??！
BindData(用到了我的SqlHelper)是利用為服務(wù)器的DataBind()方法把數(shù)據(jù)放到repeater里，只是不讓它呈示，嘿嘿！
getRpt只是找到Repeater引用
維護視圖狀態(tài)

復(fù)制代碼代碼如下:

 
#region 維護視圖狀態(tài) 
protected override void LoadViewState(object savedState) 
{ 
Triplet tp = savedState as Triplet; 
this.TotalRecord = Convert.ToInt32(tp.Third); 
this.Info = tp.Second as PageInfo; 
base.LoadViewState(tp.First); 
} 
protected override object SaveViewState() 
{ 
Triplet tp = new Triplet(); 
tp.First = base.SaveViewState(); 
tp.Second = Info; 
tp.Third = this.TotalRecord; 
return tp; 
} 
#endregion 

這里也不必說，只是PageInfo一定要能Serializable。
重寫方法

復(fù)制代碼代碼如下:

 
#region 重寫方法 
protected override void RenderContents(HtmlTextWriter writer) 
{ 
writer.Write(GetContents()); 
base.RenderContents(writer); 
} 
protected override void AddAttributesToRender(HtmlTextWriter writer) 
{ 
writer.AddStyleAttribute("White-space", "nowrap"); 
writer.AddStyleAttribute("padding-top", "2px"); 
writer.AddStyleAttribute("padding-bottom", "2px"); 
writer.AddStyleAttribute("color", "#949494"); 
writer.AddStyleAttribute("font-weight", "bold"); 
writer.AddStyleAttribute("background-color", this.BarBackGroundColor); 
base.AddAttributesToRender(writer); 
} 
#endregion 

也不用說，大家一看都明白。
實現(xiàn)ICallbackEventHandler

復(fù)制代碼代碼如下:

 
#region ICallbackEventHandler 成員 
public string GetCallbackResult() 
{ 
StringBuilder sb=new StringBuilder (); 
StringWriter sw=new StringWriter (sb); 
getRpt().RenderControl(new HtmlTextWriter(sw)); 
return this.GetContents() + "[_]" + sb.ToString(); 
} 
public void RaiseCallbackEvent(string eventArgument) 
{ 
int pageindex = int.Parse(eventArgument); 
this._CurrentIndex = pageindex; 
BindData(); 
} 
#endregion 

回調(diào)時先執(zhí)行RaiseCallbackEvent，所以CurrentIndex改變了， BindData()執(zhí)行了！?。?！
返回時時執(zhí)行GetCallbackResult，string用"[_]"分開，對應(yīng)上面注冊的AjaxPagerCallBack js方法中的var parts =returnData.split('[_]');
OK！簡單的Ajax分頁就這樣簡單的完成了?。。?
Northwind Orders表調(diào)用如下：
頁面中Repeater包含在<div id="AjaxData"></div>中
代碼

復(fù)制代碼代碼如下:

 
private void BindPage(string content) 
{ 
SinoHelper.PageInfo info = new SinoHelper.PageInfo(); 
info.PageSize = 5; 
info.RepeaterUniqueID = rpt.UniqueID; 
info.TableName = "Orders"; 
info.Fields = "OrderID,CustomerID,ShipCity"; 
info.IdentityField = "OrderID"; 
info.Content = content; 
AjaxPager1.Info = info; 
AjaxPager1.BindData(); 
} 

附下載：
asp.net無刷新分頁

您可能感興趣的文章: