ASP.NET 3.5 ListView 控件進階技巧：巢狀分層選單、自訂事件模型與多模板繫結

ListView 是 ASP.NET 3.5 引入的最強資料控件：完全掌控 HTML 輸出、內建分頁/排序/編輯、支援 DataPager、模板豐富。本文深入三大進階主題：**巢狀 ListView 建構多層選單**、**繼承擴展事件模型實現「資料驅動多模板」**、**CSS 友好輸出優於 Menu 控件的表格佈局**。

巢狀 ListView 實現多層垂直選單

資料結構：List，MenuItem 含 Children 屬性 (遞迴)。

<asp:ListView ID="lvlMenu" runat="server" DataSource="<%# GetRootMenus() %>">
    <LayoutTemplate>
        <ul id="menu-root" class="vertical-menu">
            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li>
            <a href="<%# Eval('Url') %>"><%# Eval('Text') %></a>
            <!-- 遞迴巢狀 ListView -->
            <asp:ListView ID="lvlSubMenu" runat="server" 
                DataSource="<%# Eval('Children') %>" 
                Visible='<%# ((List<MenuItem>)Eval("Children")).Count > 0 %>'>
                <LayoutTemplate>
                    <ul class="sub-menu">
                        <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                    </ul>
                </LayoutTemplate>
                <ItemTemplate>
                    <li><a href="<%# Eval('Url') %>"><%# Eval('Text') %></a></li>
                </ItemTemplate>
            </asp:ListView>
        </li>
    </ItemTemplate>
</asp:ListView>

後端遞迴繫結：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) lvlMenu.DataBind(); // 巢狀子控件會自動觸發 DataBind
}

擴展事件模型：資料驅動多模板 (超越 ItemDataBound)

預設 ItemDataBound 僅能修改樣式/屬性，**無法切換整個模板結構**。解決方案：繼承 ListView，覆寫 CreateItem 依資料動態決定模板。

public class SmartListView : ListView
{
    // 註冊模板選擇器委派
    public Func TemplateSelector { get; set; }

    protected override ListViewItem CreateItem(int itemIndex, ListViewItemType itemType)
    {
        if (itemType == ListViewItemType.DataItem && TemplateSelector != null)
        {
            // 取得該項資料 (需在 DataBinding 階段暫存)
            object dataItem = GetDataItem(itemIndex); // 需自行實作索引對應
            string templateName = TemplateSelector(dataItem); // 回傳 "TemplateA", "TemplateB"...

            // 動態載入對應模板
            ITemplate template = (ITemplate)Page.LoadTemplate($"~/Templates/{templateName}.ascx");
            if (template != null)
            {
                var item = new ListViewDataItem(itemIndex, itemType);
                template.InstantiateIn(item);
                return item;
            }
        }
        return base.CreateItem(itemIndex, itemType);
    }
}

使用範例：

// 頁面
lvProducts.TemplateSelector = item => 
{
    var p = (Product)item;
    if (p.IsFeatured) return "FeaturedProduct";
    if (p.IsOnSale) return "SaleProduct";
    return "NormalProduct";
};

CSS 友好輸出優勢

結語

ListView 不只是 DataList 的加強版，更是**「HTML 掌控權回歸開發者」**的里程碑。善用巢狀模板建構分層 UI、繼承擴展實現資料驅動多模板、配合現代 CSS 打造無障礙響應式選單，是 ASP.NET Web Forms 時代的最佳實踐典範。