asp.net webform 自定義分頁控制項

来源:http://www.cnblogs.com/tanpeng/archive/2016/12/26/6223036.html
-Advertisement-
Play Games

做web開發一直用到分頁控制項，自己也動手實現了個，使用用戶自定義控制項。 翻頁後數據載入使用委托，將具體實現放在在使用分頁控制項的頁面進行註冊。 有圖有真相，給個直觀的認識： 自定義分頁控制項前臺代碼： 自定義分頁控制項後臺代碼： 當前頁碼、總共多少條記錄使用ViewState記錄狀態信息，因為導航控制項會引 ...


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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • C#WebBrowrse攔截下載對話框
    為了實現這個功能,可算是折騰不少時間，網上搜素出來的結果基本都是如何屏蔽警告對話框。後來請教一個技術大牛（程式員之窗的主要作者Starts_2000），他用C++實現了，他嘗試了下C#也沒有解決,就忙其他的去，大牛時間一般都比較寶貴，後來我就將就用那個C++動態庫，那個時候我測試環境是 win7 6 ...
  • Entity Framework 教程——模型瀏覽器
    模型瀏覽器： 在之前的章節中，我們創建了第一個關於學校的實體數據模型。但是EDM設計器並沒有將他所創建的所有對象完全顯示出來。它只將資料庫中的被選擇的表與視圖顯示出來了。 模型瀏覽器可以將EDM所創建的所有對象和函數的信息都顯示出來。右鍵EDM設計器併在菜單中選擇模型瀏覽器即可打開。 模型瀏覽器包含 ...
  • webapi - 模型驗證
    本次要和大家分享的是webapi的模型驗證，講解的內容可能不單單是做驗證，但都是圍繞模型來說明的；首先來吐槽下，今天下午老闆為自己買了套新辦公傢具，看起來挺好說明老闆有錢，不好的是我們乾技術的又成了搬運工(誰叫技術部男的多呢哈哈)，話說讓我們搬點兒什麼小座椅板凳就夠了吧，為什麼4大箱的傢具都讓我們動 ...
  • Navisworks 提供了.NET, COM和NwCreate 三種API
    Navisworks 提供了.NET, COM和NwCreate 三種API。而通常我們說Navisworks API其實指的只是COM或.NET，因為NwCreate的功能比較特殊。待我一一道來： COM API: 這是很早很早以前就提供的介面。COM有多老基本它就有多老了。它能完成大部分產品里有 ...
  • 怎樣在Redis通過StackExchange.Redis 存儲集合類型List
    StackExchange 是由StackOverFlow出品， 是對Redis的.NET封裝，被越來越多的.NET開發者使用在項目中。 絕大部分原先使用ServiceStack的開發者逐漸都轉了過來，由於SS在其新版中不再開源，並對免費版本有所限制。 實際問題 那麼用.NET的開發者會發現，其根本 ...
  • 在DevExpress程式中使用Winform分頁控制項直接錄入數據並保存
    一般情況下，我們都傾向於使用一個組織比較好的獨立界面來錄入或者展示相關的數據，這樣處理比較規範，也方便顯示比較複雜的數據。不過在一些情況下，我們也可能需要直接在GridView表格上直接錄入或者修改數據，這種對於欄位比較少，而且內容相對比較簡單的情況下，效率是比較高的一種輸入方式。本篇隨筆主要介紹在... ...
  • 為什麼程式需要記錄日誌
    記錄用戶的操作 程式的異常堆棧記錄 為數據分析提供依據 "Logging日誌記錄最佳實踐：https://www.oschina.net/question/12_44624" "寫給開發者：記錄日誌的10個建議:http://blog.jobbole.com/52018/" "NLog:http:/ ...
  • 控制反轉、依賴註入、Unity容器
    "控制反轉原則" "依賴註入" Install Package Unity: "https://www.nuget.org/packages/Unity/" "Github:https://github.com/unitycontainer/unity" Dependency Injection w ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類