路由器

电脑

手机

网络

怎么样使用asp.net webform自定义分页控件？

来源：www.45fan.com  2017-01-05 17:49:30

怎么样使用asp.net webform自定义分页控件？

做web开发一直用到分页控件，自己也动手实现了个，使用用户自定义控件。

翻页后数据加载使用委托，将具体实现放在在使用分页控件的页面进行注册。

有图有真相，给个直观的认识：

怎么样使用asp.net webform自定义分页控件？

自定义分页控件前台代码：

<style type="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>
<div class="pager">
 <span>当前<asp:Label runat="server" ID="labCurrentPageIndex" CssClass="font-blue"></asp:Label>/<asp:Label runat="server" CssClass="font-blue" ID="labTotalNumberOfPages"></asp:Label>页</span>
 <span class="pager-m-l">共<asp:Label runat="server" CssClass="font-blue" ID="labRecordCount"></asp:Label>条记录</span>
 <span class="pager-m-l">
 <asp:LinkButton runat="server" ID="labFirstPage" OnClick="labFirstPage_Click">首页</asp:LinkButton>
 |
 <asp:LinkButton runat="server" ID="labPreviousPage" OnClick="labPreviousPage_Click">上一页</asp:LinkButton>
 |<asp:LinkButton runat="server" ID="labNextPage" OnClick="labNextPage_Click">下一页</asp:LinkButton>
 |<asp:LinkButton runat="server" ID="labLastPage" OnClick="labLastPage_Click">尾页</asp:LinkButton>
 </span>
 <span class="pager-m-l">跳至<asp:TextBox runat="server" ID="txtPageNum" CssClass="pager-form-control pager-num">1</asp:TextBox>页
 <asp:Button runat="server" Text="GO" ID="btnGo" CssClass="btn btn-default" OnClick="btnGo_Click" /></span>
 <span class="pager-m-l">
 <asp:DropDownList runat="server" ID="ddlPageSize" CssClass="pager-form-control" AutoPostBack="true" OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged">
  <asp:ListItem Text="10" Value="10"></asp:ListItem>
  <asp:ListItem Text="20" Value="20"></asp:ListItem>
  <asp:ListItem Text="30" Value="30"></asp:ListItem>
  <asp:ListItem Text="50" Value="50"></asp:ListItem>
  <asp:ListItem Text="100" Value="100"></asp:ListItem>
 </asp:DropDownList>条/每页</span>
</div>

自定义分页控件后台代码：

private const string viewStateCurrentPageIndex = "CurrentPageIndex";
 private const string viewStateRecordCount = "RecordCount";

 public delegate void PageChangedHandle();
 public event PageChangedHandle OnPageChanged;

 public int PageSize
 {
  get
  {
  return Convert.ToInt32(ddlPageSize.SelectedValue);
  }
 }

 public int CurrentPageIndex
 {
  set
  {
  ViewState[viewStateCurrentPageIndex] = value;
  }
  get
  {
  if (ViewState[viewStateCurrentPageIndex] == null)
  {
   ViewState[viewStateCurrentPageIndex] = 1;
  }

  return Convert.ToInt32(ViewState[viewStateCurrentPageIndex]);
  }
 }
 public int RecordCount
 {
  get
  {
  if (ViewState[viewStateRecordCount] == null)
  {
   ViewState[viewStateRecordCount] = 0;
  }

  return Convert.ToInt32(ViewState[viewStateRecordCount]);
  }
  set
  {
  ViewState[viewStateRecordCount] = value;
  }
 }
 private int TotalNumberOfPages
 {
  get
  {
  return RecordCount % PageSize == 0 ? RecordCount / PageSize : (RecordCount / PageSize) + 1;
  }
 }

 protected void Page_Load(object sender, EventArgs e)
 {
  if (!IsPostBack)
  {

  }
 }

 protected void labFirstPage_Click(object sender, EventArgs e)
 {
  CurrentPageIndex = 1;

  this.DataBind();
 }

 protected void labPreviousPage_Click(object sender, EventArgs e)
 {
  CurrentPageIndex -= 1;

  this.DataBind();
 }

 protected void labNextPage_Click(object sender, EventArgs e)
 {
  CurrentPageIndex += 1;

  this.DataBind();
 }

 protected void labLastPage_Click(object sender, EventArgs e)
 {
  CurrentPageIndex = TotalNumberOfPages;

  this.DataBind();
 }

 protected void btnGo_Click(object sender, EventArgs e)
 {
  int pageNum = 1;
  bool isNum = Int32.TryParse(txtPageNum.Text, out pageNum);
  if (isNum)
  {
  CurrentPageIndex = Math.Min(pageNum, TotalNumberOfPages);
  }

  this.DataBind();
 }

 protected void ddlPageSize_SelectedIndexChanged(object sender, EventArgs e)
 {
  CurrentPageIndex = 1;

  this.DataBind();
 }

 protected override void DataBind(bool raiseOnDataBinding)
 {
  BindPager();
  base.DataBind(raiseOnDataBinding);

  if (OnPageChanged != null)
  {
  OnPageChanged();
  }
 }

 private void BindPager()
 {
  labCurrentPageIndex.Text = CurrentPageIndex.ToString();
  labTotalNumberOfPages.Text = TotalNumberOfPages.ToString();
  labRecordCount.Text = RecordCount.ToString();

  SetNavigateEnabled();
 } 

 private void SetNavigateEnabled()
 {
  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记录状态信息，因为导航控件会引起回发刷新。
分页后的数据加载，使用事件。

事件的具体实现放在使用分页控件的具体页面中，进行事件的注册。

测试分页控件的前台页面：

<div style="margin-bottom:10px;">
 text:
 <asp:TextBox ID="txtContent" runat="server"></asp:TextBox>
 <asp:Button ID="btnQuery" runat="server" Text="查 询" OnClick="btnQuery_Click"/>
 </div>
 <div>
 <asp:GridView ID="gvList" runat="server" Width="99%" AutoGenerateColumns="true"></asp:GridView>
 <uc1:PagerControl runat="server" ID="Pager" />
</div>

测试分页控件的后台代码：

 private const string dtSourceViewStateKey = "dtSourceViewStateKey";

 protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
 BindData(true);

 }
 Pager.OnPageChanged += OnPageChanged;
 }

 private void BindData(bool bindRecordCount)
 {
 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();
 }

 private void OnPageChanged()
 {
 BindData(false);
 }

 private DataTable InitDataTable()
 {
 DataTable dtSource = new DataTable();
 DataColumn id = new DataColumn("id");
 id.AutoIncrement = true;
 id.AutoIncrementSeed = 1;

 dtSource.Columns.Add(id);
 dtSource.Columns.Add("text");

 for (int i = 1; i <= 1000; i++)
 {
 DataRow dr = dtSource.NewRow();
 dr["text"] = "内容" + i;

 dtSource.Rows.Add(dr);
 }

 return dtSource;
 }

 private DataTable GetDataSource()
 {
 if (ViewState[dtSourceViewStateKey] == null)
 {
 ViewState[dtSourceViewStateKey] = InitDataTable();
 }

 return ViewState[dtSourceViewStateKey] as DataTable;
 }

 protected void btnQuery_Click(object sender, EventArgs e)
 {
 BindData(true);
 }

在Page_Load中注册翻页后的事件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持路饭。

推荐阅读