富贵资源网

asp.net webform自定义分页控件
站长资源 2024/11/18 佚名
73 1538
富贵资源网 Design By www.hznty.com

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

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

富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
富贵资源网 Design By www.hznty.com