有没有一种编程方式可以向 <UL> 元素中添加项目？

Question

我有一个使用ASP.NET 2.0的应用程序，其中包含一个现有的<UL>。我想通过编程方式向其添加项目。我已经添加了ID和runat="server"属性。

- donde

Answer 1

你可以创建新的 HtmlGenericControls 并将它们添加到 UL 控件的 Controls 属性中。因此，假设标记如下：

<ul runat="server" id="foo_bar">
    <li>Item</li>
</ul>

你可以这样做（其中itemList是你想作为LI添加的东西的列表）：

foreach (var item in itemList)
{
    HtmlGenericControl newLi = new HtmlGenericControl("li");
    newLi.InnerText = item.DisplayText;
    foo_bar.Controls.Add(newLi);
}

如果您要呈现一个字符串数组，比如：

string[] itemList = new string[] { "1", "2", "3" };
foreach (string item in itemList)
{
    HtmlGenericControl newLi = new HtmlGenericControl("li");
    newLi.InnerText = item;
    foo_bar.Controls.Add(newLi);
}

你将看到以下结果（使用我的原始标记）：

• Item
• 1
• 2
• 3

- djdd87

---

你能帮我做一件事吗？这段代码运行得很好，但我想让同一个列表拥有适当的CSS格式样式。但这似乎不可能实现。 - Abhishek Dey

Answer 2

使用重复器控件是向无序列表添加项目的最简单方法。

您可以将项目列表绑定到重复器，然后根据需要输出每个列表项。

 <asp:Repeater ID="rpt1" Runat="server">
 <HeaderTemplate>
  <ul>
 </HeaderTemplate>

  <ItemTemplate>
    <li>
      <%# DataBinder.Eval(Container.DataItem, "Item") %>
   </li>
  </ItemTemplate>

  <FooterTemplate>
    </ul>
  </FooterTample>
 </asp:Repeater>

然后在你的C#（或者你使用的任何服务器端语言）中，你需要执行以下操作：

DataSet listItems = GetTheListItemsMethod();

rptr1.DataSource = listItems;
rptr1.DataBind();

- Jamie Dixon

---

虽然这通常是一个不错的方法，但问题要求一个编程解决方案，而不是声明式的。我认为这意味着它应该从代码后台完成。 - Greg

更好的做法是将 <ul> 和 </ul> 放入重复器的 <HeaderTemplate> 和 <FooterTemplate> 元素中。这样，当没有列表项时，您就不会得到一个空的 <ul>... 就像那样 :) - Olly Hodgson

嗯，我听到了你的声音Greg，这是一个公正的语义点。 - Jamie Dixon

@Olly - 我刚试了一下，它仍然创建了<ul></ul>。这是通过执行repeater.DataSource = new List<class>();实现的。因此，如果list.Count == 0，则标题/页脚仍会被呈现，而如果repeater.DataSource = null，则不会呈现。 - Nelson Rothermel

使用HeaderTemplate和FooterTemplate是个好主意，因为通过codebehind使整个“Repeater”不可见更直观。但是，正如Nelson所说的，一个空的“Repeater”仍会输出header和footer。有一些数据绑定控件在为空时具有支持特殊行为的功能。 - Brian

Answer 3

还有一个名为System.Web.UI.WebControls.BulletedList的控件

你可以绑定到一个数据源上

var bulletedList = new BulletedList();
bulletedList.DataSource = myData;
bulletedList.DataBind();

或者单独将项目添加到项目集合中

bulletedList.Items.Add( "item1" );
bulletedList.Items.Add( "item2" );

不要忘记将它添加到页面上的某个位置，否则你将永远看不到它。

Page.Controls.Add( bulletedList );

- Dave Thieben

Answer 4

在 div 标签内定义一个无序列表，并向标签添加 id 字段和 runat=server，以便您可以从代码后台页面访问控件。

代码后台示例：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    Dim y As ArrayList = New ArrayList()
    y.Add("first")
    y.Add("second")
    y.Add("three")

    For Each z As String In y
        Dim x2 As HtmlGenericControl = New HtmlGenericControl("li")
        x2.InnerText = z.ToString
        ted.Controls.Add(x2)
    Next

End Sub

- Chuckie