ASP.NET 文章內容分頁顯示元件 (純後端實作)

針對長文章內容，在伺服器端依指定字數切分分頁，支援頁碼導航、上下頁跳轉，適合無前端框架的傳統 WebForm 專案。

核心分頁邏輯：OutputBySize

public string OutputBySize(string content)
{
    if (string.IsNullOrEmpty(content)) return string.Empty;

    const int pageSize = 200; // 每頁字元數
    int totalLen = content.Length;
    int totalPages = (totalLen + pageSize - 1) / pageSize; // 向上取整

    // 取得當前頁碼 (QueryString ps)
    int currentPage = 1;
    if (!string.IsNullOrEmpty(Request.QueryString["ps"]))
    {
        int.TryParse(Request.QueryString["ps"], out currentPage);
        currentPage = Math.Max(1, Math.Min(currentPage, totalPages));
    }

    // 計算擷取範圍
    int startIdx = (currentPage - 1) * pageSize;
    int len = Math.Min(pageSize, totalLen - startIdx);
    string pageContent = content.Substring(startIdx, len);

    // 產生分頁導航 HTML
    StringBuilder nav = new StringBuilder();
    if (currentPage > 1)
        nav.AppendFormat("上一頁 ", currentPage - 1);

    for (int i = 1; i <= totalPages; i++)
    {
        if (i == currentPage)
            nav.AppendFormat("[{0}] ", i);
        else
            nav.AppendFormat("[{0}] ", i);
    }

    if (currentPage < totalPages)
        nav.AppendFormat("下一頁", currentPage + 1);

    // 輸出至頁面控制項 (假設有 Literal 或 Label 名為 ShowPageNumber)
    ShowPageNumber.Text = "
" + nav.ToString();

    return pageContent;
}

頁面使用範例

protected void Page_Load(object sender, EventArgs e)
{
    string longArticle = @"事情發生在5月14日晚上23：30分...(長文內容)";
    ltContent.Text = OutputBySize(longArticle); // ltContent 為 Literal 控制項
}

ASPX 頁面配置

<asp:Literal ID="ltContent" runat="server" />
<br />
<asp:Literal ID="ShowPageNumber" runat="server" />

優化與擴充方向

• 支援 HTML 標籤完整性切分 (避免截斷 <div> 等標籤導致版面崩壞)。
• 加入快取機制，避免每次請求重新計算分頁。
• 改為 HttpHandler 或 WebMethod 配合 AJAX 無刷新換頁。
• 支援自訂頁面大小、SEO 友善 URL (如 /article/123/page/2)。