ASP.NET Repeater 實作新聞列表樣式完整範例

前言

Repeater 是 ASP.NET 最輕量的資料繫結控制項，適合需要高度客製化 HTML 輸出的場景。本文提供新聞列表的完整前後端範例，包含 Repeater 模板、CSS 樣式與資料繫結邏輯。

前端標記

<div class="news_list">
    <asp:Repeater ID="rptNews" runat="server">
        <ItemTemplate>
            <ul>
                <li>
                    <span><%# Eval("NTime", "{0:yyyy/MM/dd}") %></span>
                    <a href='NewsDetail.aspx?Type=1&id=<%# Eval("ID") %>&Page=0'>
                        &#xB7;<%# Eval("NTitle") %>
                    </a>
                </li>
            </ul>
        </ItemTemplate>
    </asp:Repeater>
</div>

CSS 樣式

.news_list {
    width: 752px;
    padding: 10px;
    line-height: 1.7;
    clear: both;
}
.news_list a:hover {
    color: #2C4900;
    font-weight: 700;
}
.news_list li {
    color: #0F5300;
    line-height: 28px;
    text-indent: 5px;
    border-bottom: 1px dashed #CFCFCF;
    list-style: none;
}
.news_list a {
    color: #0F5300;
    text-decoration: none;
}
.news_list span {
    color: #A3DC01;
    float: right;
    font-size: 0.9em;
}

後端資料繫結

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindNews();
    }
}

private void BindNews()
{
    // 範例資料來源，實際專案請替換為資料存取層
    var dt = GetNewsData(); // 回傳 DataTable，欄位：ID, NTitle, NTime
    rptNews.DataSource = dt;
    rptNews.DataBind();
}

private System.Data.DataTable GetNewsData()
{
    var dt = new System.Data.DataTable();
    dt.Columns.Add("ID", typeof(int));
    dt.Columns.Add("NTitle", typeof(string));
    dt.Columns.Add("NTime", typeof(DateTime));

    dt.Rows.Add(1, "ASP.NET Core 8 正式釋出", DateTime.Today);
    dt.Rows.Add(2, "C# 12 新功能介紹", DateTime.Today.AddDays(-1));
    dt.Rows.Add(3, "Blazor 應用程式部署指南", DateTime.Today.AddDays(-2));
    
    return dt;
}

進階技巧

1. 日期格式化：使用 Eval("NTime", "{0:yyyy/MM/dd}") 直接在模板格式化，避免 Convert.ToDateTime 拋出例外。
2. 防止 XSS：標題若含使用者輸入，建議搭配 HttpUtility.HtmlEncode 或使用 `<%#: ... %>` (ASP.NET 4.5+ 自動編碼)。
3. 分頁：搭配 PagedDataSource 或第三方分頁控制項（如 AspNetPager）實作分頁。
4. 效能優化：啟用輸出快取 OutputCache 或資料快取減少資料庫查詢。

完整頁面結構

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewsList.aspx.cs" Inherits="WebApp.NewsList" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>最新消息</title>
    <link rel="stylesheet" href="styles/news.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="news_list">
            <asp:Repeater ID="rptNews" runat="server">
                <ItemTemplate>
                    <ul><li>
                        <span><%# Eval("NTime", "{0:yyyy/MM/dd}") %></span>
                        <a href='NewsDetail.aspx?id=<%# Eval("ID") %>'>&#xB7;<%# Eval("NTitle") %></a>
                    </li></ul>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>