ASP.NET 通用分頁元件改進版：支援多種模式與樣式擴展

分頁是 Web 應用最基礎也最常見的功能。內建 GridView 分頁雖方便，但自訂性差、難套用既有樣式、無法用於 Repeater/DataList 等控制項。本文提供一個可擴展、樣式分離、支援多種顯示模式的通用分頁輔助類 AspNetPager。

核心設計：列舉驅動模式與對齊

// 分頁模式
public enum PagerModule
{
    Normal = 1,      // 一般數字分頁
    Statistics = 2   // 含統計資訊（總筆數、總頁數、目前頁）
}

// 表格對齊
public enum TbAlignEnum
{
    Left = 1,
    Center = 2,
    Right = 3
}

靜態輔助類完整實作

public sealed class AspNetPager
{
    #region 共用計算
    private const string DefaultAlign = "center";
    private const string LeftAlign = "left";
    private const string RightAlign = "right";

    public static int GetPageCount(int totalCount, int pageSize)
    {
        if (pageSize == 0) return 0;
        return (int)Math.Ceiling((double)totalCount / pageSize);
    }
    #endregion

    #region 對外輸出入口
    /// 
輸出分頁導航（無表格包裹）
    public static void RenderPager(PagerModule mode, HttpResponse response,
        int totalCount, int currentPage, int pageSize, string baseUrl) { ... }

    /// 
輸出分頁導航（表格包裹，可指定對齊）
    public static void RenderTablePager(PagerModule mode, TbAlignEnum align,
        HttpResponse response, int totalCount, int currentPage, int pageSize, string baseUrl) { ... }
    #endregion

    #region 核心產生邏輯
    private static string CreateLinkUrl(string baseUrl, int pageCount, int currentPage, int pageSize)
    {
        // 產生：首頁、上一頁、頁碼範圍、下一頁、尾頁
        // 目前頁紅色高亮、不可用連結灰色禁用
    }

    private static string CreateStatisticLinkUrl(string baseUrl, int totalCount, int pageCount, 
        int currentPage, int pageSize)
    {
        // 先輸出統計資訊，再接一般分頁
        return $"總共{totalCount}筆，共{pageCount}頁，目前第{currentPage}頁  " 
             + CreateLinkUrl(baseUrl, pageCount, currentPage, pageSize);
    }
    #endregion
}

頁面呼叫範例

<%@ Import Namespace="DotNet.Common.WebForm" %>
<%-- 一般模式，靠右對齊 --%>
<% DotNet.Common.WebForm.AspNetPager.RenderTablePager(
        PagerModule.Normal, TbAlignEnum.Right, 
        Response, 93, 10, 10, "Pager.aspx"); %>

關鍵改進點

CSS 風格範例（三種）

/* 網易風格 */
.anpager .cpb { background:#1F3A87; border:1px solid #CCC; color:#FFF; font-weight:bold; margin:5px 4px 0 0; padding:4px 5px 0; }
.anpager a { background:#FFF; border:1px solid #CCC; color:#1F3A87; margin:5px 4px 0 0; padding:4px 5px 0; text-decoration:none; }
.anpager a:hover { background:#1F3A87; border:1px solid #1F3A87; color:#FFF; }

/* 拍拍網風格 */
.paginator { font:11px Arial; padding:10px 20px 10px 0; }
.paginator a { padding:1px 6px; border:1px solid #DDD; background:#FFF; text-decoration:none; margin-right:2px; }
.paginator .cpb { padding:1px 6px; font-weight:bold; font-size:13px; border:none; }
.paginator a:hover { color:#FFF; background:#FFA501; border-color:#FFA501; }

/* 迅雷風格 */
.pages { color:#999; }
.pages a, .pages .cpb { float:left; padding:0 5px; border:1px solid #DDD; background:#FFF; margin:0 2px; font-size:11px; color:#000; text-decoration:none; }
.pages a:hover { background:#E61636; color:#FFF; border:1px solid #E61636; }
.pages .cpb { font-weight:bold; color:#FFF; background:#E61636; border:1px solid #E61636; }

使用方式

在頁面引用 CSS，設定 CssClass="anpager"、CurrentPageButtonClass="cpb" 即可套用對應風格，完全不修改後端代碼。

擴展建議

• 加入 PageIndexBoxType（文字框/下拉框直接跳頁）
• 支援 AJAX 分頁（輸出 JSON、配合前端 JS 渲染）
• 加入 UrlBuilder 委派自訂連結產生邏輯
• 輸出語意化 HTML5 <nav> 標籤

此改進版分頁元件在保持零依賴、輕量級的前提下，大幅提升彈性與維護性，適合各類 ASP.NET WebForms 專案直接採用或二次開發。