asp.net webform自定义分页控件

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

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

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

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

<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中注册翻页后的事件。

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