2009-05-29 9 views
7

Ich habe eine Liste wie so definiert:füllen Sie ein HTML-List-Steuerelement .NET

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

mit .NET, wie kann ich Elemente in die Liste dynamisch hinzufügen? Ich muss auch auf jedem neuen Element den Klassennamen angeben

+3

Verwenden der asp: BulletedList ist keine Option? – miccet

Antwort

2

Der einfachste Weg, dieses Problem durch Verwendung der asp-Repeater Kontrolle lösen kann

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

[Bearbeiten] - Erinnern Sie die Datenquelle auf repeaterMyList einstellen und Call Databind auf dem Repeater-Steuerelement im Codebehind.

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

Ich nehme an, dass es einen gültigen Grund gibt, dass Sie das BulletedList Webserver-Steuerelement nicht verwenden. Wie auch immer, dies ist eine interessante Programmierübung, die die Interna der Htmlservercontrol-Architektur und ihre Zuordnung zu einfachen HTML-Tags veranschaulicht.

Die Tags HTML ul und li werden nicht direkt als HTMLServerControls zugeordnet. Das bedeutet, dass selbst wenn Sie der Liste ein runat="server"-Attribut hinzufügen, der Inhalt nicht direkt als Listenelemente verfügbar ist.

Alle Steuerelemente, die nicht direkt als HTML-Serversteuerelemente zugeordnet sind, sind jedoch über die Klasse HtmlGenericControl zugänglich. Dies ermöglicht es, solche Steuerelemente dynamisch zu erstellen und zu ändern.

Die Lösung ist daher zweifach:

  • die ungeordnete Liste Make runat="server", so dass Sie es in serverseitigen Code zugreifen können. Außerdem sollten Sie die vorhandenen Elemente in der Liste runat="server" einfügen, ansonsten sind sie nur als LiteralControl zugänglich, die die ersten beiden Listenelemente als Nur-Text enthält.
  • Im Code auf den Inhalt der Liste zugreifen und ein neues HtmlGenericControl vom Typ "li" hinzufügen.

die folgenden (nackte Knochen einfach) Seite veranschaulicht dieses Verfahren:


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

Da ich neu bei .net bin, kann ich fragen, warum Sie addedItems = Neue Liste (von HtmlGenericControl) beim Laden der Seite erstellen? Ich kann nicht sehen, dass diese Liste an irgendeine Kontrolle gebunden ist, oder? Warum fügst du Gegenstände aus dieser Liste zu ul hinzu? Tut mir leid, wenn es eine neue Frage ist. –

+0

@dasha: Weil die dynamisch erstellten Listenelemente nicht im Speicher oder in ViewState persistent sind. Ich musste die neu erstellten Listenelemente irgendwo speichern, damit ich sie wieder zum UL hinzufügen konnte. Außerdem musste ich die Variable "addedItems" Shared machen, um beim Postback darauf zugreifen zu können. – Cerebrus

+0

Ich habe dem Code erläuternde Kommentare hinzugefügt. Hoffe das hilft. :-) – Cerebrus

4

Sie asp verwenden: BulletedList wie

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

hinzufügen Code wie

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

Oder wenn Sie aus einem bestimmten Grund das UL-Tag verwenden müssen, können Sie ein runat = "server" hinzufügen. Z.B.

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

Mit Code wie

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

Sie auch, dass die HTML verwenden können, das Hinzufügen runat = „server“ Sie werden in der Lage es als Htmlcontrol, was keine mater zu behandeln steuern ist, mache ich das oft mit den div

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

dann erhalten Sie, dass Htmlcontrol und mit ihm spielen

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

Sie werden am Ende mit:

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

natürlich, dass Sie eine geordnete oder unorderer Liste verwenden können, sie auch unter dem ASP.NET Web Controls.

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

Ich versuche diese Technik anzuwenden. Aber ich bekomme eine Null-Referenz-Ausnahme, wenn ich "mylist.something" im Code-Behind des User-Controls verwende. Kann jemand bitte helfen. –

+0

arbeitete für mich, thx viel !!! – Sam

Verwandte Themen