compilare un controllo lista html utilizzando .NET

Ho una lista definita in questo modo:compilare un controllo lista html utilizzando .NET

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

utilizzando .NET come posso aggiungere elementi alla lista in modo dinamico? Ho anche bisogno di specificare il nome della classe su ogni nuovo elemento

fonte

2009-05-29 Anonymous

Utilizzare asp: BulletedList non è un'opzione? – miccet

Il modo più semplice è possibile risolvere questo problema è quello di utilizzare l'asp di controllo ripetitore

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

[Edit] - Ricordate di impostare l'origine dati su repeaterMyList e chiama il databind sul controllo del ripetitore nel codebehind.

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

fonte

2009-05-29 06:11:33

Suppongo che vi sia un motivo valido per non utilizzare il controllo del server Web BulletedList. Ad ogni modo, questo è un esercizio di programmazione interessante che illustra i componenti interni dell'architettura Htmlservercontrol e come si collegano a semplici tag HTML.

I tag HTML ul e li non vengono mappati direttamente come HTMLServercontrols. Ciò significa che anche se si aggiunge un attributo runat="server" all'elenco, i contenuti non saranno direttamente accessibili come listini.

Tuttavia, tutti i controlli non mappati direttamente come controlli del server Html sono accessibili tramite la classe HtmlGenericControl. Ciò rende possibile creare e modificare tali controlli dinamicamente.

La soluzione, quindi, è duplice:

fare la lista non ordinata runat="server" in modo che vi si possa accedere in codice lato server. Inoltre, è necessario creare gli elementi esistenti nell'elenco runat="server", altrimenti saranno accessibili solo come LiteralControl che contiene i primi due listitems come testo normale.
Nel codice, accedere al contenuto dell'elenco e aggiungere un nuovo HtmlGenericControl di tipo "li" ad esso.

Il seguente (bare-bones semplice) pagina illustra questa procedura:

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

fonte

2009-05-29 06:58:20 Cerebrus

Siccome sono nuovo a .net, posso chiedere perché crei addedItems = New List (Of HtmlGenericControl) al caricamento della pagina? Non riesco a vedere questa lista 'legata' a nessun controllo, vero? Perché aggiungi elementi da questo elenco a ul? Scusa se è una nuova domanda. –

@dasha: poiché i listitems creati dinamicamente non sono persistenti in memoria o ViewState. Avevo bisogno di memorizzare i listini appena creati da qualche parte in modo da poterli aggiungere all'UL. Inoltre, avevo bisogno di rendere condivisa la variabile "addedItems" per poterla accedere al postback. – Cerebrus

Ho aggiunto commenti esplicativi al codice. Spero che questo ti aiuti. :-) – Cerebrus

Si potrebbe utilizzare asp: BulletedList come

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

Aggiungere aggiungere codice come

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

Oppure, se per qualche motivo specifico è necessario utilizzare il tag ul, è possibile aggiungere un "server" runat ad esso. Per esempio.

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

Con il codice come

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

fonte

2009-05-29 06:59:50

si può anche utilizzare che HTML, aggiungendo runat = "server" si sarà in grado di trattarlo come un HTMLControl non mater cosa controllarlo è, faccio questo spesso con div

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

allora si ottiene che HTMLControl e giocare con lui

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); 
}

si finirà 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>

, naturalmente, che è possibile utilizzare un elenco ordinato o unorderer, ma anche di seguito per i controlli Web ASP.NET.

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

fonte

2009-05-29 07:45:52 balexandre

Sto cercando di utilizzare questa tecnica. Ma ottengo un'eccezione di riferimento null sull'utilizzo di "mylist.something" nel code-behind del controllo dell'utente. Qualcuno può aiutarmi per favore. –

ha funzionato per me, grazie mille !!! – Sam

compilare un controllo lista html utilizzando .NET

risposta

Problemi correlati