Question

我有一个如此定义的列表：

<ul id="myList" class='myClass'>
    <li class="myItemClass">Item 1</li>
    <li class="myItemClass">Item 2</li>
</ul>

使用.NET如何动态地将项添加到列表中？我还需要在每个新项目上指定类名称

Answer 1

你甚至可以使用那个HTML，添加runat =“server”你可以把它当作一个HTMLControl来对待它是什么控制，我经常使用div的

<ul id="myList" runat="server" class="myClass">
    <li class="myItemClass">Item 1</li>
    <li class="myItemClass">Item 2</li>
</ul>

然后你得到那个HTMLControl并玩它

HtmlGenericControl li;

for (int x = 3; x <= 10; x++)
{
    li = new HtmlGenericControl("li");
    li.Attributes.Add("class", "myItemClass");
    li.InnerText = "Item " + x;

    myList.Controls.Add(li);
}

你最终会得到：

    <ul id="myList" runat="server" class="myClass">
        <li class="myItemClass">Item 1</li>
        <li class="myItemClass">Item 2</li>
        <li class="myItemClass">Item 3</li>
        <li class="myItemClass">Item 4</li>
        <li class="myItemClass">Item 5</li>
        <li class="myItemClass">Item 6</li>
        <li class="myItemClass">Item 7</li>
        <li class="myItemClass">Item 8</li>
        <li class="myItemClass">Item 9</li>
        <li class="myItemClass">Item 10</li>            
    </ul>

当然，您可以使用有序或无人值守列表，它们也位于ASP.NET Web控件下面。

<asp:BulletedList runat="server" ...

Answer 2

您可以使用asp：BulletedList，如

<asp:BulletedList ID="MyList1" CssClass="MyClass" runat="server">
  <asp:ListItem Text="Item1" class="MyClass" />
</asp:BulletedList>

添加添加代码，例如

ListItem item = new ListItem("Item2");
item.Attributes.Add("class", "MyClass");
MyList1.Items.Add(item);

或者，如果出于某些特定原因需要使用ul标记，则可以向其添加runat =“server”。 E.g。

<ul id="MyList2" class="MyClass" runat="server">
  <li class="MyClass">Item1</li>
</ul>

使用类似

的代码

HtmlGenericControl li = new HtmlGenericControl("li");
li.Attributes.Add("class", "MyClass");
li.InnerText = "Item2";
MyList2.Controls.Add(li);

Answer 3

解决此问题的最简单方法是使用asp转发器控件

<ul id="myList" class='myClass'>
<asp:Repeater ID="repeaterMyList" Runat="server">
<ItemTemplate>
  <li class="myItemClass">
   <%# Eval("Item") %>
  </li>
</ItemTemplate>
</asp:Repeater>
</ul>

[编辑] - 记得在repeaterMyList上设置数据源，并在代码隐藏中的转发器控件上调用数据绑定。

repeaterMyList.DataSource = someDataTable;
repeaterMyList.DataBind();

Answer 4

我假设您有充分的理由不使用BulletedList网络服务器控件。无论如何，这是一个有趣的编程练习，它说明了Htmlservercontrol体系结构的内部结构以及它们如何映射到简单的HTML标记。

HTML ul和li标记未直接映射为HTMLServercontrols。这意味着即使您向列表添加runat="server"属性，其内容也不会作为列表项直接访问。

但是，所有未直接映射为Html服务器控件的控件都可以通过HtmlGenericControl类访问。这样就可以动态地创建和修改这些控件。

因此，解决方案有两个方面：

创建无序列表runat="server"，以便您可以在服务器端代码中访问它。此外，您应该在列表runat="server"中创建现有项目，否则它们只能作为包含前两个列表项的LiteralControl作为纯文本访问。
在代码中，访问列表的内容并添加一个类型为“li”的新HtmlGenericControl。

以下（简单的简单）页面演示了此过程：

<%@ Page Language="VB" AutoEventWireup="false" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">

  Private Shared addedItems As List(Of HtmlGenericControl)

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
      'On first load, instantiate the List.
      addedItems = New List(Of HtmlGenericControl)
    End If
  End Sub

  Protected Sub btn1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    'Add the previously created items to the UL list.
    'This step is necessary because
    '...the previously added items are lost on postback.
    For i As Integer = 0 To addedItems.Count - 1
      myList.Controls.Add(addedItems.Item(i))
    Next

    'Get the existing no. of items in the list
    Dim count As Integer = myList.Controls.Count

    'Create a new list item based on input in textbox.
    Dim li As HtmlGenericControl = CreateBulletItem()

    'Add the new list item at the end of the BulletedList.
    myList.Controls.AddAt(count, li)
    'Also add this newly created list item to the generic list.
    addedItems.Add(li)
  End Sub

  Private Function CreateBulletItem() As HtmlGenericControl
    Dim li As New HtmlGenericControl("li")
    li.InnerText = txtNewItem.Value
    li.Attributes("class") = "myItemClass"

    Return li
  End Function
</script>

<html>
<head runat="server">
  <title>Test Page</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <ul id="myList" class='myClass' runat="server">
        <li runat="server" class="myItemClass">Item 1</li>
        <li runat="server" class="myItemClass">Item 2</li>
      </ul>
      <input type="text" id="txtNewItem" runat="server" />
      <asp:Button ID="btn1" runat="server" Text="Add" OnClick="btn1_Click" />
    </div>
  </form>
</body>
</html>

使用.NET填充html列表控件

4 个答案: