ASP.NET 2.0 自訂複合控件開發（進階篇）：客戶端排序、隱藏欄位同步與 ListMover 完整實作

2. 按鈕綁定 onclick 與隱藏欄位（RenderButtons / OnPreRender）

// RenderButtons 內
string upScript = $"MoveItemUp(document.all.{ClientID}); BuildItemList(document.all.{ClientID}, document.all.__{ClientID});";
output.AddAttribute("onclick", upScript);

// OnPreRender
protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    if (Page != null)
        Page.ClientScript.RegisterHiddenField("__" + ClientID, "");
}

3. 首次載入初始化隱藏欄位（Render 結尾）

output.Write($"");

伺服器端同步：重寫 LoadPostData

protected override bool LoadPostData(string postDataKey, NameValueCollection postCollection)
{
    base.LoadPostData(postDataKey, postCollection); // 保留 SelectedIndex 等
    string data = postCollection["__" + ClientID];
    if (!string.IsNullOrEmpty(data))
    {
        Items.Clear();
        foreach (var item in data.Split(new[]{';'}, StringSplitOptions.RemoveEmptyEntries))
        {
            var parts = item.Split('|');
            if (parts.Length == 2) Items.Add(new ListItem(parts[1], parts[0]));
        }
    }
    return true;
}

ListMover 複合控件完整實作

1. 子控件建立

protected override void CreateChildControls()
{
    lstLeft = new EnhancedListBox { ID = "lstLeft" };
    lstRight = new EnhancedListBox { ID = "lstRight" };
    btnAdd = new Button { ID = "btnAdd", Text = ">" };
    btnAddAll = new Button { ID = "btnAddAll", Text = ">>" };
    btnRemove = new Button { ID = "btnRemove", Text = "<" };
    btnRemoveAll = new Button { ID = "btnRemoveAll", Text = "<<" };
    Controls.AddRange(new Control[] { lstLeft, lstRight, btnAdd, btnAddAll, btnRemove, btnRemoveAll });
}

2. 客戶端移動腳本註冊與按鈕綁定

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    // 註冊 MoveItem、AddSelectedItemToList、RemoveSelectedItemFromList、BuildItemList 等函式
    // ...
}

protected override void CreateChildControls()
{
    // ... 建立子控件後
    string script = $"AddSelectedItemToList(document.all.{lstRight.ClientID}, document.all.{lstLeft.ClientID}, {AllowDuplicatesOnLeft.ToString().ToLower()}); " +
                    $"RemoveSelectedItemFromList(document.all.{lstRight.ClientID}); " +
                    $"BuildItemList(document.all.{lstRight.ClientID}, document.all.__{lstRight.ClientID}); " +
                    $"BuildItemList(document.all.{lstLeft.ClientID}, document.all.__{lstLeft.ClientID}); return false;";
    btnAdd.Attributes["onclick"] = script;
    // 其他按鈕類似
}

3. 隱藏欄位註冊與 IPostBackDataHandler 實作

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    if (Page != null)
    {
        Page.ClientScript.RegisterHiddenField("__" + lstLeft.ClientID, "");
        Page.ClientScript.RegisterHiddenField("__" + lstRight.ClientID, "");
        Page.RegisterRequiresPostBack(this);
    }
}

public bool LoadPostData(string postDataKey, NameValueCollection postCollection)
{
    // 同步 lstLeft
    SyncListBox(lstLeft, postCollection["__" + lstLeft.ClientID]);
    // 同步 lstRight
    SyncListBox(lstRight, postCollection["__" + lstRight.ClientID]);
    // 保留 SelectedIndex
    return true;
}

private void SyncListBox(EnhancedListBox lb, string data)
{
    if (string.IsNullOrEmpty(data)) return;
    int selIdx = lb.SelectedIndex;
    lb.Items.Clear();
    foreach (var item in data.Split(';', StringSplitOptions.RemoveEmptyEntries))
    {
        var p = item.Split('|');
        if (p.Length == 2) lb.Items.Add(new ListItem(p[1], p[0]));
    }
    if (selIdx >= 0 && selIdx < lb.Items.Count) lb.SelectedIndex = selIdx;
}

public void RaisePostDataChangedEvent() { } // 無額外事件

總結：取兩者之優

ListMover 組合兩個 EnhancedListBox，同時擁有「單列表排序」與「雙列表移動」功能。每個控件自我封裝同步邏輯，父控件無需處理 ViewState 細節，展現 完全封裝 的 Web 控件開發精髓。