ASP.NET DataList 中 LinkButton 單選高亮效果實現

需求場景

在 asp:DataList 繪製的 LinkButton 列表中，點擊某項後該項背景變色，其餘項恢復默認樣式，實現單選視覺反饋。

核心思路：後端狀態 + 前端樣式

1. 使用 CommandName="Select" 觸發 SelectedIndexChanged 事件。
2. 在 ItemDataBound 中根據 DataList.SelectedIndex 動態添加 CSS 類。
3. CSS 定義 .selected { background-color: #ff0; } 樣式。

完整代碼示例

<asp:DataList ID="dtCarTypeTop10" runat="server" 
    OnItemCommand="dtCarTypeTop10_ItemCommand"
    OnItemDataBound="dtCarTypeTop10_ItemDataBound"
    OnSelectedIndexChanged="dtCarTypeTop10_SelectedIndexChanged">
    <ItemTemplate>
        <div id="divCarType" runat="server">
            <asp:LinkButton ID="lbtTypeName" runat="server" 
                Text='<%# Eval("typename") %>'
                CommandName="Select"
                CommandArgument='<%# Eval("id") %>'>
            </asp:LinkButton>
        </div>
    </ItemTemplate>
</asp:DataList>

protected void dtCarTypeTop10_ItemCommand(object source, DataListCommandEventArgs e)
{
    if (e.CommandName == "Select")
    {
        dtCarTypeTop10.SelectedIndex = e.Item.ItemIndex;
        dtCarTypeTop10.DataBind(); // 重新綁定觸發 ItemDataBound
    }
}

protected void dtCarTypeTop10_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var div = (HtmlGenericControl)e.Item.FindControl("divCarType");
        if (e.Item.ItemIndex == dtCarTypeTop10.SelectedIndex)
            div.Attributes["class"] = "selected";
        else
            div.Attributes["class"] = "";
    }
}

.selected { background-color: #fff3cd; border-radius: 4px; }

進階：純前端實現（無 Postback）

若不想刷新頁面，可用 jQuery：

$("#dtCarTypeTop10 a").click(function() {
    $("#dtCarTypeTop10 a").removeClass("selected");
    $(this).addClass("selected");
    // 可選：AJAX 提交 CommandArgument
});

注意事項

• DataList 無內建 SelectedItemStyle，需手動控制。
• 若使用 UpdatePanel 局部刷新，確保 Trigger 正確。
• 大數據量時建議改用 ListView 或 Repeater + CSS Flex/Grid 布局。