程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> asp.net webform 自定義分頁控件，asp.netwebform

asp.net webform 自定義分頁控件，asp.netwebform

編輯：關於.NET

asp.net webform 自定義分頁控件，asp.netwebform

做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 >
            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中注冊翻頁後的事件。