asp.net webform怎麼自訂分頁控制項的方法

做web開發一直用到分頁控制項，自己也動手實現了個，使用使用者自訂控制項。

翻頁後資料載入使用委託，將具體實現放在在使用分頁控制項的頁面進行註冊。

有圖有真相，給個直觀的認識：

自訂分頁控制項前台代碼：

 

代碼如下

複製代碼

<styletype="text/css">  .pager-m-l {   margin-left: 10px;  }    .pager {   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;   font-size: 14px;   color: #333;   background-color: #fff;   text-align: center;   border: 1px solid #eee;   border-radius: 5px;   height: 30px;   line-height: 30px;   margin: 10px auto;   width: 650px;  }    .font-blue {   color: #5bc0de;  }    .pager a {   color: #5bc0de;   text-decoration: none;  }     .pager a.gray {    color: #808080;   }    .pager-num {   width: 30px;   text-align: center;  }    .pager-form-control {   color: #555;   background-color: #fff;   background-image: none;   border: 1px solid #ccc;   border-radius: 4px;   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);   -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;   padding: 2px 0px;   margin: 0px 2px;  }     .pager-form-control:focus {    border-color: #66afe9;    outline: 0;    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);   }    .btn {   display: inline-block;   padding: 2px;   font-weight: normal;   text-align: center;   white-space: nowrap;   vertical-align: middle;   -ms-touch-action: manipulation;   touch-action: manipulation;   cursor: pointer;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none;   background-image: none;   border: 1px solid transparent;   border-radius: 4px;  }    .btn-default {   color: #333;   background-color: #fff;   border-color: #ccc;  } </style> <divclass="pager">  <span>當前<asp:Labelrunat="server"ID="labCurrentPageIndex"CssClass="font-blue"></asp:Label>/<asp:Labelrunat="server"CssClass="font-blue"ID="labTotalNumberOfPages"></asp:Label>頁</span>  <spanclass="pager-m-l">共<asp:Labelrunat="server"CssClass="font-blue"ID="labRecordCount"></asp:Label>條記錄</span>  <spanclass="pager-m-l">   <asp:LinkButtonrunat="server"ID="labFirstPage"OnClick="labFirstPage_Click">首頁</asp:LinkButton>   |   <asp:LinkButtonrunat="server"ID="labPreviousPage"OnClick="labPreviousPage_Click">上一頁</asp:LinkButton>   |<asp:LinkButtonrunat="server"ID="labNextPage"OnClick="labNextPage_Click">下一頁</asp:LinkButton>   |<asp:LinkButtonrunat="server"ID="labLastPage"OnClick="labLastPage_Click">尾頁</asp:LinkButton>  </span>  <spanclass="pager-m-l">跳至<asp:TextBoxrunat="server"ID="txtPageNum"CssClass="pager-form-control pager-num">1</asp:TextBox>頁   <asp:Buttonrunat="server"Text="GO"ID="btnGo"CssClass="btn btn-default"OnClick="btnGo_Click"/></span>  <spanclass="pager-m-l">   <asp:DropDownListrunat="server"ID="ddlPageSize"CssClass="pager-form-control"AutoPostBack="true"OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged">    <asp:ListItemText="10"Value="10"></asp:ListItem>    <asp:ListItemText="20"Value="20"></asp:ListItem>    <asp:ListItemText="30"Value="30"></asp:ListItem>    <asp:ListItemText="50"Value="50"></asp:ListItem>    <asp:ListItemText="100"Value="100"></asp:ListItem>   </asp:DropDownList>條/每頁</span> </div> 自訂分頁控制項後台代碼： privateconststringviewStateCurrentPageIndex ="CurrentPageIndex";   privateconststringviewStateRecordCount ="RecordCount";     publicdelegatevoidPageChangedHandle();   publiceventPageChangedHandle OnPageChanged;     publicintPageSize   {    get    {     returnConvert.ToInt32(ddlPageSize.SelectedValue);    }   }     publicintCurrentPageIndex   {    set    {     ViewState[viewStateCurrentPageIndex] = value;    }    get    {     if(ViewState[viewStateCurrentPageIndex] ==null)     {      ViewState[viewStateCurrentPageIndex] = 1;     }       returnConvert.ToInt32(ViewState[viewStateCurrentPageIndex]);    }   }   publicintRecordCount   {    get    {     if(ViewState[viewStateRecordCount] ==null)     {      ViewState[viewStateRecordCount] = 0;     }       returnConvert.ToInt32(ViewState[viewStateRecordCount]);    }    set    {     ViewState[viewStateRecordCount] = value;    }   }   privateintTotalNumberOfPages   {    get    {     returnRecordCount % PageSize == 0 ? RecordCount / PageSize : (RecordCount / PageSize) + 1;    }   }     protectedvoidPage_Load(objectsender, EventArgs e)   {    if(!IsPostBack)    {      }   }     protectedvoidlabFirstPage_Click(objectsender, EventArgs e)   {    CurrentPageIndex = 1;      this.DataBind();   }     protectedvoidlabPreviousPage_Click(objectsender, EventArgs e)   {    CurrentPageIndex -= 1;      this.DataBind();   }     protectedvoidlabNextPage_Click(objectsender, EventArgs e)   {    CurrentPageIndex += 1;      this.DataBind();   }     protectedvoidlabLastPage_Click(objectsender, EventArgs e)   {    CurrentPageIndex = TotalNumberOfPages;      this.DataBind();   }     protectedvoidbtnGo_Click(objectsender, EventArgs e)   {    intpageNum = 1;    boolisNum = Int32.TryParse(txtPageNum.Text,outpageNum);    if(isNum)    {     CurrentPageIndex = Math.Min(pageNum, TotalNumberOfPages);    }      this.DataBind();   }     protectedvoidddlPageSize_SelectedIndexChanged(objectsender, EventArgs e)   {    CurrentPageIndex = 1;      this.DataBind();   }     protectedoverridevoidDataBind(boolraiseOnDataBinding)   {    BindPager();    base.DataBind(raiseOnDataBinding);      if(OnPageChanged !=null)    {     OnPageChanged();    }   }     privatevoidBindPager()   {    labCurrentPageIndex.Text = CurrentPageIndex.ToString();    labTotalNumberOfPages.Text = TotalNumberOfPages.ToString();    labRecordCount.Text = RecordCount.ToString();      SetNavigateEnabled();   }      privatevoidSetNavigateEnabled()   {    txtPageNum.Text = CurrentPageIndex.ToString();    labFirstPage.Enabled =true;    labPreviousPage.Enabled =true;    labNextPage.Enabled =true;    labLastPage.Enabled =true;      labFirstPage.CssClass ="font-blue";    labPreviousPage.CssClass ="font-blue";    labNextPage.CssClass ="font-blue";    labLastPage.CssClass ="font-blue";      if(CurrentPageIndex == 1)    {     labFirstPage.Enabled =false;     labPreviousPage.Enabled =false;       labFirstPage.CssClass ="gray";     labPreviousPage.CssClass ="gray";    }    if(CurrentPageIndex == TotalNumberOfPages)    {     labNextPage.Enabled =false;     labLastPage.Enabled =false;       labNextPage.CssClass ="gray";     labLastPage.CssClass ="gray";    }    if(RecordCount == 0)    {     labFirstPage.Enabled =false;     labPreviousPage.Enabled =false;       labFirstPage.CssClass ="gray";     labPreviousPage.CssClass ="gray";       labNextPage.Enabled =false;     labLastPage.Enabled =false;       labNextPage.CssClass ="gray";     labLastPage.CssClass ="gray";    }   }

 

當前頁碼、總共多少條記錄使用ViewState選項組資訊，因為導航控制項會引起回傳重新整理。
分頁後的資料載入，使用事件。

事件的具體實現放在使用分頁控制項的具體頁面中，進行事件的註冊。

測試分頁控制項的前台頁面：

 

代碼如下	複製代碼
<divstyle="margin-bottom:10px;">   text:   <asp:TextBoxID="txtContent"runat="server"></asp:TextBox>   <asp:ButtonID="btnQuery"runat="server"Text="查 詢"OnClick="btnQuery_Click"/>  </div>  <div>   <asp:GridViewID="gvList"runat="server"Width="99%"AutoGenerateColumns="true"></asp:GridView>   <uc1:PagerControlrunat="server"ID="Pager"/> </div>

 

測試分頁控制項的後台代碼：

 

代碼如下

複製代碼

privateconststringdtSourceViewStateKey ="dtSourceViewStateKey";   protectedvoidPage_Load(objectsender, EventArgs e) {  if(!IsPostBack)  {  BindData(true);    }  Pager.OnPageChanged += OnPageChanged; }   privatevoidBindData(boolbindRecordCount) {  DataTable dtSource = GetDataSource();       var source = dtSource.AsEnumerable();  if(!string.IsNullOrEmpty(txtContent.Text.Trim()))  {  source = source.Where(w => w.Field<string>("text").Contains(txtContent.Text.Trim()));  }    if(bindRecordCount)  {  Pager.RecordCount = source.Count();  Pager.CurrentPageIndex = 1;  Pager.DataBind();  }    gvList.DataSource = source  .Skip((Pager.CurrentPageIndex - 1) * Pager.PageSize)  .Take(Pager.PageSize)  .Select(r =>new{ id = r["id"].ToString(), text = r["text"].ToString() })  .ToList();  gvList.DataBind(); }   privatevoidOnPageChanged() {  BindData(false); }   privateDataTable InitDataTable() {  DataTable dtSource =newDataTable();  DataColumn id =newDataColumn("id");  id.AutoIncrement =true;  id.AutoIncrementSeed = 1;    dtSource.Columns.Add(id);  dtSource.Columns.Add("text");    for(inti = 1; i <= 1000; i++)  {  DataRow dr = dtSource.NewRow();  dr["text"] ="內容"+ i;    dtSource.Rows.Add(dr);  }    returndtSource; }   privateDataTable GetDataSource() {  if(ViewState[dtSourceViewStateKey] ==null)  {  ViewState[dtSourceViewStateKey] = InitDataTable();  }    returnViewState[dtSourceViewStateKey]asDataTable; }   protectedvoidbtnQuery_Click(objectsender, EventArgs e) {  BindData(true); }

在Page_Load中註冊翻頁後的事件。