Заполнить элемент управления списком 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>