zoukankan      html  css  js  c++  java
  • 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中注册翻页后的事件。

  • 相关阅读:
    【娱乐向】制作Chrome天气预报扩展程序
    WCF入门四[WCF的通信模式]
    WCF入门三[WCF宿主]
    WCF入门二[WCF的配置文件]
    WCF入门一[WCF概述]
    通过Aspose.Word和ZXING生成复杂的WORD表格
    Dapper.Extension的基本使用
    startUML常用的组合片段
    Sublime Text 2 配置及其使用
    计算机领域会议汇总
  • 原文地址:https://www.cnblogs.com/tanpeng/p/6223036.html
Copyright © 2011-2022 走看看