您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

ASP.NET 自訂分頁控制項開發實戰：功能豐富、支援 Ajax/URL 重寫的 YsmPager

編輯：ASP.NET 基礎

控制項特色

參考 aspnetpager 開發的輕量級分頁控制項 YsmPager，核心功能：

三種分頁模式：PostBack、URL 參數、URL 重寫
Ajax 無刷新分頁：放入 UpdatePanel 即可運作
高度可客製化樣式：CSS Class 完全分離
跳頁輸入框、首末頁、上下頁、頁碼顯示 可獨立開關

安裝與註冊


<!-- 頁面註冊 -->
<%@ Register Assembly="YSM.AspNetPager" Namespace="YSM.AspNetPager" TagPrefix="cc1" %>

<!-- 或 web.config 全域註冊 -->
<system.web>
  <pages>
    <controls>
      <add tagPrefix="cc1" namespace="YSM.AspNetPager" assembly="YSM.AspNetPager" />
    </controls>
  </pages>
</system.web>

三種分頁模式範例

1. PostBack 模式（預設，配合 UpdatePanel 實現 Ajax）


<cc1:YsmPager ID="YsmPager1" runat="server" 
    PageSize="10" 
    OnPageChanged="YsmPager1_PageChanged"
    CssClass="yahoo"
    CurrentPageButtonClass="current"
    DisabledButtonClass="disabled" />


// 後端
protected void YsmPager1_PageChanged(object sender, EventArgs e)
{
    int page = YsmPager1.CurrentPageIndex; // 1-based
    BindGrid(page);
}

2. URL 參數模式（支援書籤、SEO 友善）


<cc1:YsmPager ID="YsmPager2" runat="server" 
    PageSize="10" 
    UrlPaging="true" 
    UrlPageIndexName="page" />

產生連結如：/ProductList.aspx?page=3。後端讀取 Request.QueryString["page"] 即可。

3. URL 重寫模式（最佳 SEO，靜態化外觀）


<cc1:YsmPager ID="YsmPager3" runat="server" 
    PageSize="10" 
    UrlRewriting="true" 
    UrlRewritePattern="product-list-{0}-cid{1}.html" />

模板語法：

{0}：自動替換為頁碼
[參數名]：保留其他查詢參數，如 cid、keyword

產生連結：/product-list-3-cid5.html。需配合 IIS URL Rewrite 模組或 `Global.asax` 路由對應回實體頁面。

核心屬性速查表

屬性	型別	預設值	說明
`PageSize`	int	10	每頁筆數
`CurrentPageIndex`	int	1	當前頁碼 (1-based)
`RecordCount`	int	0	必填：總筆數，決定總頁數與導覽顯示
`PageCount`	int	唯讀	總頁數 = Ceiling(RecordCount / PageSize)
`UrlPaging`	bool	false	啟用 URL 參數分頁
`UrlPageIndexName`	string	"page"	URL 參數名稱
`UrlRewriting`	bool	false	啟用 URL 重寫（自動開啟 UrlPaging）
`UrlRewritePattern`	string	null	重寫模板，含 `{0}` 與 `[參數]`
`CssClass`	string	null	最外層容器 CSS Class
`CurrentPageButtonClass`	string	null	當前頁按鈕 CSS Class
`DisabledButtonClass`	string	null	禁用按鈕（首頁/上一頁在第一頁時）CSS Class
`ShowJumpBox`	bool	true	是否顯示跳頁輸入框

後端必要配合：設定 RecordCount


private void BindGrid(int pageIndex = 1)
{
    int pageSize = YsmPager1.PageSize;
    int totalCount;
    
    // 1. 查詢當頁資料（資料庫分頁）
    var data = GetProducts(pageIndex, pageSize, out totalCount);
    
    // 2. 綁定 GridView/Repeater
    GridView1.DataSource = data;
    GridView1.DataBind();
    
    // 3. 關鍵：設定總筆數，控制項才會正確產生分頁 UI
    YsmPager1.RecordCount = totalCount;
    YsmPager1.CurrentPageIndex = pageIndex; // 同步當前頁（PostBack 模式下通常自動維護）
}

樣式客製化範例


/* Yahoo 風格 */
.yahoo { font-family: Arial; font-size: 12px; padding: 5px; }
.yahoo a, .yahoo span { display: inline-block; padding: 2px 6px; margin: 0 2px; border: 1px solid #ccc; text-decoration: none; color: #333; }
.yahoo .current { background: #333; color: #fff; border-color: #333; font-weight: bold; }
.yahoo .disabled { color: #999; border-color: #eee; cursor: not-allowed; }
.yahoo .jump-box { width: 30px; text-align: center; }