ASP.NET 批量操作 HTML 無序列表的三種方案對比

場景描述

在 ASP.NET WebForms 中，需對前台 `

• ...

` 結構進行批量修改（如更新文本、樣式）。本文總結三種不同思路的實現方案，各有優劣，可按項目需求選擇。

方案一：單獨轉為 HTML 控件，用 FindControl 定位

前台標記

<ul>
  <li id="li1" runat="server">初始值1</li>
  <li id="li2" runat="server">初始值2</li>
  ...
  <li id="li8" runat="server">初始值8</li>
</ul>
<asp:Button ID="Button1" runat="server" Text="批量修改" OnClick="Button1_Click" />

後台代碼

protected void Button1_Click(object sender, EventArgs e)
{
    for (int i = 1; i <= 8; i++)
    {
        HtmlGenericControl li = this.FindControl("li" + i) as HtmlGenericControl;
        li.InnerHtml = "新值" + i;
        li.Attributes.CssStyle.Value = "color:red";
    }
}

優缺點

• ✅ 直觀、精確控制單個元素
• ❌ 需為每個 `
• ` 指定 `id` 和 `runat="server"`，標記冗餘
• ❌ 元素數量動態變化時維護困難

方案二：父容器轉為控件，遍歷 Controls 集合

前台標記

<ul id="ul1" runat="server">
  <li runat="server">初始值1</li>
  <li runat="server">初始值2</li>
  ...
</ul>

後台代碼

private int counter = 1;
protected void Button1_Click(object sender, EventArgs e)
{
    foreach (Control control in ul1.Controls)
    {
        if (control is HtmlGenericControl li)
        {
            li.InnerHtml = "新值" + (counter++);
            li.Attributes.CssStyle.Value = "color:red";
        }
    }
}

優缺點

• ✅ 無需為每個 `
• ` 指定 ID，標記簡潔
• ✅ 自適應動態增減的列表項
• ❌ `Controls` 集合包含 `LiteralControl`（文本節點、換行符），需類型過濾
• ❌ 嵌套結構複雜時遍歷邏輯較繁瑣

方案三：使用 HtmlAgilityPack 進行 DOM 操作

前台標記

<ul id="ul1" runat="server">
  <li>初始值1</li>
  <li>初始值2</li>
  ...
</ul>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" />

後台代碼

protected void Button1_Click(object sender, EventArgs e)
{
    var htmlDoc = new HtmlDocument();
    htmlDoc.LoadHtml(ul1.InnerHtml);
    var lis = htmlDoc.DocumentNode.SelectNodes("li");
    
    for (int i = 0; i < lis.Count; i++)
    {
        lis[i].InnerHtml = "新值" + (i + 1);
        lis[i].Attributes.Add("style", "color:red");
    }
    ul1.InnerHtml = htmlDoc.DocumentNode.InnerHtml;
}

優缺點

• ✅ `
• ` 完全不需 `runat="server"`，前台最乾淨
• ✅ 支援 XPath、CSS 選擇器等強大查詢能力
• ✅ 可處理非標準、殘缺 HTML
• ❌ 需引入第三方庫（NuGet: `HtmlAgilityPack`）
• ❌ 字符串解析/序列化有性能開銷，大列表時明顯

方案對比總結表

維度	方案一	方案二	方案三
前台標記複雜度	高	中	低
動態列表適應性	差	好	好
性能	最優	優	一般
靈活度/查詢能力	低	中	高
依賴	無	無	HtmlAgilityPack

選型建議

• 固定少量列表項、追求極致性能 → 方案一
• 動態列表、不想引入第三方庫 → 方案二
• 複雜 HTML 結構、需強大選擇器、可接受微小性能損耗 → 方案三