ComponentArt ComboBox 資料解析與前端渲染機制深度剖析

伺服器端資料格式

ComponentArt ComboBox 採用類 JSON 的巢狀陣列結構，範例：

ComboBox2.Data = [
  [['Text','a'],['Value','b']],
  [['Text','b'],['Value','c']],
  [['Text','c'],['Enabled',0],['Value','b']],
  [['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','ComboBoxItem1']],
  // ... 更多項目
];

每個項目為鍵值對陣列，支援 Text、Value、Enabled、CssClass、Id 等屬性。

伺服器端序列化邏輯

private string BuildStorage() 
{
    JavaScriptArray arNodeList = new JavaScriptArray();
    foreach (ComboBoxItem oItem in this.Items) 
    {
        ProcessItem(oItem, arNodeList);
    }
    return arNodeList.ToString();
}

private void ProcessItem(ComboBoxItem oItem, ArrayList arNodeList) 
{
    ArrayList itemProperties = new ArrayList();
    foreach (string propertyName in oItem.Properties.Keys) 
    {
        switch (propertyName.ToLower()) 
        {
            case "enabled":
                itemProperties.Add(new object[] { "Enabled", oItem.Enabled });
                break;
            default:
                itemProperties.Add(new object[] { propertyName, oItem.Properties[propertyName] });
                break;
        }
    }
    arNodeList.Add(itemProperties);
}

使用 JavaScriptArray 輔助類別將集合轉為客戶端可識別的陣列字串。

前端渲染流程

1. Initialize：元件初始化。
2. Render：呼叫 RenderDropDown。
3. RenderDropDown：迴圈呼叫 RenderItem 逐項呈現。

此遞迴渲染機制確保複雜下拉選單結構正確輸出至瀏覽器。