заполнить элемент управления списком HTML, используя .NET

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.

<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". Э.Г.

<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, который содержит первые два элемента списка в виде простого текста.
• В коде получите доступ к содержимому списка и добавьте в него новый HtmlGenericControl типа "li".

Следующая страница (простой) демонстрирует эту процедуру:

---

<%@ 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>