程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> ASP.NET基礎 >> asp.net 無刷新翻頁就是這麼簡單

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

編輯:ASP.NET基礎
個人喜歡用Repeater,因其簡潔,此AjaxPager定向為Repeater!
一步一步看來:
代碼
復制代碼 代碼如下:
[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方法做兩個操作,把自己表現的數據放入自己在客戶端生成的DIV容器裡,即id為this.UniqueID.Replace('$','_')的div,ClientID好像也可以!哈,一時糊塗!第二步就是把分頁數據放到id為Info.ContainID的div中,Info對象下面會說到。
變量屬性
復制代碼 代碼如下:
#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("分頁條鏈接數字顏色"),
Bindable(true),
Category("外觀"),
DefaultValue("Navy")]
public string BarLinkColor
{
get { return _BarLinkColor; }
set { _BarLinkColor = value; }
}
[Description("分頁條當前頁數字顏色"),
Bindable(true),
Category("外觀"),
DefaultValue("#EEEEEE")]
public string BarCurrentColor
{
get { return _BarCurrentColor; }
set { _BarCurrentColor = value; }
}
#endregion
#region 行為
[Description("總記錄數"),
Category("行為"),
DefaultValue(50)]
public int TotalRecord
{
get { return _TotalRecord; }
set
{
_TotalRecord = value;
}
}
[Description("總頁數"),
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("當前頁值"),
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
復制代碼 代碼如下:
[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裡。
輔助方法
復制代碼 代碼如下:
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>條  共<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>頁/當前第<span style='color:#CC0000'>0</span>頁 共<span style='color:#CC0000'>0</span>條記錄,當前記錄數<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)是利用為服務器的DataBind()方法把數據放到repeater裡,只是不讓它呈示,嘿嘿!
getRpt只是找到Repeater引用
維護視圖狀態
復制代碼 代碼如下:
#region 維護視圖狀態
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。
重寫方法
復制代碼 代碼如下:
#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

也不用說,大家一看都明白。
實現ICallbackEventHandler
復制代碼 代碼如下:
#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

回調時先執行RaiseCallbackEvent,所以CurrentIndex改變了, BindData()執行了!!!!
返回時時執行GetCallbackResult,string用"[_]"分開,對應上面注冊的AjaxPagerCallBack js方法中的var parts =returnData.split('[_]');
OK!簡單的Ajax分頁就這樣簡單的完成了!!!
Northwind Orders表調用如下:
頁面中Repeater包含在<div id="AjaxData"></div>中
代碼
復制代碼 代碼如下:
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無刷新分頁
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved