He una lista definida de esta manera:rellenar un control lista html usando .NET
<ul id="myList" class='myClass'>
<li class="myItemClass">Item 1</li>
<li class="myItemClass">Item 2</li>
</ul>
utilizando .NET ¿Cómo puedo añadir elementos a la lista de forma dinámica? También tengo que especificar el nombre de la clase en cada nuevo elemento
La forma más simple que puede resolver este problema es mediante el control del repetidor asp
<ul id="myList" class='myClass'>
<asp:Repeater ID="repeaterMyList" Runat="server">
<ItemTemplate>
<li class="myItemClass">
<%# Eval("Item") %>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
[Editar] - No se olvide de ajustar la fuente de datos en repeaterMyList y llama a databind en el control de repetidor en el código subyacente.
repeaterMyList.DataSource = someDataTable;
repeaterMyList.DataBind();
Supongo que hay una razón válida para no utilizar el control del servidor web BulletedList. De todos modos, este es un ejercicio de programación interesante que ilustra los aspectos internos de la arquitectura Htmlservercontrol y cómo se asignan a las etiquetas HTML simples.
Las etiquetas HTML ul y li no están asignadas directamente como controles HTMLServer. Esto significa que incluso si agrega un atributo runat="server" a la lista, sus contenidos no serán accesibles directamente como listitems.
Sin embargo, todos los controles no asignados directamente como controles del servidor Html son accesibles a través de la clase HtmlGenericControl. Esto hace posible crear y modificar dichos controles dinámicamente.
La solución, por lo tanto, es doble:
runat="server" para que pueda acceder a él en el código del lado del servidor. Además, debe crear los elementos existentes en la lista runat="server", de lo contrario solo se podrá acceder a ellos como LiteralControl que contiene los primeros dos elementos de lista como texto sin formato.La siguiente página (escueto sencilla) muestra este procedimiento:
<%@ 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>
Como soy nuevo en .net, ¿puedo preguntar por qué creas addedItems = New List (Of HtmlGenericControl) en la carga de la página? No puedo ver que esta lista esté 'atada' a ningún control, ¿o sí? ¿Por qué agregas elementos de esta lista a ul? Lo siento si es una pregunta nueva. –
@dasha: Porque los elementos de lista creados dinámicamente no se conservan en la memoria o ViewState. Necesitaba almacenar los elementos de lista recién creados en alguna parte para poder agregarlos de nuevo a la UL. Además, necesitaba hacer que la variable "addedItems" Shared pueda acceder a ella en la devolución de datos. – Cerebrus
He agregado comentarios explicativos al código. Espero que esto ayude. :-) – Cerebrus
Usted podría utilizar asp: BulletedList como
<asp:BulletedList ID="MyList1" CssClass="MyClass" runat="server">
<asp:ListItem Text="Item1" class="MyClass" />
</asp:BulletedList>
añadir añadir un código como
ListItem item = new ListItem("Item2");
item.Attributes.Add("class", "MyClass");
MyList1.Items.Add(item);
O si por alguna razón específica necesita utilizar la etiqueta ul, puede agregarle una runat = "servidor". P.ej.
<ul id="MyList2" class="MyClass" runat="server">
<li class="MyClass">Item1</li>
</ul>
Con un código como
HtmlGenericControl li = new HtmlGenericControl("li");
li.Attributes.Add("class", "MyClass");
li.InnerText = "Item2";
MyList2.Controls.Add(li);
incluso se puede utilizar esa HTML, añadiendo runat = "server" usted será capaz de tratarlo como un HTMLControl sin importar que el control es, hago esto a menudo con la div
<ul id="myList" runat="server" class="myClass">
<li class="myItemClass">Item 1</li>
<li class="myItemClass">Item 2</li>
</ul>
continuación, se obtiene que HTMLControl y jugar con él
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);
}
el resultado final será con:
<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>
por supuesto que se puede utilizar una lista ordenada o unorderer, también por debajo de los controles Web ASP.NET.
<asp:BulletedList runat="server" ...
Estoy tratando de emplear esta técnica. Pero obtengo una excepción de referencia nula sobre el uso de "mylist.something" en el código subyacente de control del usuario. Puede ayudarme alguien, por favor. –
funcionó para mí, ¡mucho! – Sam
Usando el asp: ¿BulletedList no es una opción? – miccet