ASP.NET Web Forms DataList 控制項完整指南：XML 繫結、樣式客製化、AlternatingItemTemplate 與分頁

DataList 是功能豐富的資料繫結控制項，預設以 <table> 結構渲染重複項目，支援多種樣式屬性、交替項目模板、編輯/刪除/選取命令事件，適合呈現製品目錄、相簿等網格式資料。

DataList 核心模板結構

<asp:DataList ID="dlProducts" runat="server">
    <HeaderTemplate>      <!-- 渲染一次，最上方 --> </HeaderTemplate>
    <ItemTemplate>        <!-- 每筆資料重複渲染 --> </ItemTemplate>
    <AlternatingItemTemplate> <!-- 交替項目（偶數行） --> </AlternatingItemTemplate>
    <SelectedItemTemplate>    <!-- 選取項目樣式 --> </SelectedItemTemplate>
    <EditItemTemplate>        <!-- 編輯模式樣式 --> </EditItemTemplate>
    <SeparatorTemplate>       <!-- 項目間分隔符 --> </SeparatorTemplate>
    <FooterTemplate>          <!-- 渲染一次，最下方 --> </FooterTemplate>
</asp:DataList>

XML 資料繫結完整範例

1. 範例 XML 資料 (cdcatalog.xml)

<?xml version="1.0" encoding="utf-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
  <cd>
    <title>Hide your heart</title>
    <artist>Bonnie Tyler</artist>
    <country>UK</country>
    <company>CBS Records</company>
    <price>9.90</price>
    <year>1988</year>
  </cd>
  <!-- 更多資料... -->
</catalog>

2. 後端程式碼：讀取 XML 並繫結

<%@ Import Namespace="System.Data" %>
<script runat="server">
    void Page_Load() {
        if (!IsPostBack) {
            DataSet ds = new DataSet();
            ds.ReadXml(Server.MapPath("~/App_Data/cdcatalog.xml"));
            dlCatalog.DataSource = ds;
            dlCatalog.DataBind();
        }
    }
</script>

3. 前端 DataList 宣告與模板

<asp:DataList ID="dlCatalog" runat="server" 
    GridLines="Both" 
    CellPadding="3" 
    CellSpacing="0">
    
    <HeaderTemplate>
        <tr style="background:#336699; color:white; font-weight:bold;">
            <td colspan="3">我的 CD 目錄</td>
        </tr>
    </HeaderTemplate>
    
    <ItemTemplate>
        <tr>
            <td><%# Eval("title") %></td>
            <td><%# Eval("artist") %></td>
            <td>$<%# Eval("price") %></td>
        </tr>
    </ItemTemplate>
    
    <FooterTemplate>
        <tr><td colspan="3" align="center">Copyright © 2024</td></tr>
    </FooterTemplate>
</asp:DataList>

進階樣式客製化

DataList 提供豐富的樣式屬性，可直接在標籤設定：

<asp:DataList ID="dlCatalog" runat="server"
    BackColor="#e8e8e8"
    BorderStyle="Inset"
    BorderWidth="1px"
    CellPadding="4"
    CellSpacing="2"
    Width="100%"
    GridLines="Both"
    HeaderStyle-Font-Name="Verdana"
    HeaderStyle-Font-Size="14pt"
    HeaderStyle-Font-Bold="true"
    HeaderStyle-BackColor="#336699"
    HeaderStyle-ForeColor="White"
    HeaderStyle-HorizontalAlign="Center"
    ItemStyle-BackColor="#778899"
    ItemStyle-ForeColor="White"
    AlternatingItemStyle-BackColor="#e8e8e8"
    AlternatingItemStyle-ForeColor="Black"
    FooterStyle-Font-Size="10pt"
    FooterStyle-Font-Italic="true"
    FooterStyle-HorizontalAlign="Center">

樣式屬性分類速查

AlternatingItemTemplate 實作斑馬紋效果

<ItemTemplate>
    <tr class="item-row">
        <td><%# Eval("title") %></td>
        <td><%# Eval("artist") %></td>
        <td>$<%# Eval("price") %></td>
    </tr>
</ItemTemplate>

<AlternatingItemTemplate>
    <tr class="alt-row">
        <td><%# Eval("title") %></td>
        <td><%# Eval("artist") %></td>
        <td>$<%# Eval("price") %></td>
    </tr>
</AlternatingItemTemplate>

搭配 CSS：.item-row { background:#fff; } .alt-row { background:#f5f5f5; } 效果更佳且易維護。

DataList 互動功能：選取、編輯、刪除

啟用選取功能

<asp:DataList ID="dlCatalog" runat="server" 
    DataKeyField="id" 
    OnSelectedIndexChanged="dlCatalog_SelectedIndexChanged"
    OnEditCommand="dlCatalog_EditCommand"
    OnUpdateCommand="dlCatalog_UpdateCommand"
    OnCancelCommand="dlCatalog_CancelCommand"
    OnDeleteCommand="dlCatalog_DeleteCommand">
    
    <ItemTemplate>
        <tr>
            <td><%# Eval("title") %></td>
            <td><asp:LinkButton CommandName="Select" Text="選取" runat="server" /></td>
            <td><asp:LinkButton CommandName="Edit" Text="編輯" runat="server" /></td>
            <td><asp:LinkButton CommandName="Delete" Text="刪除" runat="server" 
                OnClientClick="return confirm('確定刪除？');" /></td>
        </tr>
    </ItemTemplate>
    
    <SelectedItemTemplate>
        <tr style="background:#ffffcc;">
            <td><%# Eval("title") %></td>
            <td colspan="3">已選取：<%# Eval("artist") %></td>
        </tr>
    </SelectedItemTemplate>
    
    <EditItemTemplate>
        <tr>
            <td><asp:TextBox ID="txtTitle" Text='<%# Eval("title") %>' runat="server" /></td>
            <td><asp:TextBox ID="txtArtist" Text='<%# Eval("artist") %>' runat="server" /></td>
            <td><asp:LinkButton CommandName="Update" Text="更新" runat="server" /></td>
            <td><asp:LinkButton CommandName="Cancel" Text="取消" runat="server" /></td>
        </tr>
    </EditItemTemplate>
</asp:DataList>

後端事件處理

void dlCatalog_EditCommand(object source, DataListCommandEventArgs e) {
    dlCatalog.EditItemIndex = e.Item.ItemIndex;
    BindData(); // 重新繫結
}

void dlCatalog_UpdateCommand(object source, DataListCommandEventArgs e) {
    TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle");
    TextBox txtArtist = (TextBox)e.Item.FindControl("txtArtist");
    string id = dlCatalog.DataKeys[e.Item.ItemIndex].ToString();
    
    // 執行資料庫更新...
    
    dlCatalog.EditItemIndex = -1;
    BindData();
}

void dlCatalog_DeleteCommand(object source, DataListCommandEventArgs e) {
    string id = dlCatalog.DataKeys[e.Item.ItemIndex].ToString();
    // 執行資料庫刪除...
    BindData();
}

DataList vs Repeater vs GridView 比較

常見問題排查

• 資料不顯示：檢查 DataSource 資料集是否有 Table、DataBind() 是否呼叫、XPath/欄位名稱拼寫
• 樣式不生效：CSS 類別衝突、GridLines 與 CSS border 衝突、樣式屬性前綴拼寫錯誤
• 編輯模式不進入：DataKeyField 未設定、CommandName 拼寫錯誤（區分大小寫）、EditItemIndex 未重置
• 分頁需自行實作：DataList 無內建分頁，需配合 PagedDataSource 或自訂分頁邏輯

DataList 以表格導向渲染與豐富樣式屬性，是介於 Repeater 輕量與 GridView 重型之間的優選方案。下一節將深入探討 Repeater 控制項的極致客製化能力。