ASP.NET 分頁技術全解析：SQL 分頁、PagedDataSource 與 AspNetPager 控制項

前言

分頁是 Web 應用程式的核心功能。本文系統整理三種主流分頁策略：

1. SQL 層面分頁：只撈取當頁資料，適合大量資料。
2. PagedDataSource：記憶體內分頁，適合中小型資料集。
3. AspNetPager 控制項：功能豐富的第三方分頁 UI 元件。

一、SQL 分頁（資料庫層面）

SQL Server 2012+ (OFFSET/FETCH)

SELECT * FROM News
ORDER BY CreateDate DESC
OFFSET @PageSize * (@PageIndex - 1) ROWS
FETCH NEXT @PageSize ROWS ONLY;

SQL Server 2008/2005 (ROW_NUMBER)

WITH CTE AS (
    SELECT *, ROW_NUMBER() OVER (ORDER BY CreateDate DESC) AS RowNum
    FROM News
)
SELECT * FROM CTE
WHERE RowNum BETWEEN @StartRow AND @EndRow;

MySQL / PostgreSQL

SELECT * FROM News
ORDER BY CreateDate DESC
LIMIT @PageSize OFFSET @Offset;

優缺點

二、PagedDataSource (記憶體內分頁)

var pds = new PagedDataSource
{
    DataSource = GetAllNews(), // 取回「所有」資料
    AllowPaging = true,
    PageSize = 16,
    CurrentPageIndex = CurrentPage - 1 // 0-based
};

rptNews.DataSource = pds;
rptNews.DataBind();

// 總頁數、總筆數
lblTotalPages.Text = pds.PageCount.ToString();
lblTotalRecords.Text = pds.DataSourceCount.ToString();

適用場景

• 資料筆數 < 20,000 筆
• 資料變動不頻繁，可快取 DataSource
• 快速原型開發、後台管理介面

三、AspNetPager 控制項整合

安裝與註冊

1. NuGet: Install-Package AspNetPager
2. 頁面註冊：<%@ Register Assembly="Wuqi.Webdiyer" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>

前端標記

<webdiyer:AspNetPager ID="anpNews" runat="server"
    PageSize="16"
    RecordCount="0" 
    NumericButtonCount="10"
    AlwaysShow="false"
    FirstPageText="首頁"
    PrevPageText="上一頁"
    NextPageText="下一頁"
    LastPageText="尾頁"
    CssClass="pagination"
    CurrentPageButtonClass="active"
    OnPageChanging="anpNews_PageChanging" />

後端邏輯

private int _pageIndex = 1;

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        _pageIndex = 1;
        BindData();
    }
}

protected void anpNews_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
{
    _pageIndex = e.NewPageIndex;
    BindData();
}

private void BindData()
{
    // 1. 只取當頁資料 (SQL 分頁)
    var list = NewsRepository.GetPage(_pageIndex, anpNews.PageSize);
    
    // 2. 設定總筆數給 AspNetPager
    anpNews.RecordCount = NewsRepository.GetTotalCount();
    
    // 3. 繫結 Repeater
    rptNews.DataSource = list;
    rptNews.DataBind();
}

四、AspNetPager 進階設定

URL Rewrite (SEO 友善)

anpNews.EnableUrlRewriting = true;
anpNews.UrlRewritePattern = "NewsList_{0}.aspx"; // 產生 NewsList_1.aspx, NewsList_2.aspx...

自訂樣式 (CSS)

.pagination { display: flex; gap: 4px; justify-content: center; margin: 20px 0; }
.pagination a, .pagination span {
    padding: 6px 12px; border: 1px solid #075198; color: #000; text-decoration: none;
}
.pagination a:hover { background: #075198; color: #fff; }
.pagination .active { background: #075198; color: #fff; font-weight: bold; border-color: #075198; }

五、GridView 內建分頁 vs AspNetPager

GridView 內建分頁 (AllowPaging="true") 同屬記憶體內分頁，資料量大時效能不佳。建議搭配 AspNetPager + PagedDataSource 或 SQL 分頁，將 GridView 當純顯示控制項：

protected void gvNews_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    gvNews.PageIndex = e.NewPageIndex;
    BindGridView(); // 重新繫結
}

六、最佳實務總結