ASP.NET 打造多色彩下拉選單：KnownColor 列舉實戰

需求：下拉選單每個選項顯示對應顏色名稱與色塊。本文示範如何列舉 System.Drawing.KnownColor、排除系統色、繫結至 DropDownList 並以 JavaScript 即時預覽。

核心步驟

1. 取得 KnownColor 列舉值，過濾掉系統色（如 "ActiveBorder"）。
2. 將顏色名稱與 Color 物件建立對應清單。
3. 繫結至 DropDownList，並在 ItemDataBound 為每個 ListItem 加上 style="background-color:..."。
4. 前端用 div 顯示大色塊，onchange 事件切換預覽。

前端標記

<table>
  <tr>
    <td>
      <asp:DropDownList ID="ddlMultiColor" runat="server"
          AutoPostBack="true"
          OnSelectedIndexChanged="ddlMultiColor_OnSelectedIndexChanged">
      </asp:DropDownList>
    </td>
    <td>
      <div id="msgColor" runat="server" style="width:50px;height:20px;border:1px solid gray;"></div>
    </td>
  </tr>
</table>

後端程式碼 (C#)

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Collections.Generic;

public partial class ColorDemo : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            PopulateDdlMultiColor();
            ColorManipulation();
        }
    }

    private void PopulateDdlMultiColor()
    {
        ddlMultiColor.DataSource = GetFinalColorList();
        ddlMultiColor.DataTextField = "Name";
        ddlMultiColor.DataValueField = "Value"; // 儲存 Color.ToArgb() 整數
        ddlMultiColor.DataBind();
    }

    private List GetFinalColorList()
    {
        var list = new List();
        foreach (KnownColor kc in Enum.GetValues(typeof(KnownColor)))
        {
            // 排除系統色（已知系統色範圍）
            if (kc >= KnownColor.ActiveBorder && kc <= KnownColor.WindowText) continue;
            Color c = Color.FromKnownColor(kc);
            list.Add(new ColorItem { Name = kc.ToString(), Value = c.ToArgb() });
        }
        return list;
    }

    protected void ddlMultiColor_OnSelectedIndexChanged(object sender, EventArgs e)
    {
        ColorManipulation();
    }

    private void ColorManipulation()
    {
        if (ddlMultiColor.SelectedItem != null)
        {
            int argb = int.Parse(ddlMultiColor.SelectedValue);
            Color c = Color.FromArgb(argb);
            msgColor.Style["background-color"] = ColorTranslator.ToHtml(c);
        }
    }

    class ColorItem { public string Name { get; set; } public int Value { get; set; } }
}

關鍵技巧

• Enum.GetValues(typeof(KnownColor)) 取得所有已知顏色。
• 系統色範圍 ActiveBorder ~ WindowText 需排除，否則下拉清單會出現大量灰階系統色。
• 將 Color.ToArgb() 存入 ListItem.Value，前端/後端皆可還原 Color 物件。
• 使用 ColorTranslator.ToHtml() 產生 CSS 相容的十六進位色碼。